目次が凄く長いとき、ページ分割するべきか。それとも見出しをh2のみ出力するべきか。など考えた時、目次をh2タグのみ表示して、そのh2タグの小見出しh3タグは、それぞれの大見出しh2タグ下に設置して様子を見るのも良い案ですよね！
って事で、見出しをスッキリ見せる簡単な方法をチェックしてみてくださいね。
目次Table of Contents PlusのHTMLだけをサイト内に出力
Chrome要素の検証を使ってHTMLをコピーして記事内にペーストしていきます。以下のようにして操作して要素を確認していきます。
Windowsの場合Ctrl＋Shift＋Cキーの同時押し
Macのショートカットcontrol⌃＋option⌥＋Cキー
LINK要素の検証の使い方！初心者がカスタマイズできる方法！HTMLとCSS入門編
TOC+のHTMLをコピーする
矢印マークが青くなっている状態で、画面左側『目次の上部（画像のとおり）』をクリックしたら、<div id="toc_container" class="toc_white no_bullets">…</div>と右側に表示されます。
このときプレビュー画面ではなく、サイトページを表示してください。
それを右クリックしてCopy、Copy elementを選択すると、目次のコピーは完了です。
投稿画面でtoc+目次HTMLを貼り付ける
WordPressのテキストエディタのh2タグ前に目次HTMLをペーストする例
コピーした目次のHTMLを該当ページの投稿画面よりペーストするので、テキストエディタを開いて、初めのh2タグ前や冒頭あたりにペーストしてください。
貼り付けたら、ビジュアルエディタをクリックして目次のリストを確認しながら、長いh3タグを切り取り❦
該当のh2タグ下に切り取った目次を貼り付け❦
該当h2タグの目次h3タグのリストが出来上がり❦
TOC+の目次出力を停止する
以下のショートコードをページ内に貼り付ける事でそのページだけ目次の出力を止めて、コピペしたHTMLだけを表示させてると完成です＾＾
[no_toc]
目次がスッキリした完成例
長いもくじがスッキリ！
後はh2タグの見出し下のデザインを既存のものに指定するなど装飾すれば完成！
h2タグの下にh3タグ小見出しの目次が完成❦
さいごに
PHPを触って出力すると、見出しを変更したいときは自動で変更されるので便利です。既に完成しているページでしたら、もう見出しの変更はしないので、要素の検証を使ってHTMLをコピペし、簡単に半オリジナル見出しの目次が完成して便利です。
もし元に戻す場合でも、貼り付けたHTMLとショートコードを削除すればスグに元通り❦
それでは、機会があればやってみてくださいね。かうたっくでした。
Comments