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

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

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

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

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

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

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

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

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

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

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

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

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

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設定の目次の設定がうまくいってないかもしれません

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

CSSを自分なりに編集する

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

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

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

目次を表示する効果

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

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

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

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

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

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

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

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

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

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

判断してみてください。

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

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

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

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】

2021.05.22

【Cocoon】スライドショーを設定する方法まとめ

2021.05.16

【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法

2021.05.09

【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】

2021.05.062021.05.29

【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】

2021.05.042021.05.08

Cocoonスキン一覧まとめ！カスタマイズなしでもおしゃれに決まる

2021.04.162021.05.26

【Cocoonスキン】おすすめ４選！とにかくブログをいい感じにしたい

2021.04.112021.05.11

【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】

2021.04.04

【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

2021.03.212021.05.22

【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法

2021.02.282021.04.04

Cocoonブロック一覧！全機能まとめ【初心者向け】

2021.01.212021.05.22

【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する

2020.09.242021.04.04

【Cocoon】目次が表示されない⁉作り方完全解説

2020.05.302021.04.04

【Cocoon】投稿画面ツールバー機能一覧｜文字色・ルビほか【初心者向け】

2020.05.222021.04.04

【Cocoon】サイドバーの基本的な使い方【初心者向け】

2020.05.172021.05.26

【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

2020.05.082021.05.12

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方！便利さをマジで知ってもらいたい

2021.04.29

【Cocoon】Twitter(ツイッター)埋め込みは秒でできる

2020.08.212021.04.04

【Cocoon】テーブル/表を作成する方法を丁寧に解説（ブロックエディタ）

2020.08.112021.05.09

【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう

2020.07.202021.04.07

【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】

2020.06.112021.05.08

【Cocoon】カスタマイズまとめ！初心者でもわかりやすく解説

2020.06.032021.04.04

【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】

2020.05.252021.05.26

【Cocoon】ブログカードの基本的な使い方【初心者向け】

2020.05.022021.05.12

【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

2020.04.252021.04.04

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ！カテゴリーのボックスメニューは意外と難しくない

2020.04.192021.04.04

【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする！

2020.04.122021.06.03

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

2020.02.092021.04.04

【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

2019.12.152021.05.26