ここ数日、やろうとしたページカスタマイズはことごとく失敗していました。サイトマップページというのを作ろうと思い指定通りにしたものの、いっこうに反映されなくてがっかり。
一旦保留にして、目次を出してみることにしました。
よくブログで見かける「目次」。今の記事量だと不要かもしれないけれど、使えるなら出してみたい、というわけで取り組んでみました。
[toc]
「Table of Contents Plus」はどんなプラグイン？
- 目次を自動で生成してくれるプラグインです。
- 全てのページとカテゴリーリストを表示するサイトマップも出力することができます。
今保留にしている「サイトマップ」もこちらで出力できるなら嬉しいと思いました。私のブログはまだ文章量が少ないので目次は必要ないかもしれません。でも何事もこつこつトライ！
プラグインインストールと設定の手順
ダッシュボード → プラグイン → 新規追加 と進み、「Table of Contents Plus」を検索するなどしてインストール、有効化します。
ダッシュボードにて「設定」→「TOC+」と進みます。
（TOC+は、Table Of Contents Plus の略ですね。）
設定については、「基本設定」のページで、見出しの位置、目次の上にタイトルをつけるかどうかどうか、目次の表示・非表示、などの指定ができます。
また、番号を降ったり、横幅を決めるなどの選択があります。
「プレゼンテーション」の項目では、デザインを簡単に変更することができます。
その下の「上級者向け」右にある（表示）をクリックした後の画面で大事だと思われる項目は「見出しレベル」でした。チェックの入った見出しレベルが目次に表示され、チェックを外すと非表示になります。
heading2-h2、とか heading3-h3 は何のこと？と思うかたもいらっしゃるかもしれませんが次へ進みましょう～
見出しの設定と目次の反映方法
見出しの設定では、数字が小さいほど重要度が上がります。
設定方法は２とおり。「テキストモード」と「ビジュアルモード」はタブ（写真の黄色い部分）をクリックして切替できます。
「テキストモード」で直接記載
「ビジュアルモード」でボタンを押して設定
テキストモードの場合
本文に対して以下のように<h1>と</h1>などで見出しにしたい文字を囲み「ビジュアルモード」やプレビューで見ると、あらかじめ各見出しに設定されているデザインが反映されると思います。
私が使用しているテーマ「stinger8」の初期状態のスタイルでは、以下のように表示されました。
ビジュアルモードの場合
ビジュアルモードの場合は、見出しにしたい文字列を選択し、「段落」のプルダウンメニューから希望のものを選択します。
「ビジュアルモード」の見出し設定プルダウンメニュー↓↓↓
テキストモードに切り替えた場合のほうがボタンが多く、機能が沢山ありました。ただ、私にとっては少し難しいようです･･･
さて、見出し設定はしたもののまだ本文に反映されていない！ということで、テキストモードで「目次（TOC+」のボタンをクリックして追加します。
目次が左寄せになる問題を解決！
表示されたものの、私のブログの場合は一つ問題点が･･･初期設定で目次が左寄になってしまっています。
中央寄せにするために、子テーマのスタイルシート (style.css)にCSS（以下に記載）を追加してみたところ、中央揃えになりました。もやもやがスッキリした気分！！
↓反映後のイメージ↓
CSSで色々設定できるようになると、中央揃えだけでなく他のデザイン部分も変えることができます。
Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出！
こちらに記載されております「CSS最終形」をコピペして反映させていただき、素敵な目次を作成することができました！感謝です！
見出しについては何となく理解しているものの、SEOについてはまだ未知の世界なので、上記サイトや、バズ部さんの「見出しタグの使い方と絶対に知っておくべき注意点」を見て、これから勉強してみたいと思います。