after work Labo

少しHでニッチな「Webデザイン、家電・IT」のカスタマイズBlogです

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

はじめに

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

サイドバーに目次を表示

 

便利な目次

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

twilyze.hatenablog.jp

 

サラさんが作られた目次は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さんが公開しているサイドバー固定のコードをご利用下さい。

www.notitle-weblog.com

 

目次のカスタマイズ

 

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

 

www.yukihy.com

 

blog.minimal-green.com

 

面白い場所への目次の設置方法

 

おまけで目次の面白い場所への設置方法を説明します。

 

サイドバーへの目次設置は、目次専用のサイドバーを作る必要はなく、プロフール欄に目次を埋め込むことも可能です。

 

えっ!と思われるかも知れませんが、プロフール欄にはHTMLを記述することが出来るので、目次を埋め込むことが可能なのです。

 

 他のブログとは一味違う目次の表示をしたい方は、お試しください。

 

まとめ

 

目次をクローンすることで、簡単にサイドバーに目次を設置できることができました。

 

現在位置は表示できませんが、読みたい記事の見出しにすぐジャンプできるので、そこそこ便利だと思います。

 

Haruhi」「UnderShirt」「マテリアルぽっぷ」のユーザ様にお試し頂けると嬉しいです。

 

それでは今回の記事はこれでおしまいです。