トップ > ブログ > はてなブログで開閉式の目次を導入してみました！！

はてなブログで開閉式の目次を導入してみました！！

ブログ

はてなブログで開閉式の目次を導入しました
先日、はてなブログの目次を開閉式にしてみました。
スタイリッシュでスライドして目次が出てくる面白いデザインです。


今回作成する目次がこちら。


かなりスタイリッシュですよね！！
コピペで簡単に作成できますので、ぜひお試しください！！



参考サイト

今回参考にさせていただいたサイトはこちら。
kabuku.hateblo.jp


内容はもちろん、文章もめちゃめちゃ面白いです！！
ぜひ読んでみてください！！


開閉式ボタン作成

jOueryコード

今回の開閉式目次で必須のコードです。
それがこちら。

<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>


jQueryを使用したことある方はスルーしていただいてよいですが、使用したことない方は下記コードを先程のコードの一番上に貼り付けてください！！
これがないとjQueryは動きませんので要注意です。

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


貼り付け場所

貼り付ける場所は

ダッシュボード→カスタマイズ→フッタ部分

に貼り付け。
保存は忘れずに行ってくださいね！！


CSS

続いて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";
}


貼り付け場所

CSSは

ダッシュボード→カスタマイズ→デザインCSS 部分

に貼り付けてください。
あ、保存もお忘れなきを。



スマホでの表示

レスポンシブ対応の方

現在使用しているテーマがレスポンシブ対応の方は
ダッシュボード→スマートフォン→詳細設定→レスポンシブデザインにチェック
を入れてください。


そうすることでスマートフォンでもPCと同じ開閉式の目次を表示することができます。


レスポンシブ非対応の方

現在使用しているテーマがレスポンシブ対応ではない方は特に要注意！！
jQueryは同じコードを

ダッシュボード→スマートフォン→フッタ→スマートフォンようにHTMLを設定するの下空白部分

に貼り付ければOKです。


しかし、CSSはそうはいきません。
まんまCSSを貼り付けてもスマートフォンでの目次は開閉式にならないのです。
ですので、スマートフォン用のCSSも貼っておきますね！！

<style type="text/css">
/* 目次デザイン */
.entry-content 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;
}

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

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

.entry-content toc-open{
    background: #499475;
}

.entry-content 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;
}

.entry-content toc-btn-in:before {
    font-family: "blogicon";
    content: "\f039";
}
</style>


貼り付け場所

上記のコードは

ダッシュボード→スマートフォン→記事→記事上の空欄

に貼り付けてください。
少し場所が変わりますので、間違えのないよう気を付けてください！！


解説

※上記コードの解説ですので興味のある方だけお読みください。
これから下に表示されるコードはコピーしなくて大丈夫です。


スマートフォンで開閉式の目次を使用するためには、２つのコードを加えることで改善できます。
それが

<style type="text/css">/* CSS貼り付け */</style>

と

.entry-content


style="text/css"タグの方はスマートフォンでデザインを表示したいとき、マーカーでも引用デザインでも必ず必要となってきます。
スマートフォンでの表示を考えている方は入れておいてくださいね。


.entry-contentは上の"text/css"コードで改善されなかった方用にいれてあります。
このコードをいれることで


・スマートフォン

・タブレット

でもCSSの表示が可能になりました。

もし、これからもスマートフォン用CSSを追加しようと考えている方は失敗しないために入れておくことをオススメします！！



私自身、ブログを始めた当初はPCで設定したデザインがスマートフォンに再現されず、ネット検索や独自で試行錯誤した経験がありました。
今となっては良かったの思いますが、なかなか時間をかけましたね。


みなさんは時間を有意義に活用くださいね！！


終わりに

これで開閉式の目次は完成です！！


もしできなかったという方はコードのコピー間違いや、設置場所の間違いなどが原因かもしれません。
あせらずしっかり読んでくださいね。


以上、開閉式目次の紹介でした！！

オススメ記事

www.j-lifestyle.work