最近のWebメディアには、よく記事の目次を見かけます。自分も最近ブログを真面目に更新し始めているので、ブログのメンテナンスを心がけるようにしました。
こちらの記事をみてアフェリエイトを強化するなど、細々と運用できるようにブログ自体をバージョンアップさせています。
目次は記事の内容を全て見る前にある程度内容を把握する事ができ、さらに、タイトルとは違う要素でユーザーを惹きつける事ができます。逆に記事の内容がすぐにわかるので離脱率を上げてしまう可能性もありますが、ユーザーにとっては全て記事を読む必要がないため重宝されると思います。
はてなブログの公式目次
ぜひ、これをつけてみたいので検索しました。そうすると、はてなからも公式で目次を発表していました。
しかし、このはてなの公式目次はタグを記事中に埋め込む必要があり、すでに書いた全ての記事に入力していく必要があります。
そこで、今回は自作で目次を作ることにしました。私のブログは写真の次に本文を記入しています。なので、必ず、2つ目の<p>タグから記事が開始されるので、その前にリストが出ることで全ての記事が成り立つと思いました。
開発・設置方法
開発はjQueryを用いて、記事中からh4（中見出し）を抜き取りリスト化します。そしてh4にはリンクのターゲットになるidを設置します。
設置にはjQueryの読み込みをするために、設定画面のheadに要素を追加します。そして、各記事の記事上にJSのソースコードを記述すれば完了です。詳しい内容はQiitaの方でまとめてあります。
吐き出されたスタイルを変更したい場合は、CSSを調整する必要があります。もし、画面のスタイルでよければ、次のソースコードを使用する事ができます。
/**
* 目次リスト
*/
.index-list{
background-color: #f3f3f3;
border-radius: 8px; /* CSS3草案 */
-webkit-border-radius: 8px; /* Safari,Google Chrome用 */
-moz-border-radius: 8px; /* Firefox用 */
padding:16px;
}
.index-list h2{
font-size:80%;
line-height:0;
padding: 0 0 1em 0;
}
今後はJSファイルを外部から読み込ませて、headの要素に追加するだけで設定が済むようにしたいと思います。
