〇当サイトではアフィリエイトプログラムを利用して商品やサービスを紹介しています。
〇当サイトにはプロモーションが含まれています。
〇当サイトはA8.netをはじめとするアフィリエイトサービスを通じて、成果報酬型の広告収入を得ています。
Cocoonをインストールした直後、僕は何日もデザインをいじり続けました。
記事は1本も書かずに。……目的、変わってる…？
スキンを変えては「うーん、なんか違う」。見出しの色を変えては「これじゃない感」。気づけば3日が過ぎていて、手元には0本の記事と、「なんとなくそれっぽい」ブログだけが残っていた。
……そんな経験、ありませんか？
Cocoonのカスタマイズって、触れる場所が多いんですよね。だからこそ「どこから手を付ければいいか」がわからなくなる。設定を変えたら元に戻せるのか不安になる。完璧にしてから記事を書こうとして、結果として何も書けない。
この記事では、そんな入口のもやもやを整理するために書きました。デザイン・見出し・ヘッダーという「最初に触るべき3つの場所」に絞って、それぞれの意味と変え方を共有します。
ブログ運営10年以上、40万PVのサイトも経験した立場から言えるのは、「最初のカスタマイズは7割で十分」ということ。残りの3割は、記事を書きながら感じていけばいい。
「有料テーマに移ったときの使用感も、別の記事でまとめています」
Cocoonのカスタマイズ、どこから手を付けるべきか
Cocoonの設定は、WordPressの管理画面の左メニュー「Cocoon設定」から一括で触れます。
ここを開いたとき、タブの多さに圧倒された人も多いんじゃないでしょうか。「スキン」「ボディ」「ヘッダー」「フッター」「見出し」……全部試したくなる気持ち、わかります。
でも最初から全部触る必要はないです。
まず知っておきたいのは、Cocoonの設定変更はリアルタイムでプレビューできる場合と、保存してから反映される場合があるということ。「保存ボタン」を押さない限り確定しないので、気軽に触って大丈夫です。間違えたとしても、デフォルトに戻す選択肢があります。
最初に手を付けるべき場所は3つだけ。
- スキン（デザイン全体）
- 見出し（H2・H3の装飾）
- ヘッダー（ブログの顔）
この3つを整えるだけで、「なんとなくダサい」から「それっぽい」に変わります。それ以外の細かい設定は、記事を書きながら「ここが気になる」と感じてから触れば十分です。
「触ったら壊れるんじゃないか」という不安は、よく聞きます。でも実際には、公開中のブログに設定を加えても、大きなトラブルになることはほとんどない。怖いのは最初だけです。
まずデザイン（スキン）を変えるだけで印象は激変する
Cocoonには「スキン」という、デザインの雰囲気を一括で変える機能があります。
「Cocoon設定」→「スキン」タブから選べて、100種類以上のスキンが無料で使えます。選ぶだけ。コードを書く必要はゼロです。
スキンを変えると何が変わるか？
色使い・フォントの印象・リンクの色・ボタンのスタイルが、一瞬でガラッと変わります。「あ、ブログっぽくなった」という感覚を、最も手軽に味わえる設定です。
スキンを選ぶときに悩みがちなのが「どれが正解か」という点。
正直、正解はないです。ただ、選ぶときの基準を一つ持っておくと楽になります。「自分のブログに来る読者が、心地よく読み続けられるか」を意識して選ぶこと。ゲーム系ブログならポップな配色、副業系なら清潔感のある白系が馴染みやすいです。
注意したいのは、スキンを変えても「記事の内容の見せ方（見出しのデザインなど）」は別の設定で管理されているという点。スキンはあくまで全体の空気感を変えるもの。「スキンを変えたのに見出しが変わらない」と感じた人は、次のセクションへ。
ちなみに僕の場合は、さんざんいろいろと試して2～3時間悩んだ結果、結局そのブログの読者対象として想定するペルソナが好きそうなスキンかつそのブログのジャンルにあったスキンに落ち着きました。
ペルソナが好きな色、ジャンルにぴったりなデザインといったように選んだ感じです。ブログジャンルはもちろんですが、事細かにペルソナが決まっているのなら悩む必要なかったのかも。
見出しのカスタマイズ｜読みやすさが記事の信頼につながる
見出し（H2・H3）のデザインは、読者の「読み続けるかどうか」の判断に影響します。
少し大げさに聞こえるかもしれませんが、実際に感じてきたことです。見出しが平べったくて区切りがわかりにくいブログは、スクロールしていても「どこまで読んだか」が掴みにくい。結果として、途中で離脱されやすい。
Cocoonで見出しを変えるには、「Cocoon設定」→「見出し」タブを開きます。
H2・H3それぞれについて、以下の項目を設定できます。
- スタイル：シンプル・ボーダー・背景色付きなどから選ぶ
- 文字色・背景色：カラーコードで指定
- 余白・フォントサイズ：読みやすさに直結
初心者のうちは「スタイル」を変えるだけで十分です。色はスキンと合わせて統一感を出すのがポイントで、あちこちバラバラな色を使うと、読む側は疲れやすくなります。
「なぜ見出しにこだわるのか」という本質を少し。
記事を読む人の多くは、全文を読まずにスクロールして「気になった見出し」で立ち止まります。その見出しが目に優しく、内容が一目でわかる形になっていると、読み進めてもらいやすくなる。見出しは「目次の看板」です。
ここを整えるだけで、読者が「なんか読みやすいな」と感じてくれる。その積み重ねが、サイトへの信頼につながっていきます。
ちなみに色についてですが、最大3色でまとめると美しくまとまります。
配色の黄金比
- ベースカラー 70%
- 背景や余白に使われる白が基本。他にベージュ、グレー、黒など。
- メインカラー（テーマカラー） 25%
- ブログターゲットが好きな色など、与えたい印象の色がおすすめ。ブランドカラーなど。
- アクセントカラー 5%
- 引き締める色がおすすめ。例えばメインが赤ならアクセントはその真逆の色である緑といったようにする。ボタンなどの色だけをアクセントカラーに使うと目立つ。
ヘッダーのカスタマイズ｜最初に目に入る場所だからこそ
ヘッダーは、ブログを開いた瞬間に目に入る場所です。
読者が「このブログ、信頼できそうか」を最初に判断するのも、実はヘッダーあたりだと思っています。ロゴもなく、タイトルだけが無機質に並んでいると、「ちゃんと更新されているブログなのか」と不安に感じさせてしまうことがある。
Cocoonのヘッダー設定は「Cocoon設定」→「ヘッダー」タブから触れます。
主に変更できる項目は以下です。
- ヘッダーのレイアウト：ロゴと検索バーの位置など
- ヘッダー背景色・文字色：ブログのカラーテーマに合わせる
- ヘッダーロゴ：画像を設定できる（推奨サイズは横400px程度）
- ヘッダー高さ：数値で指定できる
ロゴ画像がない場合は、とりあえずブログ名のテキストが表示されます。それで全然問題ないです。
ただ、背景色だけは変えておくことをおすすめします。デフォルトのまま（白や薄いグレー）でも悪くはないですが、テーマカラーを1色だけ設定するだけで、ぐっとブログとしての統一感が出ます。
「カラーコードって何？」という方へ。ブログで使いたい色のHEX値（#で始まる6桁の英数字）を、GoogleやCanvaのカラーピッカーで調べて貼り付けるだけです。難しくないです。
ヘッダーは「この人のブログを読んでみようかな」という第一印象を作る場所。だからこそ、最初のうちに最低限だけ整えておく価値があります。
こだわりすぎて記事を書けなくなったときの話
実はこれ、デザインカスタマイズの最大の落とし穴です。
完成度を上げようとするほど、「まだ足りない」と感じるようになる。見出しの色が気になり、フォントが気になり、スマホ表示の余白が気になる。
気づいたら記事が0本のまま、2週間が過ぎている。
これは自分も経験しましたし、副業でブログを始めた人からよく聞く話でもあります。「最初に完璧にしてから書こう」という発想は、ブログではむしろ逆効果です。
なぜかというと、ブログのデザインは「記事が増えてからわかること」が多いから。10記事書いてみて初めて「見出しの色、読みにくかったな」と気づく。30記事書いてみて「ヘッダーの高さ、スマホで邪魔だな」とわかる。デザインは、使いながら育てていくものです。
最初に整えるのは「7割」で十分。残りの3割は、読者から見たフィードバック（滞在時間や離脱率）を見ながら調整していけばいい。
「デザインが整っていないと読まれない」という不安、わかります。でもそれ以上に、記事がないと誰も来ない。まず書くこと。カスタマイズはその後でもできます。
Cocoonで限界を感じたら、次のステップの話
Cocoonは無料テーマとして完成度が高く、初心者が最初に使うテーマとして十分な選択肢です。
ただ、運営を続けていくうちに「もう少し細かく設定したい」「デザインのパターンが限られてきた」と感じることがあります。
具体的には、こんな場面です。
- 記事デザインをもっと細かく制御したい（ボックスやボタンのバリエーションが欲しい）
- ページの読み込み速度をもっと改善したい
- 有料テーマを使っているブログとの見た目の差が気になってきた
そのときに初めて、有料テーマへの移行を考えればいい。最初から有料テーマを買う必要はないです。
もし移行を検討するなら、デザインと機能のバランスが取れたテーマが使いやすいです。あふぃはじでは複数のWordPressテーマを試してきましたが、テーマ選びはブログの方向性と予算によって変わります。迷っている方は、WordPressテーマのおすすめまとめ記事が参考になるかもしれません。
「今のCocoonで不満がないなら、移行しなくていい」というのが、正直なところです。有料テーマに移ることでデザインの自由度は上がりますが、その分、設定の複雑さも増します。「今のブログに何を足したいか」が明確になってから考えても遅くないです。
比較表（Cocoon vs 有料テーマの選び方の目安）
| 比較項目 | Cocoon（無料） | 有料テーマ（例：Xwrite / STORK SE） |
|---|---|---|
| 費用 | 無料 | 1〜2万円程度（買い切り） |
| カスタマイズの自由度 | 普通〜高め | 高め〜非常に高め |
| 初心者への優しさ | 高い（ドキュメントが充実） | テーマによる |
| 表示速度 | 普通 | 最適化されているものが多い |
| デザインのバリエーション | スキンで対応 | 独自ブロック・デザインが豊富 |
| おすすめの場面 | ブログを始めたばかり / 予算をかけたくない | 記事数が増えて / 収益化を本格化する段階 |
→ 有料テーマに興味が出てきた方は、Xwrite（Xserver製テーマ）の詳細記事やSTORK SEも参考にどうぞ。どちらも実際に試した上でまとめています。
FAQ
Q1. Cocoonのカスタマイズは、公開中のブログで触っても大丈夫ですか？
大丈夫です。設定を変えても「保存ボタン」を押さない限り確定しません。また、変更した後も再度設定を変えることで元に戻せます。ただし、大きく変更する前にブログのバックアップを取っておくと、より安心です。
Q2. スキンを変えたら記事のデザインも全部変わりますか？
スキンは全体の雰囲気（配色・フォントの印象）を変えますが、見出しのデザインなど個別の設定は別のタブで管理しています。「スキンを変えたのに見出しが変わらない」という場合は、「Cocoon設定」→「見出し」タブを確認してみてください。
Q3. ヘッダーにロゴ画像を設定したいけど、どんなサイズにすればいいですか？
横幅400px前後、縦幅100〜150px程度が多く使われています。ただしCocoonのヘッダー設定で表示サイズを調整できるので、多少サイズがズレていても問題はありません。透過PNG形式で作ると、背景色に馴染みやすいです。
Q4. 見出しの色は何色にすればいいですか？
ブログ全体のテーマカラーと合わせることをおすすめします。迷ったら、サイトの基調色を3色までに絞って、それに近い色を選ぶとまとまりが出ます。複数の色を使い分けるのは、ある程度記事が増えてからで十分です。
Q5. カスタマイズをやりすぎて「戻したい」と思ったらどうすれば？
各設定タブの下部に「デフォルトに戻す」ボタンが用意されているものもあります。見当たらない場合は、元の値を控えておいてから変更するか、子テーマを使って管理すると安全です。Cocoonはコミュニティフォーラムも活発なので、困ったことは検索すると解決策が見つかりやすいです。
まとめ
Cocoonのカスタマイズで最初にやることを整理します。
- スキンを変えるだけで、ブログ全体の印象はガラッと変わる。まずここから
- 見出し（H2・H3）を整えると、記事の読みやすさと信頼感が一段上がる
- ヘッダーの背景色を設定するだけで、「ブログらしい統一感」が出る
- カスタマイズは「7割完成」でいい。残りは記事を書きながら育てていく
- Cocoonに不満がなければ有料テーマに移る必要はない。不満が出てから考えれば十分
「完璧にしてから書こう」という発想を手放すことが、ブログ運営で最初に乗り越えるべき壁かもしれません。
デザインに正解はないです。読者が読みやすければ、それで十分です。
まず今日、スキンを3〜5個試してみてください。それだけで「あ、ブログっぽくなった」という感覚が得られるはず。その小さな手応えが、記事を書くエネルギーに変わります。
有料テーマに興味が出てきた方は、こちらも参考にどうぞ。
→ WordPressテーマのおすすめまとめ
→ Xwrite（使いやすさに定評あり）
→ STORK SE（デザイン性が高い）
