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を使って記事を編集できるブログでも使える手法なので、ぜひ。

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

フォローする

スポンサーリンク