【Cocoon】初心者でも使いやすい「目次」のカスタマイズ（見出し別設定＆ホバー時の挙動）

更新履歴
20.01.08
初期の内容は不必要と判断したため一部内容を削除

ブログ運営初心者のころ、カスタマイズに困った目次。

本記事では、その目次についてカスタマイズなどをまとめております。

目次ってそもそも何だっけ（思考）
表示準備（Cocoon設定）
カスタマイズ（CSS）
完成！
ホバー・タップ時に変化をつけたい
- 文字色を変える
- 文字に動きをつける
CSSコードまとめ

目次ってそもそも何だっけ（思考）

長い記事では特に大事な役割をしてくれる目次。

でもただ表示しているだけだと、かえって読みにくくなることも。

いい記事を書こうとすると、つい目次のボリュームも増えてしまうんですよね。

で、ふと思う。

　目次ってなんだ？　

目次は、その内容を検索する際において利便性を与えるために付与される箇条書き形式のページもしくはその集まりである。
情報処理分野の情報検索においてはインデックスという考えもあるが（中略）ネット上の文書においては各節・章へのリンクを列記している場合が多い。
https://ja.wikipedia.org/wiki/%E7%9B%AE%E6%AC%A1

箇条書きだって。

そうだ、目次ってもっとシンプルでいいはずなんだ。

読んでもらうために使う機能なのに、目次に情報を詰め込んだばっかりに離脱されたら意味がない、と。私の親切心が見づらさに繋がってしまったようでした。

ということで、カスタマイズの前にまず「ひたすら説明していた目次」を洗練しました。

新聞の見出しを作る感覚で、文字数を削ったり、表現を他の言葉に変えたりして洗練することも有効ですね。

目次の文字数ビフォーアフター。

修正前

修正後

「目次とは何か」を考えながら、削る。

この位なら見られますかね。

さて、目次の準備ができたところでカスタマイズに取り組みます。

デフォルト目次は、こんな感じ。

今回のカスタマイズイメージです。

「視覚にやさしい」
「見出し２は太字」
「見出し３は小さめ文字」

でまとめられたらいいかなと。

私が確認できたコードを置いていますので、作業環境によって反映できるコードが異なるかも。
編集しやすくするため日本語で要素をあわせて書いてますが、無くても大丈夫。お好みで。

表示準備（Cocoon設定）

コードを書く前に、テーマ側で設定する目次の状態を確認します。

Cocoon設定 ⇒ 目次タブ

参考までに私の設定画面です。目次カスタマイズに関係のない項目は省略。

目次タイトル：もくじ
目次切り替え：open / close
目次表示の深さ：H4見出しまで
目次ナンバーの表示：表示しない

カスタマイズ（CSS）

では、カスタマイズしていきます。

目次の背景

目次の背景（全体のデザイン）を設定。

背景色とか目次枠のデザインはココ。

/*目次*/
.toc{/*目次全体のデザイン*/
　　background:#F9F9F9;
　　border:none;
　　display: block;
　　border-top:5px solid;
　　border-top-color:#475950;
　　box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.toc a{
　　text-decoration:none;
}

目次タイトル

「目次」というタイトルの文字を変更できます。

「もくじ」など表記をひらがななどにしたい場合は、カスタマイズではなくCocoon設定から変更します。

.toc-title { /*目次タイトルの設定*/
　　color: #555555;
　　text-align: center;
　　font-size: 1.4em;
　　font-weight: bold;
　　padding: 6px 16px;
}

目次タイトルにアイコン装飾

「目次」というタイトルの隣にアイコンを表示する。

ひよさん

アイコン不要なら飛ばしてください

アイコンは以下サイトを使います。

各見出し部分

目次内の各見出しの設定です。

.toc ul a{/*目次の項目文字設定*/
　　color:#555555;
　　font-size: 15px;
　　line-height: 2.0;
　　padding: 15px;
}

これで太字にできるんだけど、見出し３が上手く反映されず。

対策として以下の方法で表示しました。

見出し３をデフォルトにするというイメージです。

見出し２（H2）だけの表示コードを書く
/*目次の項目文字設定*/ でデフォルトの表示を設定

.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {/*h2見出し用表示設定*/
　　font-weight: bold;
　　font-size: 16px;
}

ひよさん

スマホでタップしにくいから、小さくしすぎに注意ね

完成！

見出し２と３の項目が区別できて、見やすくなりました。

パソコンとモバイルでの表示が若干違うのですが、調整方法がいまいちつかめません。また今度。

ここからはオマケです。

需要のないちょっとした遊び。

ホバー・タップ時に変化をつけたい

目次にカーソルを置く・タップした時に選択部分がわかりやすいと良いかなと思い、ホバー時のカスタマイズも追加。

実際はスマホからタップても挙動なんかわからんけど、まぁ見えた方がいいかな程度ですね。

文字色を変える

/*目次hover時*/
.toc ul a:hover{
	color:#f09199;/*文字色*/
}

文字に動きをつける

/*目次hover時*/
.toc ul a:hover{
	margin-left: 6px;/*動く幅*/
}

これで目次内の項目をホバー・タップするとヌンって動いたり、色が変わったりします。

初心者でも簡単にできるのでオススメ。(　ﾟωﾟ)))

動く幅を変えたければ『margin-left』の値を調整。もっと大きく動かすこともできます。限界を超えろ。

パソコンで操作した時の画面の様子です。
※再生できない場合は閲覧ブラウザを変えてみて。でもそこまでして見なくていいです。

もっと適切なコードがあるかもわかりませんが、異常なく表示されたらオッケー！ということで。

参考になれば幸いです。

CSSコードまとめ

/*目次*/
.toc{/*目次全体のデザイン*/
　　background:#F9F9F9;
　　border: none;
　　display: block;
　　border-top: 5px solid;
　　border-top-color:#475950;
　　box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.toc a{
　　text-decoration: none;
}

.toc-title { /*目次タイトルの設定*/
　　color:#555555;
　　text-align: center;
　　font-size: 1.4em;
　　font-weight: bold;
　　padding: 6px 16px;
}

.toc-title::before {/*目次タイトルにアイコン*/
　　font-family: FontAwesome;
　　content: '\f0ca';
　　margin-right: 0.5em;
　　color:#475950;
　　font-size: 1.4em;
}

.toc ul a{/*目次の項目文字設定*/
　　color:#555555;
　　font-size: 15px;
　　line-height: 2.0;
　　padding: 15px;
}

.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {/*h2見出し用表示設定*/
　　font-weight: bold;
　　font-size: 16px;
}

/*目次hover時*/
.toc ul a:hover{
　　color:#f09199;/*文字色*/
　　margin-left: 6px;/*動く幅*/
}