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

目次カスタマイズ Cocoon

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

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

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

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

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

目次カスタマイズ完成
WordPressでのカッテネの使い方を誰でもできるように画像50枚以上使って超詳しく説明します より

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

  • 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
Font Awesome

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

デフォルトはFont Awesome4です

CSSをコピーする(続き)

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

新しい画面が出て選択しやすくなります
CSSをコピー

CSSをペーストする

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

外観→テーマエディター

そしたら、

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

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

できた目次
Y&K Studioより引用

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

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

CSSを自分なりに編集する

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

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

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

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

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

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

目次を表示する効果

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

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

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

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

パソコン表示
目次のクリック状況
スマホ表示
目次のクリック状況(スマホ)

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

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

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

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

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

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

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

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

判断してみてください。

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

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

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

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

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

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

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

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

Cocoonの使い方

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

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

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

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

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント

  1. 大変参考になります。
    ありがとうございます。

    • テレワーカーYさん
      お役に立てたようでなによりです!

  2. 私のブログも緑が基調なので、このまま使わせていただきます。
    やってみて気づいたのですが、Y&K StudioさんのCSSをいじる(目次のタイトルを左寄せから中央に変える)ところの説明で、marginとpadding-leftの行の削除が抜けていますね。
    お陰様でいい感じの目次になりました。ありがとうございました。

    • たむら船堀さん
      本記事を参考にしていただきありがとうございました。
      ご指摘もありがとうございます。