ホームページやブログの記事ページに"あった方が良い"ものの一つとして「目次」が挙げられます。
よくWordpressを使ったサイトで以下のような目次を見かけると思います。
目次があることにより訪問者は一目で記事の構成を理解することができ、特定の箇所へ簡単に移動することが出来るため"ページの離脱率"や"再訪問率"の改善が見込まれます。
そこで今回は、シンプルで使いやすい目次（スマホ表示にも対応）をコピペするだけで超簡単に設置する方法についてご紹介します。
目次の設置方法
設置したいページのhtmlの設置したい箇所に以下のコードを貼り付けしてください。
<div class="mokuji">
<p style="text-align:center;"><b>目次：</b></p>
<p><a href="#1">1 ターゲット1</a></p>
<p><a href="#1_1"> 1.1 サブターゲット1</a></p>
<p><a href="#1_2"> 1.2 サブターゲット2</a></p>
<p><a href="#1_3"> 1.3 サブターゲット3</a></p>
<p><a href="#2">2 ターゲット2</a></p>
</div>
※実際に設置する際は、目次の各項目のid値と対応する移動先のid値を同じにしてください。(例えば"#1"の移動先の要素にはid="1"を与えてください）
そして目次のスタイルを整えるために、以下のコードをCSSに貼り付けてください。
.mokuji{border:1px solid #aaa;display:inline-block;}
.mokuji p{padding:0 10px 0px 10px;}
.mokuji a:link{text-decoration:none;color:#4682b4;}
.mokuji a:visited{text-decoration:none;color:#4682b4;}
.mokuji a:hover{text-decoration:none;color:red;}
※"display:inline-block;"で文字の長さに合わせて枠の幅が変化するようにしています。文字色や背景の色はご自由に設定してください。
以上で目次の設置は完了です！インラインブロック化しているため、スマホのレスポンシブ表示にも対応しています。
※移動先までスムーズにスクロールさせたい場合は、以下の記事を参考にしてください。
-
-
ページ内リンクをスムーズスクロールで滑らかに移動させる方法(jQuery)
ページ内のリンクをクリックした際に目的箇所まで滑らかに移動するスムーズスクロールを簡単に適用する方法について紹介します！ スムーズスクロールを適用すると↓のリンクのように目的地まで滑らかにスクロール移 ...
続きを見る
