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

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

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

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

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

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

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

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

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

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

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設定→全体→サイトアイコンフォントを確認ください。

CSSをコピーする（続き）

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

CSSをペーストする

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

そしたら、

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

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

CSSを自分なりに編集する

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

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

目次を表示する効果

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

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

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

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

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

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

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

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

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

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

判断してみてください。

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

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

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

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

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

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ