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

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

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

スポンサーリンク

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

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

外観→テーマエディター(テーマを編集)→CSS→Cocoon Childを選んで
選択ボタン+スタイルシート(style.css)が選択されているのを確認して指定の場所に貼り付け
しかし、ファイルを更新してもできませんでした。
今回使用させて頂いているY &K StudioさんはFont Awesome4とFont Awesome5の
2タイプのcssを公開して下さっているのでとても親切です。
【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!
本記事では無料WordPressテーマ「Cocoon」の目次をオシャレにカスタマイズする方法を紹介しています。 有料テーマ「SANGO」っぽく可愛いデザインにしたい方は必見です!
スポンサーリンク

色々試してみましたが…

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

*プラグインを全て無効
*Cocoon設定→高速設定のダッシュボードの高速化→css縮小化の選択解除
(高速設定全て解除も試してみました)
*キャッシュ削除
*mac PCのSafariの履歴削除 など
色々試してみましたが…反応しませんでした。
スポンサーリンク

私はこれで解決!WordPress コクーン /Cocoonのcssで 目次をカスタマイズしても反応しない時の対処法

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

ダッシュボードの外観→カスタマイズ→追加 CSS
先ほどの目次のcssをコピペしたら反映されました/
*Before ↓変更前のシンプルな目次の画像です↓*
*After ↓サイトにマッチした目次に変わりました。
記事の上の方にも表示されてますよね↓*
あれだけ色々やってみてもダメだったから、もっと難しいことをしないと反映されないのかも・・と思っていたのでちょっと拍子抜けでしたが、ようやく解決されて嬉しいです!
今はまだコピーさせて頂いたままの目次なので、余裕が出来れば少し変更するかもしれません。
このままでも十分素敵だとも思いますが。
スポンサーリンク

コクーン設定から目次設定をする

目次設定は自由に設定できます。
一応、私の今選んでる目次の設定を載せておきますね。
コクーン 【目次】の設定できる場所
Word Preesダッシュボード のCocoon設定→目次(タブの上の段、右から5番目)
↓こちらの数字(デフォルト)にするとオレンジのマークが出ます。
↓目次の中央表示はお好みで設定できます。

これで終了です/

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

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

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