人気デザインテーマの目次をサイドバーに固定表示する方法

はじめに
- 便利な目次
ブログへ目次を設置する方法

はじめに

この記事は「はてなブログをカスタマイズして良くするプロジェクト」第2弾です。

皆さんはブログに目次を設置してますか？

「Yes」の方がとても多いと思います。

では、2カラムデザインの方でサイドバーにも目次を設置してますか？

「No」の方が多いと思います。

スマホでの閲覧が多いから必要ないと言う方が多いのではないでしょうか。

でも統計によるとまだ4割はPCでの閲覧があるので、サイドバーに目次があった方が良いかも知れません。

もしサイドバーに目次を設置するなら、どんな目次が便利なのでしょうか。

便利な目次

Qiitaという技術共有サービスを使っている方はご存知だと思いますが、この目次は超便利です。

記事を読み進めると目次がトップに固定され、現在読んでる大見出しと中見出しの2カ所の背景色が変わるため、今どこを読んでいるのかすぐ分かります。

プログラム系の記事は解説とプログラムが混在しているので、見出しがたくさんある場合があり、元に戻ったり先に進んだりと、自分が読みたい部分をすぐ探せるため便利です。

なお、記事内部には目次はないので、PCで記事を読むことを大前提にした作りとなっているようです。

ブログへ目次を設置する方法

はてなブログでは記事内への目次設置は1クリックで出来るので超便利です。

これは神機能だと思います。

しかし、サイドバーへの目次設定は標準機能が提供されてません。

その為、サラさんが開発したコードをブログに設置している方が多いと思います。

現在位置を表示して追尾する目次の設置方法

現在位置追尾型の目次を実装したい方は、下記サラさんのページに飛んでご参照下さい。

サイドバーに現在位置を表示して追尾する目次を設置する【Ver3】 - Twilyze blog

いわゆるシングルページナビゲーションみたいなやつ (2019/11/10 ver3.3.0) 現在位置の背景色変更, リンク先へのスムーズスクロール, ウィンドウサイズ変更に合わせてサイズ変更, 記事ページ以外でもページ内の記事一覧などを表示

サラさんが作られた目次はQiitaライクな目次で、今読んでいる見出しの背景色が変わる以外に、トップページでは記事一覧が目次で表示される、とても高機能なものです。

ほとんどのデザインテーマでサラさんの目次は利用可能なのですが、「Haruhi」「UnderShirt」「マテリアルぽっぷ」では目次のトップ固定が働かなく利用できません。

“あトん”は「マテリアルぽっぷ」をカスタマイズして使っているので、サラさんの目次は機能しませんでした。

泣く泣くサイドバーへの目次設置を断念した方もいらっしゃるのでは、と思います。

当ブログは苦肉の策で、サイドバータブの中に目次を設定し、サイドバータブをトップに固定する面倒な方法で使ってますが、初心者にはあまりおススメ出来きません。

誰でも出来る、あまり難しくない別の方法がないか検討していましたが、現在位置を追尾しない普通の目次であれば、割と簡単に実装できることが分かったので、今回記事にまとめて見ました。

現在位置の表示にこだわりがなく、単純にサイドバーに目次を設置したい方へもおススメできるので、良かったら使ってみて下さい。

現在位置を追尾しない目次の設置方法

では目次設定の手順を説明します。

記事内への目次設定

まず当たり前のことですが、記事内に目次を設定するために、目次を表示したい位置で目次のボタンを押して[:contents]を挿入して下さい。

サイドバーに目次を設定

サイドバーを選択しモジュールを追加を選択して下さい。

目次のモジュールを設定

HTMLを選択し、モジュール名を入力し、下のコードをコピペし適用をクリック。

<div class="hatena-module-body module" id="stoc-body"></div>

クローンコードの追加

JavaScriptのライブラリを利用するのでjQueryを入れてない場合はフッタまたはヘッダに下のコードをコピペし、目次をクローンするJavaScriptのコードをフッタにコピペして下さい。

<!-- JavaScriptのライブラリを利用するのでjQueryを入れておく -->
<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

目次をクローンするコード

<script>
$(function() {
    $('.table-of-contents').clone().appendTo($('#stoc-body.hatena-module-body'));
});
</script>

CSSの追加

「Haruhi」「UnderShirt」「マテリアルぽっぷ」は下のCSSをデザインCCSにコピペして下さい。

/*min-widthはご自分で最適な数値を決めて下さい*/
@media screen and (min-width: 960px) {
    #box2 {
        display: -webkit-flex;
        display: flex;
    }
    .hatena-module:last-of-type {
        position: -webkit-sticky;
        position: sticky;
        top: 8px; /*トップから固定する距離 お好みの数値に変更下さい*/
    }

    .table-of-contents li a:hover {
        background-color: rgba(200, 200, 200, 0.5);
    }

    /*「Haruhi」「マテリアルぽっぷ」でoverflowをvisibleに変更し、position: stickyを有効にする*/
    /*「UnderShirt」は入れなくても良いです*/

    /*ココから*/
    #box2-inner {
        overflow: visible !important;/*「マテリアルぽっぷ」はこの行は入れなくても良いです*/
        width: 100%;
    }
    #content {
        overflow: visible !important;/*「Haruhi」はこの行は入れなくても良いです*/
    }
    /*ココまで*/
}

最後に目次のサイドバーが最下段に設定されていることを確認し、変更を保存。

以上で作業は終了です。

記事をスクロールさせると、サイドバーの目次がトップに固定されます。

なお上記以外のデザインテーマで現在位置を表示しない目次を設置する場合は、position: stickyが働かずトップに固定できません。

その場合は、SHIROMAさんが公開しているサイドバー固定のコードをご参照下さい。

レスポンシブに対応したサイドバー固定Ver.2（はてなブログ向け） | SHIROMAG

サイドバーの固定は以前にも記事にしたのですが、テーマによってはうまくいかないことがあったので、一旦記事を下書きに戻しました。今回、コードを修正して再度記事を書き直しました。サイドバーの固定って何？？サイドバーの一番下…

目次のカスタマイズ

目次の表示を大見出しのみにしたり、目次の表示/非表示の切り替えを行いたい、目次のデザインパターンを変更したい場合は、ゆきひーさんやMinimal Greenさんの記事を参照しトライして見て下さい。

はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life

この間追加されたはてなブログの目次機能。どのモードでも、[:contents]と書き込むだけで目次がつくれるので、「凄い！」って思ったしとっても便利になりましたよね！今まで目次を自動生成するコードもあったのですが、特定の説明記事やリスト記事にだけ入れたいなと思っていたので、半ば諦めていました( ；´Д｀) それにちょっとコードを足すとグッと使いやすくなるので、いろいろとサンプルを紹介したいと思います。はてなブログユーザー向けの記事になります。

はてなブログの目次のデザインカスタマイズ集 - Minimal Green

はてなブログで使える目次のデザインを幾つか作ってみました。コピペでお使いいただけます。目次の挿入方法目次デザインパターン集 FontAwesomeの呼び出しストライプ背景ストライプ背景2 二重線囲みステッチ風目次リストのスタイル（番号順、円）目次を表示・非表示に切り替えるご使用のテーマによって、調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。目次の挿入方...e>