TOC+のCSSカスタマイズで注意することは？
マウスオーバーで下線を出す方法は？
こんな疑問に答えていきます。
別サイトのWordPressブログで２万PVを超える僕が解説していきます。
WordPressでブログを書いている方は、Table of Contents Plusというプラグインを使ってる方が多いと思います。
記事冒頭で目次を自動構築で表示できるアレですね。
目次はカスタマイズしたほうが見やすいと思います。
最近の有料ブログテーマも、目次部分をカスタマイズしていますね。
すでにいろんな方が作成しているのでそれを紹介したいと思います。
自分なりにカスタマイズもしてみました。
素敵な目次のデザイン紹介
素敵だなと思った目次のデザインを紹介します。
able of Contents Plusの設定方法＆CSSデザイン
http://hituji-affiliate.com/2017/03/12/table-of-contents-plus/
ひつじさんのCSSが載っています。
これが今のところシンプルで、一番好きですね。
現在のひつじさんの使用している目次は、ここに載せているCSSよりも、さらに進化しているようです。
マウスオーバーすると下線が入ったり、色も変わってますね。
Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出！
https://naifix.com/table-of-contents-plus-design/
上で書いたひつじさんが参考にしたサイトとして紹介しています。
目次プラグイン「TOC+」の設定方法
https://saruwakakun.com/sango/toc
テーマSANGOの目次デザインについて書かれています。
CSSは載っていないですが、参考になります。
記事の目次【Table of Contents Plus】をオシャレにカスタマイズ！
http://pasonal.com/toc-index-customize/
シンプルでモダンなデザインの目次。
カスタマイズ項目が丁寧に解説されているので助かります。
affinger5のマニュアル
（購入者が読めるマニュアルサイト）
こちらはリンクは貼れませんが、このサイトでも使用しているAFFINGERもTOC+のカスタマイズや目次のカスタマイズは充実しています。
自分でカスタマイズした目次
上で紹介したサイトを参考にして、試行錯誤して作ってみました。
AFFINGERで用意されているデザインに追加でCSSを適用しています。
（１）シンプルな黒ベース
カスタムCSSのフォーム内で数値を変更したり、コードを編集するとエラーになりがちです。
メモ帳などで編集してから、完成品をその都度コピペした方がいいです。
※ブログのスタイルによっては、すでに定義されている目次デザインを上書きすることになるので、多少違ったコードが必要になる可能性があります。
このままだとh2の部分が長い時に、スマホから見た場合ちょっと行間が狭めだなと思います。
そこを直そうと思ったんですが、難しすぎて、あきらめました。
（２）デフォルトを真ん中寄せでよくない？
ぶっちゃけ、デフォルトでもいいかなと思い始めました。
自己満足なデザインをするよりも、多くの人が使っているものが正解だと思うんです。
多くの人の潜在意識に刷り込まれているからです。
Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出！
https://naifix.com/table-of-contents-plus-design/
こちらのサイトに書いてあるコードで、シンプルに真ん中に寄せただけです 。
自分で目次デザインで大事だと思うこと
僕が思う目次デザインで大事だと思うこと、気を付けた部分を書いていきます。
CSSを書く場所
AFFINGERの場合、カスタマイザーの追加CSSの部分に書くので注意が必要です。
上にも書きましたが、ここのフォーム内でCSSを編集するとエラーになりがちです。
文字の色や、アイコンの表示非表示は、カスタマイザーの目次の部分で変更できます。
目次の文字の色
目次の文字の色は、本文と合わせればいいのかなと思います。
今このブログは本文「#3E3E3E」で、見出しが「#444444」ですね。
（変えるかも）
文字色はかなり深い話題なのでこちらの記事で紹介しました。
目次のアイコン
目次のアイコンがついてると、潜在意識的にも反応できるのでいいと思います。
f0ca
https://fontawesome.com/icons/list?style=solid
シンプルでいい
f03a
https://fontawesome.com/icons/list-ul?style=solid
ちょっときつい感じ
f00b
https://fontawesome.com/icons/th-list?style=solid
ちょっと、主張が強いかな
デフォルトは「f0f6」です。
アイコンの色設定にもよりますが、シンプルになしでもいいかなと思いました。
マウスオーバーで色が変わる
マウスオーバーしたら、色が変わる、もしくは下線がつくほうがいいと思います。
目次をクリックしたら記事の該当位置まで飛ぶって知ってる人がどれくらいいるかですよね。
読者層にもよりますけど、気づかない人のためにも、マウスオーバーはあったほうがよさそうです。
文字色を青系にしてリンクにするのもいいですね。
（デフォルトはそうなってますね）
文字の大きさ
目次の文字の大きさをあんまり大きくしたくないんですよね。
目次はあまり目立って欲しくない。
でも、非表示にするのは嫌なんです。
（非表示にするくらいなら、目次作らなくていいのでは…
クリックして目次を開く人なんて１％もいなそう）
目次は、さらっと潜在的に見てもらえばいいと思うんですよね。
迷ったんですが、一律95%にしました。
90％でもいい感じですね。
これ以上、小さくすると、スマホで見にくい気がします。
インデントで階層を表現
インデント大事だと思います。
インデント2emに設定しました。
h３タグはインデント（文字の開始位置を奥の方にする）によって、下層を表現できますね。
僕のブログはh３やh２タグに（１）（２）などの数字が入っているのと、入っていないのが混在してしまっています。
インデントで整理すれば、数字があってもなくても、階層が見やすくなります。
今後は（１）（２）などの数字をなくそうと思っています。
「目次」「表示」などの説明単語
これは読者層によりますよね。
Contentsって英語で書くとおしゃれですけど、読者層が英語嫌いな層なら「目次」のほうが良さそうです。
先頭記号
見出しの先頭に「＞」や「・」やみたいな記号をつけたいです。
付いていた方が、スマホで見たときわかりやすいと思います。
カスタマイザーからだとH2部分には記号がつけられないよな感じです。
TOC+でいう「番号振り」の部分に記号を割り当てたいんですよね…
こんな感じで追加CSSを書きました。
#toc_container ul li:before{
content: "\f105";
font-family: FontAwesome;
color: #aaaaaa;
padding-right: 6px;
}
#toc_container ul ul li:before{
color: #f3f3f3;
}
こちらを参考にさせていただきました。
かっこいい目次デザインへ！Table of Contents Plusの設定とカスタマイズ方法
http://www.how-to-make-affiliate-blog.com/customize-table-of-contents-plus/
というわけで今回は以上です。
他サイト様の目次のデザインを紹介しました。
それを見て、自分が大事だと思うことをまとめ、自分でも少しカスタマイズしてみました。
デザインは正解がないので、迷います。
自分のセンスとか自己満足とかは関係なくて、みんなが見慣れているもの、求めているものが正解のような気がするんですよね。
ユーザーが第一ですからね。
自己満にならないように注意しないといけないと思いました。