WordPress コクーン /Cocoonのcssで【目次をカスタマイズ】しても反応しない時の対処法

私はコクーンのテンプレートを使っています。
コクーンには、記事内に見出し2（H2）を2つ以上作るだけで、
目次が表示されるというとても便利な機能があります。

シンプルなので、オシャレにカスタマイズして使いたいと思いましたが、
なかなか上手く行かず、色々試してみてやっと解決しましたので
忘備録をかねて記録します。当てはまるか分かりませんが、参考になれば嬉しいです。

目次の指定の場所に貼り付けたのに反映されていない

Cocoonの目次はデフォルトだととてもシンプルですので、
もっとページに合ったおしゃれな目次にしたくて、
この度、コピペOKの可愛い目次を見つけたので、さっそく指定の場所に貼り付けてみました。

外観→テーマエディター（テーマを編集）→CSS→Cocoon Childを選んで
選択ボタン＋スタイルシート(style.css)が選択されているのを確認して指定の場所に貼り付け

しかし、ファイルを更新してもできませんでした。

今回使用させて頂いているY &K StudioさんはFont Awesome４とFont Awesome5の
２タイプのcssを公開して下さっているのでとても親切です。

その後、他のコピペOKの方のcssで試してみても無理でしたので、

＊プラグインを全て無効
＊Cocoon設定→高速設定のダッシュボードの高速化→css縮小化の選択解除
（高速設定全て解除も試してみました）
＊キャッシュ削除
＊mac PCのSafariの履歴削除　など

色々試してみましたが…反応しませんでした。

上記の方法でダメでしたので、試しに

ダッシュボードの外観→カスタマイズ→追加 CSS に
先ほどの目次のcssをコピペしたら反映されました／

＊Before　↓変更前のシンプルな目次の画像です↓＊

＊After　↓サイトにマッチした目次に変わりました。

記事の上の方にも表示されてますよね↓＊

あれだけ色々やってみてもダメだったから、もっと難しいことをしないと反映されないのかも・・と思っていたのでちょっと拍子抜けでしたが、ようやく解決されて嬉しいです！

今はまだコピーさせて頂いたままの目次なので、余裕が出来れば少し変更するかもしれません。
このままでも十分素敵だとも思いますが。

目次設定は自由に設定できます。

一応、私の今選んでる目次の設定を載せておきますね。

コクーン【目次】の設定できる場所
Word PreesダッシュボードのCocoon設定→目次（タブの上の段、右から5番目）

↓こちらの数字（デフォルト）にするとオレンジのマークが出ます。

↓目次の中央表示はお好みで設定できます。

これで終了です／

せっかくカスタマイズしてもなかなか反映されないとしんどいですよね。
上手く設定できて皆さんのブログライフがより楽しいものとなりますように⭐︎

ちなみに、引っ越し前に自分で目次を作っていたページは目次が2つになってしまっています。
少ないですし手動で手直ししようと思っています。今後目次を自動設定したいので。

ブログの引っ越しをしたら地味にやることが沢山ありますが、その分知識にもなると思っていますので
息抜きしながらコツコツやりましょう。（自分にも言い聞かせています笑）

2022年9月10日追記：今回、もう一つの私のサイトの目次のマークが文字化けしてしまっているのが気になって調べて直しました。

ダッシュボード＜Cocoon設定＜全体（上左から２番目）＜サイトアイコンフォントにFont Awesome4（５から4に変更）＜変更をまとめて保存

フォントをcocoonと同じ設定にすることで文字化けしなくなったようです。💡