Cocoonのデザインをカスタマイズする方法【入門編・カラー・フォント・見出し設定】

Cocoonでブログを作ったけど、デザインがなんとなく地味……。設定がたくさんあってどこをいじればいいかわからない、という方も多いのではないでしょうか。

私もそうでした。ところがAIに「全部診断して」とお願いしたら、問題点をズバズバ指摘してくれて、数時間でブログの見た目がガラッと変わりました。

この記事では、そこで実際にやったCocoonのデザインカスタマイズ4項目を解説します。

① カラーテーマを決める

まずブログ全体の「メインカラー」を決めましょう。私はブルーを選びました。AIやテクノロジーのイメージと合っていて、副業チャレンジ系のブログにぴったりだと思ったからです。

Cocoonのカラー設定は、管理画面の「Cocoon設定」→「全体」→「カラー」から変更できます。

ここで私が最初にやってしまったのが、明るいブルーをリンクの文字色に使ってしまったことです。

AIに指摘されて初めて知ったのですが、ウェブアクセシビリティの基準（WCAG）では、本文中のリンク色は背景色とのコントラスト比が4.5:1以上必要とされています。

カラー	コントラスト比	基準
#60A5FA（明るいブルー）	2.47:1	❌ 基準外
#1D4ED8（濃いブルー）	7.3:1	✅ 基準クリア

見た目はほぼ同じブルー系のまま、少し濃い #1D4ED8 に変えるだけでクリアできます。Googleのアクセシビリティ評価にも影響するので、ぜひ確認してみてください。

Cocoonのデフォルトフォントサイズは15〜16px程度です。スマホで読む場合はとくに小さく感じることがあります。

40代以上の読者が多いブログなら17〜18pxがおすすめです。目が疲れにくく、長い記事でも読み続けてもらいやすくなります。

Cocoon設定の「フォント」から変更できますが、Code SnippetsプラグインにCSSを追加する方が確実です。

body, p { font-size: 17px; }

見出しの階層（H2・H3）が視覚的に区別できていないと、読者が「今どのレベルの説明を読んでいるか」わからなくなります。

私のブログではこう設定しました。

H2は「大きなテーマの切れ目」、H3は「その中の小見出し」というイメージで色の強さを変えると、読者が迷子になりません。

.entry-content h3 {
  border-left: 3px solid #aaa !important;
  background: #fafafa;
  padding: 8px 12px !important;
}

Cocoonには目次が自動生成される機能があります。長い記事を読んでもらうのにとても便利なのですが、デフォルトだと目次内のリンク色が本文のリンク色と違うことがあります。

以下のCSSでブランドカラーに統一できます。

.toc a { color: #555 !important; }
.toc a:hover { color: #60A5FA !important; }