はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ

開閉式の目次を付けました

記事名と
URLをコピー

記事が長くなった時、目次を付けてみたはいいけど、目次自体も長い・・・。目次が閉じたり開いたりできたらいいのに。
そう考えていたところ、検索して方法を見つけました。

今回参考にしたのは下記のブログ。ありがとうございます!
はてなブログで開閉式の目次を導入してみました!! - j-lifestyle日記

見た目はシンプルだけど、押すとスルスルッと動くボタンが設置できました。

※基本は開いてて、後から隠したり見たりできるタイプの目次も紹介しています。現在はそれを使っています。*1

yaanon.hatenablog.com 

設定方法

jQueryならここから設定

jQueryを使うのが初めての場合は、まずその設定からします。

よく紹介されているコードは、下記のパターンです。サイト設定の「デザイン」→「カスタマイズ」→「フッタ」のHTML欄にコピペしてください。

定番jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

ただ、この設定については、少しでも高速にできそうな以下のサイトの方法を参考にしても良いかと思います。こちらのページには高速化の方法が他にも紹介されています。
簡単にできるはてなブログの高速化・9つの対処法|パソコン・ブログガイド

では、下記のコードをコピペします。

*2はてな版のコードに切り替えると、うまく作動できなかったため、定番のコードを使用することにしました。

はてなjQuery

<script src=”https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3″></script>

目次ボタン作成で参考にしたサイトでは「フッタ」に貼り付けと書いていましたが、他のサイトでは「詳細設定」の「head要素」に貼り付けと書いてありました。貼り付け場所は、どちらでも大丈夫なようですし、どちらか1か所のみで良いです。

*3jQueryコードが自身のサイトに複数あったので、テストしました。コードを「head要素」のみにすると機能が作動しなくなる一方、「フッタ」のみでは作動しました。同じコードを複数書く必要はないと思うので「フッタ」のみに貼り付けに修正しました。

開閉ボタンのコード(フッタ)

jQueryの設置準備ができたら、いよいよ目次開閉ボタンの設置です。 以下のコードを「デザイン」「カスタマイズ」「フッタ」に貼り付けます。

ボタンの表記は「▼目次を表示▼」と「△目次を閉じる△」に変更しました。

<script>
(function($) {
$(document).ready(function(){
        $('.table-of-contents').before('<span class="btn btn-3 btn-3a icon-cart">▼目次を表示▼</span>');

        $('.table-of-contents').hide();
        var flg = 'close';
        $('.btn').click(function(){
            $('.table-of-contents').slideToggle('slow');
            
            if(flg == 'close'){
                flg = 'open';
                $(this).text('△目次を閉じる△');
            }else{
                flg = 'close';
                $(this).text('▼目次を表示▼');
            }
        });
    });
})(jQuery);
</script>

開閉ボタンのコード(デザインCSS

次は以下のコードを「デザインCSS」に貼り付けます。文字サイズや色は任意で変更できます。

/*-----開閉目次デザイン-----*/
.toc-btn {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    transition: all .5s;
    font-size: inherit;
    font-weight: normal;
}

.toc-btn-in {
    background: #58656e;
    color: #fff;
    padding: 5px 15px 5px 30px;
}

.toc-btn-in:hover {
    background: #487ca3;
}

.toc-open{
    background: #499475;
}

.toc-btn-in:before {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: #fff solid 2px;
    height: 100%;
    width: 80px;
    background: rgba(0,0,0,0.4);
    font-size:150%;
    font-weight: normal;
}

.toc-btn-in:before {
    font-family: "blogicon";
    content: "\f039";
}
/*以上-----開閉目次-----*/

完成見本GIF

f:id:yaanon:20201212164618g:plain

これで表示したり隠したりできる目次ができました。記事が長くなっても、これなら少しは見やすくなりそうです。

※コードは色分けができた状態で貼りたかったのですが、スクロールがうまく効かなくなったので一旦諦めました。原因が分かりません💦

*1:※2020年12月29日:別形式の目次を追記しました

*2:2020年12月12日:高速化コードがうまく作動しなかったため、打消し。

*3:2020年12月13日:jQueryコードのテスト結果追記