WordPressテーマ「Cocoon」はシンプルで使いやすい反面、デザインに物足りなさを感じることも。
この記事では、見出し・目次・リンクの色を統一して、ブログに統一感・見やすさを加えるカスタマイズ用CSSをご紹介します。
こんな方におすすめ：
- Cocoonで見出しや目次の色を変えたい人
- リンクや外部リンクの色・装飾をカスタマイズしたい人
- フォントサイズやデザインをもっと見やすくしたい人
- CSSがよく分からない初心者でも簡単に試したい人
初心者でもわかりやすいよう、CSSの貼り方や色を変えるポイントも丁寧に解説しています。
まずはCSSの貼り方から（初心者向けガイド）
これから紹介するCSSコードは、WordPressの「追加CSS」に貼り付けるだけでOK！
手順：CSSの貼り方
2．左側メニューの「外観」→「カスタマイズ」を選択
3．「追加CSS」というメニューをクリック
4．このブログで紹介しているコードを貼り付ける
5．右上の「公開」を押して保存
あとは、あなたのブログに反映されます♪
見出しの「色とサイズ」を調整（h2〜h6）
まずは記事内の見出しを調整。
Cocoonのデフォルト設定よりも落ち着いた色合いで設定しました。
🎨 見出しデザインCSS（h2〜h6）
/* 見出し2（記事の大きな区切り） */
.entry-content h2 {
color: #4a708b !important;
border-bottom: 2px solid #84b9cb;
padding-bottom: 0.3em;
margin-top: 2em;
margin-bottom: 1em;
font-size: 1.5em;
}
/* 見出し3（h2の中の小見出し） */
.entry-content h3 {
color: #4a708b !important;
margin-top: 1.5em;
margin-bottom: 0.8em;
font-size: 1.3em;
}
/* 見出し4（さらにその中の区切り） */
.entry-content h4 {
color: #4a708b !important;
margin-top: 1.2em;
margin-bottom: 0.6em;
font-size: 1.1em;
font-weight: bold;
}
/* 見出し5（細かな補足や項目に） */
.entry-content h5 {
color: #4a708b !important;
margin-top: 1em;
margin-bottom: 0.5em;
font-size: 1em;
font-weight: bold;
}
/* 見出し6（注釈・最小単位の見出し） */
.entry-content h6 {
color: #4a708b !important;
margin-top: 0.8em;
margin-bottom: 0.4em;
font-size: 0.95em;
font-weight: bold;
}
📝 このCSSのポイント
- すべての見出しのカラーを統一（#4a708b）
- 階層が下がるほどフォントサイズを段階的に縮小
- h2にはアクセントとして下線（#84b9cb）を追加
.entry-contentを付けることで本文エリアに限定適用
🎨 使用している色と参考リンク
| 色コード | 色の名前 | 用途 |
|---|---|---|
| #4a708b | スチールブルー | 見出し文字の色 |
| #84b9cb | スカイブルー | h2の下線・アクセント |
詳しい色を確認したい方はこちら 👉 カラーサンプル.com
目次のデザインを統一
見出しに続いて、次は目次（TOC）のデザインを整えましょう。
カラーや番号の統一感を出すことで、記事全体がすっきり見やすくなります。
📑 目次デザインCSS
/* 目次全体（背景・枠線） */
.toc {
background-color: #eef6f8 !important; /* 薄いブルー背景 */
padding: 1em;
border-left: 5px solid #84b9cb; /* 見出しと同じライン色 */
border-radius: 6px;
}
/* 目次タイトル */
.toc-title {
color: #4a708b !important; /* 見出しと統一色 */
font-weight: bold;
margin-bottom: 0.5em;
}
/* 目次リンク（通常） */
.toc-list a {
color: #337a94 !important; /* 少し濃いブルー */
text-decoration: none;
}
/* 目次リンク（ホバー時：マウスを乗せたとき） */
.toc-list a:hover {
color: #ff7f50 !important; /* オレンジで目立たせる */
}
/* 目次リンク（表示中＝現在見ている位置） */
.toc-list .is-active > a,
.toc-list .current > a {
color: #1e3e4e !important; /* さらに濃いブルーで強調 */
font-weight: bold;
background-color: #d4eaf2; /* 薄い水色で目立たせる */
padding: 2px 6px;
border-radius: 4px;
}
/* 目次リストの番号（リストマーカー） */
.toc-list li::marker {
color: #337a94 !important; /* 通常リンクと同じ色で統一 */
font-weight: bold;
}
📝 このCSSのポイント
- 目次全体に薄いブルーの背景と左側ラインを追加
- 文字色はすべて見出しに合わせたカラーコードで統一
- 現在表示中のセクションには背景色を付けて目立たせている
::markerを使って番号の色まで細かく指定
🎨 使用している色と参考リンク
| 色コード | 色の名前 | 用途 |
|---|---|---|
| #eef6f8 | パウダーブルー | 目次全体の背景色 |
| #84b9cb | スカイブルー | 目次の左枠（見出しと共通） |
| #4a708b | スチールブルー | 目次タイトル |
| #337a94 | ディープスカイブルー | 目次リンク、番号色 |
| #ff7f50 | コーラル | ホバー時のアクセントカラー |
| #1e3e4e | ミッドナイトブルー | 表示中リンク色 |
| #d4eaf2 | アイスブルー | 現在表示中の背景色 |
詳しい色を確認したい方はこちら 👉 カラーサンプル.com
リンクの色設定を統一
見出し・目次に続いて、今回はリンクの色設定をカスタマイズしましょう。
通常時・ホバー時・訪問済みの状態で色を分けることで、読者が迷わずリンクを認識できるようになります。
🔗 リンク色カスタマイズCSS
/* 外部リンク：通常時 */
.entry-content a {
color: #337a94 !important; /* ディープスカイブルー */
text-decoration: underline; /* 下線ありでリンクと分かりやすく */
}
/* 外部リンク：ホバー時（マウスを乗せたとき） */
.entry-content a:hover {
color: #ff7f50 !important; /* コーラルカラーでアクセント */
text-decoration: underline;
}
/* 外部リンク：訪問済み */
.entry-content a:visited {
color: #1e3e4e !important; /* ミッドナイトブルーで識別 */
}
📝 このCSSのポイント
- 通常のリンクは落ち着いたブルーで読みやすく
- ホバー時にはコーラル色でアクセントを付けて強調
- 訪問済みリンクには濃い色を設定し、再訪問しないよう目印に
🎨 使用している色と参考リンク
| 色コード | 色の名前 | 用途 |
|---|---|---|
| #337a94 | ディープスカイブルー | 通常のリンク色 |
| #ff7f50 | コーラル | ホバー時の色（マウスを乗せたとき） |
| #1e3e4e | ミッドナイトブルー | 訪問済みリンクの色 |
詳しい色を確認したい方はこちら 👉 カラーサンプル.com
CSSコードの貼り方
・左のメニューから「外観」→「カスタマイズ」をクリック
・「追加CSS」を選び、上記コードをそのまま貼り付け
・「公開」ボタンを押して保存すれば完了！
色はあなた好みにカスタマイズOK！
今回紹介したCSSコードの中に出てくる #84b9cb や #337a94 などの部分は「カラーコード」と呼ばれるものです。
この部分を自分の好きな色コードに変更することで、見出しやリンク、目次の色を自由に変えることができます。
どこを変更すればいいの？
- 見出しの色：
.entry-content h2〜h6のcolorの部分 - リンクの色：
.entry-content aのcolorなど - 目次の色：
.tocや.toc-listなどのcolorやbackground-color
カラーコードの調べ方
好きな色のコードを調べるには、下記のようなサイトを使うと便利です。
たとえば、水色が好きなら「#add8e6」、ピンクなら「#ffc0cb」など、自分の好みで自由に調整できます。
見た目に統一感が出ると、ブログの完成度がぐっと上がりますよ！
おわりに
色や見出しデザインを整えるだけで、ブログの印象はガラッと変わります！
CSSに苦手意識があった私でも、意外と簡単に、調整しながら少しずつ理想に近づけました。
自分の世界観を表現しやすくなるので、ぜひ気に入った色でカスタマイズしてみてくださいね！
コメント