【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】

目次カスタマイズブログ

cocoonはプラグインを入れずに設定だけで目次を表示する機能が付いています。そこはとてもありがたいです。

けど、めっちゃさっぱりしているのでより自分の思いを詰め込んだ目次にしたいと思い、いろいろ探していたところ見つけました。

世の中には親切な人がいるものですね。

公開されているCSSをコピペするだけで簡単にカスタマイズできました。

ということで、完成品がこちら↓

この目次、僕がいいなと思うところは

  • H2とH3見出しの文字の濃さが異なるので見やすい
  • 見出しが改行されたときにきっちりそろう
  • 自分のブログの色に合わせることができる
  • 地味に点線の仕切りが見やすさに貢献している

僕はとても満足しています。ここでカスタマイズする前と後で比較してみましょう

左:カスタマイズ後 右:カスタマイズ前
目次比較

メリハリがついて見やすくなってますよね。

行間もぎゅっとして間延びしなくなりました

さて、では次の項目から早速カスタマイズに入っていきます。

このカスタマイズはとても簡単にできますし、丁寧に画像付きで解説していきますので安心して読み進めてください。

しっかり読んで、あなたのブログの目次も素敵にカスタマイズしていきましょう!

  • 事前にバックアップをしていただくことをおすすめいたします
  • カスタマイズは自己責任でお願いいたします。うまくいかない場合があっても責任はとれませんのでよろしくお願いいたします

cocoon目次カスタマイズ方法

目次カスタマイズしよう

CSSをコピーする

では早速CSSをコピーしていきましょう。

僕はCSSを書けませんのでY&K Studioさんの【Cocoon】コピペで目次をSANGO風にカスタマイズ!の記事へ飛んでください。

Font Awesome4の人用とFont Awesome5の人用に2種類のCSSが用意されています。

補足!Font Awesomeって何?

Font Awesomeふぉんとおーさむは無料で利用可能なWebアイコンフォントのことです。最新バージョンが5で一個前が4です。バージョンによってちょっとCSSの書き方が変わるので2種類準備してくれているんですね。

目次で言うとしたの図の矢印のところにFont Awesomeが使われています。

こういうアイコンを文字として表示できるのがFont Awesome

あなたのcocoonの設定がFont Awesome4なのか5なのか調べるにはcocoon設定全体サイトアイコンフォントを確認ください。

デフォルトはFont Awesome4です

CSSをコピーする(続き)

Y&K Studioの記事にとんだら記事の指示の通りに右上の+ボタンを押してコピーします。

新しい画面が出て選択しやすくなります

CSSをペーストする

コピーしたらWordPressの編集画面を出して、外観テーマエディターを選択

そしたら、

  1. 子テーマ(Cocoon Child)が選択されていることを確認
  2. スタイルシート(style.css)を選択
  3. あいているところ(下のほう)に貼り付け
  4. ファイルを更新ボタンを押す

これで下のような形と色の目次が表示されるようになります。

Y&K Studioより引用

画像のように表示されない場合はcocoon設定の目次の設定がうまくいってないかもしれません

目次表示の深さや目次ナンバーの表示などをいじってみてください。

CSSを自分なりに編集する

ではここからは私がもともとの設定からいじった部分をご紹介していきます。

私のブログの目次デザインです。黄色い部分が元と異なっています

何か所もありますね。けど、下の3つのことを意識してやっただけです。

  • 自分のブログの色に合わせる
  • 余白を微調整
  • 文字の大きさを微調整

自分の好みに合わせました

CSSを編集するときは、一個変更したら更新して効果を確かめながらちょっとずつ変えていくのがおすすめです。一気にやると何が気に入らないのか、何が原因でおかしくなってしまったかがわからなくなります。

目次を表示する効果

これまでは、目次をカスタマイズすることを書いてきましたがここでは目次を表示するとどんな効果があるのか確認していきたいと思います。

  • 目次って表示する意味あるの?
  • デフォルトで表示していればいいんじゃない?

そんなことを疑問に思っているかたもいると思いますので、ぜひデータで確認しましょう。

下の画像は、パソコン表示の時とスマホ表示の時の目次のクリック状況を色で見れるようにしたものです。

パソコン表示
スマホ表示

赤色がたくさんクリックされていて、青色はクリック数としては少ないです。でも、まあクリックされてはいますよね。

画像の記事だといまいちですが、目次の部分が真っ赤になっている記事もありますよ。

だから僕のブログでは目次は表示しておこうという結論に至っています。

あなたのブログでも検証してみよう

僕のブログでは、目次はクリック/タップされていることが証明されていますのでがっつり表示しています。

でも、あなたのブログではクリック/タップされるとは限りません。クリックされるかどうかは記事の内容やブログを訪れる人によって全然変わってくる数値です。

ぜひあなたのブログでも検証して、

  • 目次を表示するか
  • 目次を閉じておくか
  • そもそも目次を表示しないか

判断してみてください。

データをとるのはAurora Heatmapを使うと便利です

まとめ:cocoonの目次をカスタマイズしよう

本記事では【cocoon】目次カスタマイズ‼見やすくシンプルにしよう【CSSコピペでOK】

ということでcocoonにおける目次のカスタマイズ方法と目次を表示する意味について考えてきました。

あなたもあなたらしいブログにするならばカスタマイズをしてみたほうがいいのではないでしょうか?

頑張って作り上げるブログは愛着もわきますし、目次はクリックされる可能性も大いにあります。

お気に入りの目次を作ってみてください

関連記事

当ブログにはcocoonのカスタマイズに関する記事がほかにもありますので、ぜひそちらもご覧になってください。

初心者向け

カスタマイズ

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました