JavaScript
jQuery
はてなブログ

はてなブログで自動的に目次を作成するjs

More than 1 year has passed since last update.

最近の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(コンテンツ・デリバリ・ネットワーク)を利用してサイトに埋め込んでいます。(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の読み込みだけで処理できるようにしたいと思います。