Help us understand the problem. What is going on with this article?

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

More than 3 years have 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の読み込みだけで処理できるようにしたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした