はてなブログ目次を自動で開閉式にする方法 - jQuery コピペOK（目次の表示/非表示切り替え）

はてなブログの目次のカスタマイズ★についてはこちらで解説していますが、
今回はjQueryを使って自動で開閉式にする方法です。

開閉式とは、↓↓これです！ 

はてなブログでは、編集画面で記事の「目次」を簡単に追加することができますよね！
↓この機能

 

記事の「見出し」を設定することで、自動的に見出しを階層にして見やすい「目次」として表示してくれます。

ただし、この目次。
見出しをたくさん使って記事を書くと、目次だけですごく長くなってしまいますよね？
せっかく見やすくするために設置しているのに、延々と続く目次に逆にウンザリされてしまっては大変！

そこで、はてなブログの目次の表示、非表示をクリックで切り替えられるカスタマイズを紹介します！

このカスタマイズの特徴

１）どのテーマでも大丈夫！
２）自動的に開閉式にできる！

↑どう言うことか簡単に説明します♪

１）どのテーマでも大丈夫！

このカスタマイズでは、使っているテーマに関係なく、表示/非表示を切り替えることができます！

はてなブログで予め備わっている「目次」に表示/非表示の機能を加えるだけのコードなので、元々のデザインには影響しません。

文字のサイズや色は、変更する箇所を書いてますので、ご自身のデザインに合わせて変更することができます！

２）自動的に開閉式にできる！

jQueryを使ったコードで、はてなブログの「目次」機能だけで、自動的に全部の記事が開閉式になります。
jQueryとは、WEBブラウザで動くプログラミング言語の一種ですが、分からなくても大丈夫♪♪
ここに書いてある通りにコピペすればできます！！

★なお、CSSだけで開閉式にするコードも紹介しています。
（CSSとは、WEBデザインをする言語のこと）

こちらはHTMLを追加（コピペ）することで、記事によって開閉式にするかどうか決めることができます。
↓↓

はてなブログ目次をCSSだけで開閉式にする方法 

それでは、さっそく今回のコードと使い方を説明します。

目次の表示切り替えのコード（jQuery/CSS）

jQuery/CSSのコード

コードは２種類あります。お好みで好きな方を使ってくださいね(^-^)

①目次がもともと非表示のパターン
　（クリックすることで「開く」）

②目次がもともと表示されているパターン
　（クリックすることで「閉じる」）

＊なお、当ページで使っているのは①のもともとが非表示のパターンです。

それでは、コード↓↓
①と②のどちらか選んでコピペしてくださいね！
（次の章で解説しますので、とりあえずコピペしちゃおう！）

①目次がもともと非表示のパターン

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
    var contents = "Contents"
    var close = "[ 閉じる ]"
    var open = "[ 表示 ]"
    
    var contents = '<span class="contents">' + contents + '</span>'
    var btn = '<span class="switch">' + open + '</span>'
    var sw = '.switch'
    var $contents = $(".table-of-contents")
    var $li = $(".table-of-contents li")
    
    $($contents).prepend(contents + btn);
    $(sw).click(function(){
        var $click = $(this);
        if($li.css('display') == 'none'){
            $li.show(400),
            $click.text(close);
        }else{
            $li.hide(400),
            $click.text(open)
        };
    });
});
</script>
<style>
.contents {
	font-size:2rem;
	padding:20px;}
.table-of-contents li{
    display:none;
}
.switch {
	text-decoration:underline;
	cursor: pointer;}
</style>

 ②目次がもともと表示されているパターン

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
    var contents = "Contents"
    var close = "[ 閉じる ]"
    var open = "[ 表示 ]"
    
    var contents = '<span class="contents">' + contents + '</span>'
    var btn = '<span class="switch">' + close + '</span>'
    var sw = '.switch'
    var $contents = $(".table-of-contents")
    var $li = $(".table-of-contents li")
    
    $($contents).prepend(contents + btn);
    $(sw).click(function(){
        var $click = $(this);
        if($li.css('display') == 'none'){
            $li.show(400),
            $click.text(close);
        }else{
            $li.hide(400),
            $click.text(open)
        };
    });
});
</script>
<style>
.contents {
	font-size:2rem;
	padding:20px;}
.switch {
	text-decoration:underline;
	cursor: pointer;}
</style>

コードを貼り付ける場所 

コードをコピペする場所は
デザイン→カスタマイズ→フッタ

 ※注意※
元から書いてあるコードを消してはいけません！！
書いてあるコードの一番下に追加してくださいね。

コードの解説＆使い方（jQuery/CSS）

コードは２つのパートに分かれています。
・jQueryのコード
・CSSのコード

jQueryコードの解説

上記のコードで書き換えても良いのは「ここだけ」と書いてあるところの " ~ "  （ダブルクォーテーション）で囲ってある部分だけです！

目次のタイトルと表示/非表示の切り替えの文字の部分になります。

"Contents"　は、タイトル部分です。
　"もくじ"  や  "この記事の目次"  など

"[ 閉じる ]"　"[ 表示 ]" も必要に応じて、表示/非表示、OPEN/CLOSEなど、書き換えて使うことができます。

それ以外のところは書き換えないでくださいね(^-^)

CSSコードの解説

 マウスで書いた数字が下手くそですが、右側の番号の順番に説明します。

１）上部に表示されるタイトル（"Contents"）のサイズや色が変更できます。
文字のサイズ、デフォルトでは「2rem」となっていますが、これは元の文字のサイズの2倍と言うことです。少し大きくしたい場合は、「1.2rem」などに調節してみてくださいね♪
文字の色を変える場合は、color:#808080;　などを追加してください。

２）は、「開く」「閉じる」の文字の装飾部分です。こちらもサイズや色はご自身で調節してみてくださいね(^-^)

cursor:pointer; 
↑こちらは、PCでマウスのカーソルを重ねた時の動作です。（このままでOK）
 

なお、テーマによっては、すでに目次の中に「目次」の文字が入っている場合があります。
たとえば、私の作ったテーマ「Palette（パレット）」だと、こんな風にデフォルトで[もくじ]と入ってしまっています。
↓↓

このデフォルトの文字を消すには…
Palette（パレット）のテーマを使っている場合は以下のCSSを追加してください。

ul.table-of-contents:before {
	display: none;}

これはテーマによって少し違うのですが、他のテーマで上記のコードで消えない場合は、最初の「ul」無しか、「ul」の代わりに「.entry-content」などでやってみてくださ〜い。

目次デザインのカスタマイズはこちらで解説しています↓↓
コピペで簡単にいろんなデザインにできます♪

コードの公開についてのお願い

今回紹介したコードは以下のサイトを参考にして、自分で考えたものです。

jQueryで要素の表示・非表示を切り替える方法【サンプル有】 | キノコログ

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

・ご自身のサイトに組み込んで自由にお使い頂けます。

・もし、カスタマイズのやり方などで、記事の中でコードを紹介する場合には、参考ページとして、このページ（https://www.bambi.pro/entry/hatena-mokuji-jquery）へのリンクを紹介してください。
（無断で何の紹介もなく掲載されているのを見つけると悲しくなってしまいますので、どうぞよろしくお願いします！）

はてなブログ運営やアフィリエイトにおすすめの記事★

はてなブロガー必見！アドセンスよりアフィリエイトASPに登録すべき３つの理由

戦略的アフィリエイトのすすめ！雑記ブログを収益化して月々5万円稼ぐ方法