search
LoginSignup
1

More than 5 years have passed since last update.

posted at

updated at

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1