Table of Contents Plusを使って、長い見出しをコンパクトに!目次h3タグをh2タグ下にリストの目次に変更する方法

TOC+のHTMLをコピペして半オリジナル目次を作成した例

目次が凄く長いとき、ページ分割するべきか。それとも見出しをh2のみ出力するべきか。など考えた時、目次をh2タグのみ表示して、そのh2タグの小見出しh3タグは、それぞれの大見出しh2タグ下に設置して様子を見るのも良い案ですよね!

って事で、見出しをスッキリ見せる簡単な方法をチェックしてみてくださいね。

スポンサーリンク

目次Table of Contents PlusのHTMLだけをサイト内に出力

Chrome要素の検証を使ってHTMLをコピーして記事内にペーストしていきます。以下のようにして操作して要素を確認していきます。

Windowsの場合CtrlShiftCキーの同時押し
MacのショートカットcontroloptionCキー

LINK要素の検証の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編

TOC+のHTMLをコピーする

TOC+のHTMLをコピー

矢印マークが青くなっている状態で、画面左側『目次の上部(画像のとおり)』をクリックしたら、<div id="toc_container" class="toc_white no_bullets">…</div>と右側に表示されます。

このときプレビュー画面ではなく、サイトページを表示してください。

目次のHTMLをコピーする

それを右クリックしてCopyCopy elementを選択すると、目次のコピーは完了です。

投稿画面でtoc+目次HTMLを貼り付ける

WordPressのテキストエディタのh2タグ前に目次HTMLをペーストする例

コピーした目次のHTMLを該当ページの投稿画面よりペーストするので、テキストエディタを開いて、初めのh2タグ前や冒頭あたりにペーストしてください。

WordPressビジュアルエディタで長いh3タグを切り取る

貼り付けたら、ビジュアルエディタをクリックして目次のリストを確認しながら、長いh3タグを切り取り❦

該当h2タグ下に切り取った目次を貼り付ける

該当のh2タグ下に切り取った目次を貼り付け❦

h2タグの見出しh3タグの目次を貼り付けた例

該当h2タグの目次h3タグのリストが出来上がり❦

TOC+の目次出力を停止する

TOC+の目次出力停止するショートコードの貼りつけ例

以下のショートコードをページ内に貼り付ける事でそのページだけ目次の出力を止めて、コピペしたHTMLだけを表示させてると完成です^^

目次がスッキリした完成例

長いもくじがスッキリ!

後はh2タグの見出し下のデザインを既存のものに指定するなど装飾すれば完成!

h2タグの下にh3タグ小見出しの目次が完成❦

さいごに

PHPを触って出力すると、見出しを変更したいときは自動で変更されるので便利です。既に完成しているページでしたら、もう見出しの変更はしないので、要素の検証を使ってHTMLをコピペし、簡単に半オリジナル見出しの目次が完成して便利です。

もし元に戻す場合でも、貼り付けたHTMLとショートコードを削除すればスグに元通り❦

それでは、機会があればやってみてくださいね。かうたっくでした。

スポンサーリンク

シェアする

フォローする

  • Follow Me →
トップへ戻る