プラグイン

Table of Contents Plusの目次をカスタマイズ!

将軍
将軍
皆さんこんにちは!将軍です!

『Table of Contents Plus』はブログに目次を自動生成してくれるプラグインです。機能は申し分ないですが、何か物足りないと感じるところもあります。

しかし、プラグインの設定にはカスタマイズをする設定がありません。なので今回は、『スタイルシート (style.css)』を使って色を変えたり、目次を中央に寄せたりとカスタマイズをして行きたいと思います。目次は、とても重要な部分なので読んでくださる方に良い印象を与えるような目次にしてみましょう!



◆まだ『Table of Contents Plus』を有効化していない方はこちら◆

WordPressに目次を表示させる方法は?プラグインでサクッと解決! 『Table of Contents Plus』というプラグインは、記事内のh1~h6の見出し用のHTMLタグに合わせて自動で目...

カスタマイズをする前に

Table of Contents Plusのカスタマイズ作業は、子テーマ(Child)のスタイルシート(style.css)で行います。CSSコードの編集作業の前には、必ずバックアップを取っておきましょう。



オリジナルのものにするには『Table of Contents Plus』にCSSコードが少し邪魔をしているので、上書きされないように設定をします。WordPressの管理画面>設定>TOC+に向かい設定をします。



『基本設定』の上級者向けの欄を開いて『CSSファイルを除外』にチェックを入れます。これでカスタマイズの準備ができました!

目次を中央に配置

『Table of Contents Plus』はデフォルトだと目次が左寄せになっていますが、中央に配置したい方はこちらのコードを貼り付けましょう!

目次のデザイン

個人的にオススメのCSSコードを集めてみました。CSSコードは難しく感じるかもしれませんが、下のコードをスタイルシート (style.css)に貼り付けるだけで反映されるので大丈夫です。貼り付けてもCSSコードが反映されない場合は、キャッシュを削除をしてからもう一度、更新をしてみてください。

このコードは実際に、このブログで使っているものとだいたい同じものです。コードの中の、数字や色を調節して自身のブログにあったものを見つけてみてください。(追記 今の目次とはデザインが異なっています。

◆色のコードがわかりやすいサイト◆

『原色大辞典』はこちら

まとめ

『Table of Contents Plus』は目次を設置するのに便利なプラグインです。さらにそこに、CSSコードを編集することによって、目次の見やすさに磨きがかかります。コード内の数字や色を変えて自分なりの目次を作ってみましょう!