ブログ歴15年、Wordpress歴8年のLeoです！
先日Cocoonのカスタマイズが一旦”完成”したことを書きましたが、もう一箇所改造しましたのでシェアします。
今回は、個人的に重要だと”再考”した「目次」についてのカスタマイズです！
MoKuJi
[affi id=2]
Cocoonにはデフォルトで目次機能がある
まず、前提の話ですが、目次機能はWordPressのデフォルト機能ではありません。
テーマによっては装備されておらず、その場合はプラグイン対応するのが基本です。
有料テーマでも目次機能が備わらないものも少なくなく、人によっては、また、記事によっては目次が不要という考え方もあります。
ただ、雑誌だったり小説だったり、多くの読み物で目次は設置されていることを考えると、ユーザビリティーの面で目次はある方がいいのかなと思われます。
そこで多くの人は、「Table of Contents plus」（以下、TOC+）という無料プラグインを使うと思います。このプラグインは有名＆大人気で、有料テーマでも導入推奨となっているものが少なくありません。
ボクもこのTOC+を愛用していて導入時のことはこのブログでも紹介していますので気になる方は読んでみて下さい。
Cocoonには目次機能がついている
TOC+は実に有能なプラグインで、多くのブロガーが愛用し、「入れるべきプラグイン」に名を連ねるものですが、実はCocoonにはデフォルトで目次機能が備わっています。
Cocoonの設定項目はたくさんあるので初心者には機能を見つけるだけでも大変ですよね（笑）。
とりあえず、この「目次」項目を設定すれば記事に目次が表示させられます。
詳しくは↑公式の説明をご覧いただければと思いますが、プラグインを使わずとも目次が表示されることはありがたい一方、デフォルトのデザインはかなり質素なんです。
目次プラグインTOC+の魅力と、廃止
ボクがTOC+を導入した時はSimplicityというCocoonの先祖的テーマを使っていた時代なのでデフォルトで目次機能がなかったという理由からプラグイン対応していました。
2大目次プラグイン
目次が必要かどうかについては今回議論から外しますが、とりあえず目次機能が欲しいと思ったら候補に挙げるプラグインは基本的に2つだけです。
- TOC+
- Easy Table of Contents
前者は紹介済みですが、後者も人気＆知名度高いプラグインなので気になる方はググれば情報いっぱい出てくると思います。
とりあえずボクはTOCを使って目次をオサレに実装していました。
TOC+での目次
TOC+で生成していた目次はこんな感じの見た目でやっていました。
閉じた時の上下幅の狭さや、階層をh2タグまでにするなど、それなりにこだわってカスタマイズした結果です。
TOC+の魅力
一番の魅了はもちろん、目次機能が備わっていないテーマでも簡単に目次をつけられることです。
そして、使っている人が多いことから、ネット上に設置方法からカスタマイズ方法まで実に多数の情報が溢れていることも魅了ですね。ボクも実装当時はネット上で調べてサクッと装備させることができました。
そんなに知識がなくても設定画面で色だったり階層数だったり簡単に設定できます。
また、というショートコードを入れたページでは非表示にできるというのも簡単でこのページには目次はいらないな、と思うページから除外するのも容易で、とても気に入っていました。
TOC+をやめた理由
では、そんな有能なTOC+をなぜやめたのでしょうか？
- 目次の重要性を再考した
- プラグインを減らしたかった
- オサレカスタマイズ指南を見つけた
以上の3つの理由から今回長らく愛用してきた鉄板目次プラグインを廃止しました。
目次の重要性を再考した件はまた改めて別記事にしようかと思っていますが、「プラグインを減らしたい」というのはWordpressをやって長い人はみんな思っているんじゃないかと思います。
WPのいいところはプラグインで拡張させられることである一方、入れすぎるといろんな懸念が増えますので、できれば10〜15以内に抑えたいところです。
最後にあげた点は次で説明します。
超簡単にできた！SANGO風にカスタマイズ
Cocoonを入れた時、設定項目に「目次」があったので一度TOC+を入れずに作り上げていっていたのですが、
先ほど書いた通り、デフォルトの見た目がシンプルすぎて、せっかく作ったTOC+のお気に入りデザインと比べてしまうと見劣りが激しかったためTOC+を使う道を選んでいました。
しかし、プラグインを減らしたいという思いと、Cocoonには元から目次機能があるという現実から、Cocoonの目次をTOC+の見た目に近づけられないか？とネットで情報を探したら、完璧なソリューションが見つかったわけです。
「SANGO」とは、有名な有料テーマのひとつですが、あわーい色感とフラットなデザインで時代に沿ったとてもオサレな仕上がりになっていて多くのブロガーに使われています。
ボクは個人的には所有していませんが、購入検討したことはあるし、デザイン感は参考にさせてもらっているし、それ以前に、製作者のサルワカさんのブログはめっちゃお世話になっているのでそんな
SANGO風の目次にできるカスタマイズとかめっちゃええやん！
って話でした。
やり方は上記リンク先の当該記事を参照してもらえたらと思いますが、出来上がりをデフォルトと並べて比べると以下の感じです。
見出しのアイコンがついたり、色合いのメリハリなどでかなり見やすくなっているのではないかと思います！
*参考ページのCSSから独自にカスタムを加えています。
先ほどあげた3つ理由のひとつ、「目次の重要性を再考」した結果、階層もh3までの2階層にすることにしたのも影響あるかも知れませんが、個人的にはページに訪れた方が、
を判断しやすくなっていると思います。
目次例
他のページのサンプルも合わせて実際の記事に出てくる目次を紹介しますね。
こちらはh2タグしか存在しない記事の目次です。
5本のレンズレビューなのですが、お目当のレンズにすぐ飛んでいけそうでよくないですか？
先ほどのビフォーアフターではちょっとちっさくなってしまったのでもう一度これも載せました。2つ目のh2だけ下階層に色々書いているので「気になるポイント」が深掘りされた記事だとわかります。
最後ちょっと長いですが、レビュー記事などで比較したり、色々試したことをまとめた記事だと中身はこれくらいになります。
そういう時やっぱり目次がこれくらい綺麗だとお目当の項目が見つかりやすいんじゃないかと思います。
ちなみに、、、
↑ここに出てると思いますが、この記事の目次はこうなっていますよ〜。
これはショートコードで好きな場所に目次を挿入できる機能いにょりここに出力できています✨
マジ有能。
まとめ・総括
- 目次機能は重要だと思う
- TOC+という素晴らしいプラグインで対応してきた
- が、美しくカスタマイズできたのでCocoonの目次に移行した
いかがだったでしょうか？
プラグインの数を「増やした方がおいい」という人は多分いないと思います。
減らせるものなら減らすべきです。
そういう観点からも、長らく愛用してきたTOC+といえどもおふにすることができて喜ばしく思っています。
Cocoonは無料なのに、「Simple Author Box」もやめれたし、デザイン性などにこだわりがなければ「VA Social Buzz」に近い機能も装備されているから外せます。よく見かける吹き出しで会話するやつ↓
これな
も標準搭載していて本当に多機能で驚きます。わいひらさんは天使👼ですね。
*LEOLOGではこだわりがあってプラグインで吹き出しやってます。
ボクはSANGOはないですが、いくつかの有料テーマを別ブログ（サイト）で使っているのに個人のブログ垢であるLEOLOGではCocoonを使っているので、その辺を見ていただければいかにCocoonがすごいかがわかるかも知れません。
まあ、テーマってのは用途や目的に合わせて、どれかひとつがオールマイティー100点満点ということはあり得ないので当然ですが、
目次の見た目もデフォルトでは満足いかなかったのがこうしてネット上で発見した指南情報を見て、カスタマイズ含めて1時間くらいで実装できたのは神ってます。
少しこのカスタマイズで様子を見て、今度「目次の重要性を再考」した結果についての記事も書いてみようと思います！興味ある方は乞うご期待！
