この記事を読むのに必要な時間は約 4 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

目次に関してはこれまでも記事を書いてきましたが、手書きでHTMLとCSSで書くよりプラグインやテーマに付属した機能を使う方が楽です。
テーマに付属しているのは、筆者もkumahachi.meでも使っているLIONBLOGなどがそうですね。
プラグインでは、Easy Table of ContentsをパソコンワークスくまはちでもStinger8と合わせて使用しています。

 

アメブロの目次

アメブロでは使ってはいけないタグがあるのでHTMLで手書きするしか目次つけることができません。
当サイトでもテンプレートを配布させていただいてますが、Amecareなどで自動的に挿入されるようにするとか工夫が必要ですね。

 

はてなブログの目次

はてなブログも基本は、手書きになります。
ただアメブロのようにあれはダメこれもダメってことも少ないので開閉式が使えるようになりました。
右クリック禁止とかケチなことしてないのでソースをパクって使っていただいてOKです。
目次を使うことで見出しが絶対必要になると言うことです。
それは、SEO対策につながります。

 

ワードプレスの目次

目次は、 WordPressの場合は手書きはおすすめしません。
冒頭に書いたようにプラグインやテーマに付属した機能を使う方が楽です。
ただ気をつけておきたいこともあります。

 

プラグイン

筆者が使っているのはEasy Table of Contentsです。
パソコンワークスくまはちでもStinger8と合わせて使用しています。

 

設定

Easy Table of Contentsの設定は、設定の子メニューの中にあります。







上記が設定のキャプチャになります。
設定の参考になれば幸いですが、目次が長い場合に最初は閉じておく方がいいように思います。
デザインもある程度いじれるようになってます。
目次画像の例を見ていただくとわかるのですが、数字の場合は見出しにid=””を入れない方がいいようです。

id=””がページ内リンクのアドレスの一部になっているので使わない方がいいということです。
手書きで書いててプラグインを後から入れると手書き部分を消す作業に苦労します。
そう言う手間をかけないためにも最初からプラグインを入れた方がいいということです。

前のソースと比べてなくなったidの部分
付けない方がきれいに表示されます。

 

まとめと知っておきたい事

手書きの美学よりプラグイン使って楽する方が実務に時間を割けるようになる。
kumahachi.meでも使っているLIONBLOGなどのようにテーマに機能がついている場合などは、プラグインをわざわざ入れる必要ないのでそれがいいかもしれませんね。

 

---

 

 

くまはちLABのご利用ありがとうございます！ くまはちLABの最新情報をフォローしてゲットしてください！   @eddie24751102