「Cocoonのデザインをカスタマイズしたいけど、どこから設定すればいいの？」と悩んでいませんか？
Cocoonはデザインの自由度が高いWordPressテーマですが、設定項目が多くて最初は迷ってしまいます。この記事では、ブログ初心者が最初に触るべき設定をまとめました。
いま読んでいるこのブログ自体がCocoon（無料）で作られています。有料テーマなしでここまでできる、という実例として見てください。
Cocoonカスタマイズの基本：どこから設定する？⚙️
Cocoonのデザイン設定は「Cocoon設定」から行います。WordPressの管理画面のサイドバーに「Cocoon設定」というメニューがあります。
最初に触るべき設定はこの3つです。
- スキン：ブログ全体のデザインテンプレートを選ぶ
- カラー：見出しやリンクの色を変える
- フォント：文字のサイズや種類を変える
スキンでデザインの雰囲気を一発で変える🎨
スキンは、ブログ全体の見た目を一括で変えられる機能です。Cocoonには100種類以上のスキンが最初から用意されています。
「Cocoon設定 → スキンタブ」から選べます。スキンをクリックするとプレビュー画像が表示されるので、気に入ったデザインを選んで「変更をまとめて保存」をクリックするだけです。スキンを変えるだけで全体の印象がガラッと変わります。まずここから試してみるのがおすすめです。
カラー設定でブランドカラーを設定する⚙️
「Cocoon設定 → カラータブ」から、ブログの主要な色を変えられます。
- メインカラー：ブログ全体のアクセントカラー
- リンクカラー：テキストリンクの色
- 見出しカラー：h2・h3見出しの色やボーダー
- ボタンカラー：検索ボタンなどの背景色
私はブルー系（#1D4ED8）に統一しました。色は16進数カラーコードで指定します。無料のカラーピッカーサイトで好きな色のコードを調べてから入力すると便利です。読者に「このブログらしい」と感じてもらえる色を決めておくと、統一感が出ます。
フォントサイズで読みやすさを整える📌
「Cocoon設定 → フォントタブ」から文字の大きさと種類を変えられます。40代以上の読者が多いブログであれば、フォントサイズは16px〜18px程度が読みやすいです。私は17pxに設定しています。スマホでも見やすいサイズです。
フォントの種類は「游ゴシック」や「ヒラギノ角ゴシック」などを設定できますが、デフォルトのまま変えなくても問題ありません。まずサイズだけ調整するのがおすすめです。
見出しのデザインを変える🎨
「Cocoon設定 → 見出しタブ」から、h2・h3見出しのデザインを変えられます。ボーダーの位置・色・太さなどを細かく設定できます。私は左にブルーのボーダーラインが入るシンプルなデザインを選びました。見出しのデザインを決めると記事全体の印象が整うので、初期設定の段階でここまで決めておくのがおすすめです。
参考：このブログの実際の設定値
「具体的にどんな数字にすればいいの？」という方のために、このブログで実際に使っている設定を公開します。
- テーマカラー：ブルー系（カテゴリーバッジ #3B82F6・見出しの左ボーダー #60A5FA）
- リンク色：濃いブルー #1D4ED8（読みやすさのコントラスト基準を満たす色です）
- 本文フォント：17px（40代の自分が読みやすいサイズに少し大きめ）
- H2見出し：左に4pxのブルーのライン／H3はグレーの細ラインで階層に差をつける
実は最初はオレンジ系にしていて、あとからブルーに全面変更しました。AIに診断してもらいながら見直した過程はこちらで公開しています。
CocoonのデザインをAIと一緒に見直した話【実践編・診断から改善まで全公開】
細かいカスタマイズはCSSで対応できる⚙️
Cocoonの設定だけでは対応できない細かいカスタマイズは、CSSコードを追加することで実現できます。「外観 → カスタマイズ → 追加CSS」からコードを貼り付けるだけです。
CSSの知識がなくても、やりたいことをAIに相談すれば対応するコードを教えてもらえます。「h2の左ボーダーをもっと太くしたい」「サイドバーのリンク色だけ変えたい」といった要望でも、AIが適切なCSSを出してくれます。
よくある質問（FAQ）
Q. スキンとカラー設定、どっちを先に触ればいい？
スキンが先です。スキンで全体の雰囲気を決めてから、カラーで微調整する順番だと迷いません。逆にすると、スキンを変えた瞬間にカラー設定が上書きされてやり直しになることがあります。
Q. CSSがわからなくても大丈夫？
大丈夫です。私もCSSは書けません。設定画面でできる範囲で十分整いますし、どうしても細かい調整がしたくなったら、AIに「Cocoonで〇〇したい」と聞けばコードを書いてもらえます。
Q. 無料のCocoonのままでいい？有料テーマに変えるべき？
少なくとも最初の数ヶ月はCocoonで十分というのが私の実感です。このブログもCocoonのままで、デザインに困ったことはありません。有料テーマ（1〜2万円）は、ブログが続くと確信してからで遅くありません。
まとめ✨
Cocoonのデザインカスタマイズは、まず3つの設定から始めましょう。
- スキン：全体の雰囲気を一発で変えられる。まずここから
- カラー：メインカラーとリンク色を自分のブランドに合わせる
- フォントサイズ：読者に合わせて16〜18pxに設定
複雑なCSSカスタマイズはAIに相談すれば解決できます。まずは管理画面でできる範囲から始めて、少しずつ自分好みのデザインに整えていきましょう。
実際にAIとデザインを見直したやりとりはこちらに書いています。
→ CocoonのデザインをAIと一緒に見直した話【実践編・診断から改善まで全公開】
デザインが整ったら、次は記事と収益の仕組みづくりへ。
副業ブログで月1万円稼ぐロードマップ【完全版・40代・AI活用】
この記事でわかったこと
- Cocoonのカスタマイズはスキン・カラー・フォントの3つから始めるのがおすすめ
- スキンを変えるだけで全体の見た目がガラッと変わる
- フォントサイズは読者層に合わせて16〜18px程度が読みやすい
- 細かいCSSカスタマイズはAIに相談すれば対応できる
コメント