最近のWebメディアでは、記事の頭に目次を持ってきているメディアが見かけられます。
記事内容をはじめの段階で読み取れるので、非常に重宝します。
なので、自分のはてなブログに目次をつけたいと思いますが、今までに書いた記事にいちいち追加するのは面倒。
記事中の見出しから目次を自動的に作成する「目次記法」を追加しました
はてなの公式目次がありますが、まさにその方法で設置しなくてはいけません。なので、少し足りない頭を使って自動で目次を作ってくれるJSを作りました。
jQueryの読み込み
まずはブログにjQueryを読み込せる必要があります。
ブログの管理画面から「設定」→「詳細設定」→「head要素の追加」に次のタグを埋め込みます。
<script
src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
こちらは、jQuery3.1.1のバージョンでslim minになり、CDN（コンテンツ・デリバリ・ネットワーク）を利用してサイトに埋め込んでいます。（ＣＤＮ の 仕組み：キャッシュ屋blog）他のバージョンをお求めの場合はjQueryの公式サイトから埋め込み用のタグできます。
JSの設定
これでjQueryを読み込む事ができたので、今度はJSの設定を行います。
下記のソースを「デザイン」→「カスタマイズ」→「記事」の「記事の上」にコピペします。
<script type="text/javascript">
$(document).ready(function(){
var hc = $('h4').length;
//h4の要素を取得して配列に入れる
var hedarry = [];
$('h4').each(function(i){
var text = $(this).text();
hedarry.push(text);
$(this).attr('id', 'headline' + i);
});
// ulタグを生成してinsertに追加
var insert = $('<ul>').addClass('list');
var newLi = "";
for(var j = 0; j < hedarry.length; j++) {
// liタグを生成してテキスト追加
newLi += '<li><a href="#headline'+j+'">'+hedarry[j]+'</a></li>';
// insertに生成したliタグを追加
insert.append(newLi);
}
//divを生成してulを囲む
var divinsert = $('<div>').addClass('index-list');
divinsert.append(newLi);
$('.entry-content p:nth-child(2)').after(divinsert);
//h2（目次タイトル）の作成
var h2title = $('<h2>').text("この記事のINDEX");
$('.index-list').prepend(h2title);
});
</script>
これで、自動的に記事中に使われているh4（中見出し）を読み取り、記事中2つ目の
タグ直後にタグが吐き出されます。私は中身だしを見出しにしようしているので、h4の設定にしていますが、もし別の見出しをつけている方は、このh4を変更して読み込みを変える事ができます。
吐き出されるHTMLは下記になります。
<div class="index-list">
<h2>この記事のINDEX</h2>
<ul class="list">
<li><a href="#headline1">***記事内のh4見出し***</a></li>
</ul>
</div>
liタグの数は記事中のh4の数に相当します。さらに、h4にはidが振られページ内リンクのターゲットになります。
より簡単設定
次のタグを「設定」＞「詳細設定」＞「head要素に追加」部分に記述すれば、外部ファイルから読み込みが行えます。
<script src="https://noriyasukatano.github.io/hatanajs/hatena_indexmake.js?data=20161229">
※ただし、こちらのファイルは個人のGithubアカウント上で公開されているので、連絡なしに削除・変更などが行われます。
※また、アップデートなどのサポートなどは不定期になります。
CSSの設定
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;
}
今度は、これを外部ファイルにして、headの読み込みだけで処理できるようにしたいと思います。