WordPressで記事に目次を作る方法!

ちゃんとしたブログには目次がある。と思っている今日このごろ。

ブログにメニューをつけるなんて面倒くさいと思っていたのですが、どうやらWordPressには目次をプラグン(拡張機能)を使用し簡単にいれることができるみたいです。

出典元:WordPress目次の作り方!目次作成プラグインTable of Contents Plusの使い方!

とはいえ、自分でオリジナルの目次が作りたいっていう方にはプラグイン(拡張機能)は不向きです。ということで、メニューを作ってしまいましょう!ただ、作るのはちょっと正直面倒くさいです。(笑)

HTMLとCSSの知識さえあれば簡単にはできるのですが、記事事に作るとなると面倒くさいのであまりこだわりがない方は…プラグインを強くオススメします。

簡易的に作ったDEMOの目次はここから見てください。見ていただけたでしょうか?これは私が運営する中国(深セン)のことを発信するブログです!これ目次がないと見にくくなって全体的に何を伝えたいのかわかりにくくなってしまいますよね?

目次はやっぱり大事です。。はい。本題に入っていきます。

    目次:あ行の紹介

例えば上のような目次があります。あ行の紹介。ということでメニューを作るとします。目次は基本的にはリスト等で作ると思いますが、なんでも構いません!!ポイントは目次を押したらどう目次のタイトルと紐付いているか。ということです。

リストで作るとすれば、HTMLはこんな感じでしょうか…

これに、<a href=””>タグをつけてあげます。ん…?リンクつけるのって思った方いると思うのですが、ここがポイントとなります。この<a href=”id”>でタイトルまでとばすことができるのです。

上記のようなしくみで目次をクリックすることにより気になるタイトルまで飛ばしています。以下に簡易的なDEMOを作りました。あを押すと大きなあに飛びます。

 

 

 

 

 
 
 
 
 

後はCSSで目次に形をつけていくだけです。仕組みがわかってしまえば簡単ですね。
他にも目次の作り方はたくさんあると思うんですが、簡易的なものを紹介させていただきました。
ぜひ、ブログを書く際は目次をつけて書いてみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*