IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

記事の目次をサイドバーに表示して記事を読みやすくしよう!【はてなブログカスタマイズ】

Photo by Fotis Fotopoulos on Unsplash

Photo by Fotis Fotopoulos on Unsplash

 

今回のはてなブログカスタマイズは、記事の目次をサイドバーにも表示するものです。

 

記事のよこに目次を置くことで読んでいるところを把握することができ、記事が読みやすくなります。
記事が長い場合に効果的です。

 

記事の目次

目次の表示方法

記事の目次を表示するには、記事編集画面で入力補助ツールバーから「目次」ボタンをクリックします。

 

f:id:Surprisedblog:20190730090810p:plain

 

f:id:Surprisedblog:20190730155634p:plainという文字が入力され、この文字の位置に記事の目次が表示されます。

記事の見出しが目次として表示されます。

 

※当カスタマイズでは、jQueryを使用しています。jQueryの設置方法は「jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best」をご覧ください。

サイドバーに表示

本題のサイドバーに表示する方法ですが、私は、HTML要素のクローンを生成して表示する方法をとりました。

サイドバーには事前に、HTMLモジュールを一番下に設置しておきます。

 

  1. 目次のクローン生成からサイドバーへの表示
    var toc=$(".entry-content .table-of-contents"); // 目次
    if (toc.length>0) { // 目次が存在する
        var toc_clone=toc.clone(true); // 目次のクローン生成
        var sidebar_last=$("#box2-inner .hatena-module.hatena-module-html").last() // サイドバーの一番下のモジュール
        sidebar_last.find(".hatena-module-body").prepend(toc_clone); // サイドバーのいっちばんしたのモジュールに追加
    }
  2. サイドバーに表示した目次の固定
    .hatena-module:last-child {
        position: sticky;
        top: 10px;
    }

 

これで、記事の目次をサイドバーに表示することができます。
※JavaScriptはサイドバーより後に記述します

 

 

強調表示

記事を読んでいるときに、どの目次内を読んでいるのかわかるように目次を強調表示する処理を追加しました。

これは、スクロールするたびに見出しの位置を取得し、その見出しが画面トップに来た時に目次を強調表示させるものです。 

 

  1. スクロール判定
    $(window).on("scroll", function (e) {
    // スクロールするたびの処理
    }
  2. HTML要素位置の取得
    HTMLElement.offsetTop