こんな方におすすめ
- Cocoonで目次をカスタマイズしたい
- CSSをコピペしてデザインを作りたい
今回は『【コピペOK】CSSで目次のデザインをカスタマイズする【Cocoon】』について初心者にもわかりやすく解説します。
ちなみに僕の目次はこんな感じですね。👇
目次のデザインはパクってもOKです。（※現在はCocoonからAFFINGER6に移行したので、デザインが変わっています。）
それと、「サイドバーに目次を固定したい」といった方は、以下の記事を読んでください。
-
【Cocoon】目次をサイドバーに固定する方法【サイドバースクロール追従】
続きを見る
目次をサイドバーに固定すれば、記事が読みやすくなるのでオススメですよ。
CSSで目次のデザインをカスタマイズする
今回紹介するのは以下の2つです。
- Cocoonの目次を設定する方法
- CSSをコピペしてカスタマイズする方法（文字や背景、アイコンなど）
それでは順番に解説しましょう。
Cocoonで目次をカスタマイズする方法
Cocoonテーマを利用している方向けに、目次のカスタマイズ方法を解説します。
まずは、［Cocoon設定➡︎目次］を選択してください。
すると、以下のような設定ができます。
■目次の表示（オンにしましょう）
■表示ページ
・表示するページを選択
■目次タイトル
■目次切り替え
・『閉じる&開く』の設定
■表示条件
・○個の見出しがある時
■目次表示の深さ
・例:h3見出しまで表示
■目次ナンバー表示
・数字や「・」の選択
■目次の中央表示
■目次の表示順
・どこに設置するか
■見出しないタグ
全部でこの10の設定ができますね。
最低限のカスタマイズはできそうですが、文字や色などのデザインは作れません。
とりあえず、事前準備は完了ですね。
CSSをコピペしてデザインをカスタマイズ
続いて、以下の5つをカスタマイズする方法について解説します。
カスタマイズするデザイン
- 目次の背景色&枠
- 目次タイトル
- 見出しの文字&行間
- ホバー時のデザイン
- アイコンのデザイン
それでは順番に解説します。（最後にコピペする全てのコードをまとめます）
CSSのコピペ場所
まず、CSSコードを追加する場所を表示しましょう。
管理画面から［外観➡︎テーマエディター］を選択。
［編集するテーマを選択］のところがCocoon Child（子テーマ）であることを確認してください。
もしなってない場合はCocoon Childに設定しましょう。
style.cssを選択したら、紹介するコードを好きなとこに追加してください。
※よくわからない方は一番下にコードを追加しましょう。
目次の背景色&枠
それでは、コピペ用のCSSコードを紹介します。
目次の背景色と枠のカスタマイズがしたい場合は、以下のコードをコピペしましょう。
.toc {
border: 1px solid #ccc;/*枠の大きさ、スタイル、色*/
background-color: #fff;/*背景色*/
}
それぞれ、自分の好きなように設定してください。
必要ないと思った部分は削除してOKです。
目次タイトル
続いて目次のタイトルです。
.toc-title {/*目次のタイトル*/
font-size: 1.1em;/*文字の大きさ*/
text-align: center;
display: block;
color: #000;/*文字色*/
font-weight: bold;/*文字の太さ*/
}
このままコピペすると、少し大きくて太い文字が黒色で表示されます。
青色のアンダーマーカーのところを変更してカスタマイズしましょう。
見出しの文字&行間
続いて、行間と文字（h2、h3見出しなど）をカスタマイズするCSSです。
.toc li {/*見出し*/
line-height: 1.5;/*行間*/
}
.toc-list > li a {/*h2見出し*/
color: dimgray;/*文字の色*/
font-size: 1em;/*文字の大きさ*/
}
.toc-list > li li a {/*h3見出し*/
color: #888888;/*文字の色*/
font-size: 0.9em;/*文字の大きさ*/
}
こちらのコードは、見出しごとに色や文字の大きさをカスタマイズできます。
こちらも青のアンダーマーカーのところを自分なりに設定しましょう。
ホバー時のデザイン
ホバー時のデザインとはマウスカーソルを重ねた時のデザインのことです。
CSSコードは以下のとおり。
.toc a:hover {
color: #999;/*ホバー時の文字の色*/
background-color: #ddd;/*ホバー時の背景色*/
font-weight: bold;/*文字の太さ*/
}
背景色や文字色、文字の太さを変えることでホバー時の選択がかわかりやすくなりますね。
全て使うと、わずらわしいので不要な部分は削除しましょう。
アイコンのデザイン
最後はアイコンのデザインです。
アイコンだけでもかなり印象が変わるので、結構大事なところですね。
CSSコードは以下のとおりです。
.toc-list > li a::before { /*h2タグのアイコン*/
content: "■"; /*アイコン*/
color: #222; /*アイコンの色*/
}
.toc-list > li li a::before { /*h3見出しのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f105"; /*アイコン*/
color: #191970; /*アイコンの色*/
font-size: 20px; /*アイコンの大きさ*/
padding-right: 0.5em; /*アイコンの位置*/
}
.toc-list > li li li a::before { /h4見出しのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f0da";
color: #999999;
font-size: 18px;
padding-right: 0.4em;
}
何だかややこしくなってしまいましたね…。
アイコンは、Font Awesome5のものを利用しています。
アイコンを変えたい時はFont Awesomeのサイトでフォントを選び、以下の文字を[content: ''\〇〇'';]の部分を入力しましょう。
アイコンが表示されなかったら
※注意 Font Awesome5のフォントを使うときはheader.phpに以下のコードを追加してください。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
Cocoonは元から設定されているので通常は不必要です。
ただ、何らかの原因で設定が削除されている可能性もあるので注意しましょう。
それでも表示されなければ、バージョンが違う可能性があります。
バージョン変更をするために［Cocoon設定➡︎全体➡︎サイトアイコンフォト］を表示してください。
バージョンは、どちらを使っても構いません。
表示されなければバージョンを表示するといいでしょう。
全コードまとめ
それでは、今回紹介したCSSコードを全てまとめます。
-
【Cocoon】サイドバーの目次に現在位置を表示する【コピペOK】
続きを見る
-
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの？【移行すべき理由】
続きを見る
「カスタマイズが難しい…」という方へ
Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。
僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。
そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。
AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。
-
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの？【移行すべき理由】
続きを見る
「収益化するにはCocoonでいいの？」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。
-
【事実】Cocoonで収益化できない本当の理由【解決策あり】
続きを見る
