cocoonはプラグインを入れずに設定だけで目次を表示する機能が付いています。そこはとてもありがたいです。
けど、めっちゃさっぱりしているのでより自分の思いを詰め込んだ目次にしたいと思い、いろいろ探していたところ見つけました。
世の中には親切な人がいるものですね。
公開されているCSSをコピペするだけで簡単にカスタマイズできました。
ということで、完成品がこちら↓
この目次、僕がいいなと思うところは
- H2とH3見出しの文字の濃さが異なるので見やすい
- 見出しが改行されたときにきっちりそろう
- 自分のブログの色に合わせることができる
- 地味に点線の仕切りが見やすさに貢献している
僕はとても満足しています。ここでカスタマイズする前と後で比較してみましょう
メリハリがついて見やすくなってますよね。
行間もぎゅっとして間延びしなくなりました
さて、では次の項目から早速カスタマイズに入っていきます。
このカスタマイズはとても簡単にできますし、丁寧に画像付きで解説していきますので安心して読み進めてください。
しっかり読んで、あなたのブログの目次も素敵にカスタマイズしていきましょう！
cocoon目次カスタマイズ方法
CSSをコピーする
では早速CSSをコピーしていきましょう。
僕はCSSを書けませんのでY＆K Studioさんの【Cocoon】コピペで目次をSANGO風にカスタマイズ！の記事へ飛んでください。
Font Awesome4の人用とFont Awesome5の人用に２種類のCSSが用意されています。
補足！Font Awesomeって何？
Font Awesomeは無料で利用可能なWebアイコンフォントのことです。最新バージョンが５で一個前が４です。バージョンによってちょっとCSSの書き方が変わるので２種類準備してくれているんですね。
目次で言うとしたの図の矢印のところにFont Awesomeが使われています。
あなたのcocoonの設定がFont Awesome４なのか５なのか調べるにはcocoon設定→全体→サイトアイコンフォントを確認ください。
デフォルトはFont Awesome4です
CSSをコピーする（続き）
Y＆K Studioの記事にとんだら記事の指示の通りに右上の+ボタンを押してコピーします。
CSSをペーストする
コピーしたらWordPressの編集画面を出して、外観→テーマエディターを選択
そしたら、
- 子テーマ（Cocoon Child)が選択されていることを確認
- スタイルシート（style.css)を選択
- あいているところ（下のほう）に貼り付け
- ファイルを更新ボタンを押す
これで下のような形と色の目次が表示されるようになります。
画像のように表示されない場合はcocoon設定の目次の設定がうまくいってないかもしれません
目次表示の深さや目次ナンバーの表示などをいじってみてください。
CSSを自分なりに編集する
ではここからは私がもともとの設定からいじった部分をご紹介していきます。
何か所もありますね。けど、下の3つのことを意識してやっただけです。
- 自分のブログの色に合わせる
- 余白を微調整
- 文字の大きさを微調整
自分の好みに合わせました
目次を表示する効果
これまでは、目次をカスタマイズすることを書いてきましたがここでは目次を表示するとどんな効果があるのか確認していきたいと思います。
- 目次って表示する意味あるの？
- デフォルトで表示していればいいんじゃない？
そんなことを疑問に思っているかたもいると思いますので、ぜひデータで確認しましょう。
下の画像は、パソコン表示の時とスマホ表示の時の目次のクリック状況を色で見れるようにしたものです。
赤色がたくさんクリックされていて、青色はクリック数としては少ないです。でも、まあクリックされてはいますよね。
画像の記事だといまいちですが、目次の部分が真っ赤になっている記事もありますよ。
だから僕のブログでは目次は表示しておこうという結論に至っています。
あなたのブログでも検証してみよう
僕のブログでは、目次はクリック/タップされていることが証明されていますのでがっつり表示しています。
でも、あなたのブログではクリック/タップされるとは限りません。クリックされるかどうかは記事の内容やブログを訪れる人によって全然変わってくる数値です。
ぜひあなたのブログでも検証して、
- 目次を表示するか
- 目次を閉じておくか
- そもそも目次を表示しないか
判断してみてください。
データをとるのはAurora Heatmapを使うと便利です
まとめ：cocoonの目次をカスタマイズしよう
本記事では【cocoon】目次カスタマイズ‼見やすくシンプルにしよう【CSSコピペでOK】
ということでcocoonにおける目次のカスタマイズ方法と目次を表示する意味について考えてきました。
あなたもあなたらしいブログにするならばカスタマイズをしてみたほうがいいのではないでしょうか？
頑張って作り上げるブログは愛着もわきますし、目次はクリックされる可能性も大いにあります。
お気に入りの目次を作ってみてください
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント
大変参考になります。
ありがとうございます。
テレワーカーYさん
お役に立てたようでなによりです！
私のブログも緑が基調なので、このまま使わせていただきます。
やってみて気づいたのですが、Y＆K StudioさんのCSSをいじる（目次のタイトルを左寄せから中央に変える）ところの説明で、marginとpadding-leftの行の削除が抜けていますね。
お陰様でいい感じの目次になりました。ありがとうございました。
たむら船堀さん
本記事を参考にしていただきありがとうございました。
ご指摘もありがとうございます。