WordPressでよく見る「目次」をプラグインを使わず設置する方法

ウチのブログではほとんど使用しないのですが、たまにはちょっと使ってみようかと久しぶりに挿入するのにコードをすっかり忘れていて、検索までしちゃったので覚書き(情けない)

ちょー簡単「目次」の作り方

mokuji

それで、たまたま検索して知ったのですが、なんと「目次」を書くためのプラグインがあるとか!!

目次を自動で生成する、強力でユーザーフレンドリーなプラグインです。 全てのページとカテゴリーリストを表示するサイトマップも出力することができます。

なるほど~~……確かに、これは綺麗に作れそうですね。

しかし、「目次」を作るためのコードってごくごく簡単なものなのです。

プラグインを入れすぎるとサイトが重くなるし、エラーも起こりやすくなるのは事実。プラグインを使わなくても簡単にできることは、なるべく使わずに済ませたいです(個人的には)

では、見出しにコードを加えながら実際に書いて行きます。

私は<h3>を使いますが、別に<h4>でも<h2>でも作れます。普段使っているサイズの見出しに設定すればいいと思います。

◆目次

  1. あいうえお
  2. かきくけこ
  3. さしすせそ
  4. たちつてと
  5. なにぬねの
<h3 id="mokuji">◆目次</h3>
<ol>
<li><a href="#title1">あいうえお</a></li>
<li><a href="#title2">かきくけこ</a></li>
<li><a href="#title3">さしすせそ</a></li>
<li><a href="#title4">たちつてと</a></li>
<li><a href="#title5">なにぬねの</a></li>
</ol>
「<ol>」は、ただ単に番号を振るために書いているだけで、番号が不要なら外せば「●」になります。「<a href="#title数字">」で、それぞれの項目に飛ばします。

あいうえお

<h3 id="title1">あいうえお</h3>
先ほどの「目次」の「<a href="#title1">」が、この項目に飛ぶように「<h3 id="title1">」で設定しています。


まず「あいうえお」を書きましょう。

blogbloglogo-L

かきくけこ

<h3 id="title2">かきくけこ</h3>


つづけて「かきくけこ」の時間です。

さしすせそ

<h3 id="title3">さしすせそ</h3>


「さしすせそ」を上手く喋れない人がいますね。

たちつてと

<h3 id="title4">たちつてと</h3>


「たちつてと」も「たちちゅてと」になりがちです。

なにぬねの

<h3 id="title5">なにぬねの</h3>


「なにぬねの」は好きですか?

「目次」の「なにぬねの」

をクリックすると、ここまで飛ぶはずです。

WordPressじゃなくても使えます

以上。これだけです。簡単ですね。

Wordpress以外のホームページでも、FC2や「はてな」などHTMLを使って記事を編集できるブログでも使える手法なので、ぜひ。

コメント

※アドレスは必須ではありませんがGravatarでアバター設定している方は記入しないと画像が出ません。(アドレスは表示されません)。キャプチャーにチェックの上、送信お願い致します。承認後表示されます。

内容をご確認の上、「送信」ボタンを押してください。