WordPressでプラグインを使わずに簡単に目次を作る手順

6363562459_7399ee3c3e_z
WordPressの記事に目次を作る方法を紹介します。

目次を作るプラグインで有名なのは「Table of Contents Plus」です。

プラグインを使えば簡単にすぐ設置できるのですが、
ただでさえ重くなりやすいWordPressなのでできる事ならプラグインを使わずに設定できないかという事で目次プラグイン使わずに目次を設定する方法を試してみました。
photo by quattrostagioni

目次

プラグインを使わずに目次を作る手順

それではプラグインを使わずに目次を作る方法を紹介したいと思います。

簡単に作っただけなので「Table of Contents Plus」を使う場合と比べると非常にシンプルな作りになります。
具体的にはWordPressの記事編集をテキストに切り替え上部の「目次」を表示させたい部分にこの記述

↓コードのサンプル

<h2>▼この記事の目次</h2>
<ul>
<li><a href=”#title1″>見出しA</a></li>
<li><a href=”#title2″>見出しB</a></li>
<li><a href=”#title3″>見出しC</a></li>
</ul>

記事中の<h2>または<h3>の見出し部分に

↓コードのサンプル

<h2 id="title1">見出しA</h2>
<h2 id="title2">見出しB</h2>
<h2 id="title3">見出しC</h2>

を入れます。
箇条書きタグの方は<ul>の番号なしリストにしましたが、<ol>の番号ありのリストにしたらスマホ(Android)の表示が番号が見えなくなって崩れたので<ul>にしました。
mokuji1

このようなかんじに。クリックするとちゃんと記事中の見出し部分まで飛びます。

目次を設置する記事・設置しない記事

最近ではスマホでブログを閲覧するというユーザーも多くなってきて、今度数年~10年先位まで見たらガラケーからの移行組も加えると今度少しずつスマホユーザーが増えていくんだろうなとは思います。

ちなみにまわりにガラケーを使っている方もまだいますが。(このブログはガラケーに対応していません)

パソコンの方からもブログ運営やパソコン関係の仕事・ネットビジネス等をしていなければパソコンを持たずにスマホだけ派に徐々に移行するユーザーも今度少しずつ増えていくだろうと思います。

どういう事かというとスマホで閲覧する場合機種によってはスクロールするのが大変なのである程度の記事数だと目次を使った方が親切だという事です。

自分でもスマホで当ブログや色々なサイトの記事を複数比較してみましたが、長い記事や難しい専門的な記事だと目次があった方がないよりはいいかなという印象でした。
ユーザーが記事の内容を入ってすぐに把握しやすいというメリットもあるかなと。

目次を設置する・設置しないは記事数や内容によって使い分ける方法がいいというのが個人的な感想です。
豪華に目次の見出し数が多過ぎても少し見づらいという印象でした。

いたってシンプルなのでもう少しカスタマイズしたいかたはアレンジするか、プラグインを使ってしまうという方法もあるかもしれません。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ジョン齊藤のアバター ジョン齊藤 ブログ運営者 / 執筆者

ブログ歴7年 / 10万PV達成 / ブロガー・動画編集者 / 使用テーマSWELL

コメント

コメントする

目次
閉じる