2018.07.10どうも、おしゃキミです。今回はワードプレステーマ「Cocoon」の目次デザインをシンプルさを保ちつつ少しおしゃれにカスタマイズしてみました。具体的にやっていることはこんな感じ。目次の位置を中央寄せにする下線を引く行間など微調整コピペ用のCSSコードもあるので、参考になれば!と思います。最後に目次カスタマイズ後のサンプルCocoonでは、ありがたいことにプラグインなしで自動で目次を作ってくれる機能があります。デフォルトの目次はかなりシンプルなデザインだったのでCSSカスタマイズしてみました。位置を中央寄せにして下線を引き、行間等をちょこちょこいじって私好みのシンプルさにしてみました。下記のコードをコピーしてCocoonの子テーマのstyle.css(amp.css)に貼り付ければカスタマイズ完了です。色など好みの設定に調整してください。目次をカスタマイズする際にいじりたくなる部分のクラス名をざっと書き出しておきます。.toc-title{/*「目次」タイトル文字部分*/}最後に今回の目次のCSSカスタマイズは、主に下記のサイト記事を参考にさせていただきました。ありがとうございます。ぱぱたす(PaPa+)もっとシンプルなコードにまとめられるよ〜みたいな改善案があれば、コメントやDMなどもらえると嬉しいです。無料WPテーマ「Cocoon」の設定で少しわかりづらいけれどした方がいい、おすすめの設定や素敵なカスタマイズをまとめて紹介します。Cocoonの設定画面でできることはたくさんあるので探すのが大変って人、その気持ちわかります!私自身が便利な見逃しがちな人間なので、見つけた便利設定やカスタマイズをここに備忘録として残しておきます。