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

はてなブログの目次のカスタマイズ方法はこちら★で解説していますが、

今回は目次を開閉式にする方法です。

↓↓これです！

この記事の目次

はてなブログでは、簡単に目次を設定することができますが、見出しをたくさん使っていると、目次がだらーって長くなってしまうことないですか？

特にスマホで見ると画面ぜんぶ目次、スクロールしてもさらに目次…みたいな。

記事を読んで欲しいのに、延々と続く目次で読者にウンザリされてしまっては大変！
そこで、はてなブログの目次の表示、非表示をクリックで切り替えられるカスタマイズを紹介します！

このカスタマイズの特徴

１）どのテーマでも大丈夫！
２）記事によって決められる！

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

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

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

はてなブログでは目次の機能が予め備わっています。
↓クリックで目次が簡単に入れられます。

編集の中に [:contents] と表示され、公開するとテーマ独自の装飾やカスタマイズした目次が表示されます。

今回紹介するコードは、この[:contents]自体を包むように表示、非表示を切り替えるので、元々のデザインには影響しません。
線の色や背景色などは、変更する箇所を書いてますので、ご自身のデザインに合わせて変更することができます！

２）記事によって決められる！

このカスタマイズでは、記事によって切り替えを使うかどうか決めることができます！

目次を開閉式にするコードではjQueryを使ったコードも紹介していますが、jQueryを使ったコードの場合は、自動的に全部の記事が開閉式になります。

今回紹介するコードでは、HTMLに書き足すので、記事ごとに使うかどうかを決められます。目次が長くなってしまった時だけ、非表示に設定するなどの使い方ができます。

また、jQueryは別の場所のファイルを一旦読み込まなくてはならないので、一般的には、CSSの方が処理が早いと言われています。

★なお、jQueryを使ったコードはこちらから♪
↓

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

それでは、さっそくCSSだけで出来るコードと使い方を説明します。

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

CSSコード

まずは、CSSコード↓↓
（次の章で解説しますので、とりあえずコピペしちゃおう！）

/*== 開閉式もくじ ==*/
.contents_box {
    padding: 10px;
    font-size:1rem;/*タイトルのフォントサイズ*/
    color:#696969;/*タイトルの文字色*/
    background-color:#fff;/*背景色*/
    border:1px solid #696969;/*外枠線- 色*/
}

/*== 開閉文字装飾 ==*/
.contents_box label {
    padding: 5px;
    color:#0000ff; /*文字色*/
    font-size:1rem;/*フォントサイズ*/
    cursor:pointer;
    border-bottom: 1px dotted #0000ff;/*下線*/
}

/*開く*/
.contents_box label:before{
    display: inline-block;
    content: "[ 開く ]";/*"表示"などに変更可*/}
/*閉じる*/
.contents_box input:checked ~ label:before {
     content: "[ 閉じる ]";/*"非表示"などに変更可*/}

.contents_box input{display:none;}
/*最初は非表示*/
.contents_box .hidden_show
{height:0;padding:0;overflow:hidden;transition:0.8s;}
/*クリックでopen*/
.contents_box input:checked ~ .hidden_show
{padding: 10px 0;height:auto;}

CSSコードを貼り付ける場所 

 CSSコードをコピーする場所は
デザイン→カスタマイズ→{}デザインCSS

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

HTMLコード

<div class="contents_box">この記事の目次 
<input id="display" type="checkbox" /><label for="display"></label>
<div class="hidden_show">
<p>[:contents]</p>
</div>
</div>

HTMLコードを貼り付ける場所

HTML編集に切り替えて記事の中の目次を表示したい場所に挿入します。

ほとんどの方が「見たまま編集」でブログを書いていると思います。
私もですが…「見たまま編集」で一旦、目次[:contents]を入れておいて、あとでHTML編集に切り替えた時にその場所に先ほどのHTMLを挿入すると簡単です。

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

CSSコードの解説

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

１）目次を包み込む枠とその背景色、上部に表示される「この記事の目次」のサイズと色が変更できます。
文字のサイズ、デフォルトでは「1rem」となっていますが、これは元の文字のサイズの１倍（つまり同じ大きさ）と言うことです。少し大きくしたい場合は、「1.2rem」２倍の大きさにしたい場合は「2rem」など、調節してみてくださいね♪

背景色と枠は、各自のテーマに合わせて変えてみてください。
例えば、私のブログは元々の目次の色がグレーだったので、それに合わせて背景色をグレーにしています。

下記のような、元々の目次が枠付きのものの場合は、今回紹介しているコードの方の枠を消して使うと良いでしょう！

枠を消す場合は
border:1px solid #696969;/*外枠線- 色*/
↑この１行を削除しましょう。

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

３）４）「開く」「閉じる」の文字の部分です。「表示/非表示」「OPEN/CLOSE」などお好きなように書き換えることができます。

５）６）表示、非表示を切り替える部分です。５）と６）は {  } ←このカッコ内を入れ替えることによって、最初は目次を表示しておいて、クリックされたら非表示に切り替えるようにできます。
その場合は、３）と４）の「開く」「閉じる」も入れ替える必要があります。

HTMLコードの解説

<div class="contents_box">この記事の目次 
<input id="display" type="checkbox" /><label for="display"></label>
<div class="hidden_show">
<p>[:contents]</p>
</div>
</div>

HTMLのコードで書き換えても良いのは「この記事の目次」と言う部分だけです！
記事によって書き換えられるので、タイトルなどにしてもOKです♪♪

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

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

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

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

目次デザインのカスタマイズはこちらからご覧ください↓↓ 

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

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

HTMLとCSSだけ！要素の表示・非表示を切り替える方法

HTMLとCSSだけで簡単に作る。軽量な開く・閉じる切り替えボタン | ただ屋ぁのブログ

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

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

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

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

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