目次を閉じるボタンの設定方法 - はんこキャプターやぁのん

実は、目次を開くボタン、過去にも設置しています。詳細は以下のリンクから。
開閉式の目次を付けました - はんこキャプターやぁのん

こちらは、閉じた状態の目次を、開いて見られるカスタマイズでした。

でも、内容を俯瞰できるようにする意味で目次を付けているのに、いちいち開くのは面倒。

そこで、開いた状態が初期状態で、そこから閉じたり開いたりできるようにしました。

完成見本
前準備
- バックアップを取る
- jQueryを設定したことがあるか確認
フッタにコードを入力
デザインCSSにコードを入力
感想
- 注意書き
- 見た目について

参考にしたのは下記のサイト。ありがとうございます。

【はてなブログカスタマイズ】『目次』の表示・非表示設定 - zero-point-five

毎度のとおり、自分的にアレンジを加えています。
今回も見た目が違うものが完成しました。
そのままコピペ、が苦手な、面倒くさい性格でございます。

完成見本

f:id:yaanon:20201228023434g:plain

文字をクリック（タップ）すると、目次がぬるっと閉じたり開いたりするようになりました。

前準備

バックアップを取る

設定をいじるので、まずバックアップをしておくと安心です。

記事データをエクスポート
各コードをWordにコピペ保存
お試しサイトへ本番サイトの各コードをコピペ

エクスポートとお試しサイト作成の方法は、「サイトのバックアップとテストサイトの作り方」で紹介しています。（今回はお試しサイトへのインポートまではしていません。）

私の場合、サイトの仕様を変更する際は、一旦非公開の場所で試してみるようにしています。

jQueryを設定したことがあるか確認

jQueryの設定が初めてなら、この設定も行ないます。やったことがあれば飛ばして大丈夫です。

「設定」「詳細設定」「headに要素を追加」に以下のコードをコピペします。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

最新のjQueryの最新のバージョンは、下記のサイトで確認できます。
jQuery Core – All Versions | jQuery CDN

この記事では2020年12月27日時点での最新コードを書いていますが、「jquery-3.5.1」より上に新しいバージョンが追加されていれば、その数字に変えてお使いください。

フッタにコードを入力

「デザイン」「フッタ」に以下のコードをコピペします。

<!-- 目次表示・非表示 -->
<script>
$(function(){
var $Contents = $(".table-of-contents")
$($Contents).before('<span style="font-size: 90%; color: #22B5E6;"><p class="show-area">［▲目次を閉じる▲］</p></span>');
$(".show-area").click(function(){
var $this = $(this);
if($Contents.css('display') == 'none'){
$Contents.slideDown(400),
$this.text("［▲目次を閉じる▲］");
}else{
$Contents.slideUp(400),
$this.text("［▼目次を開く▼］")
};
});
});
</script>

私は表示される文字をアレンジしました。

文字を小さめの水色にしています。サイズを変えたい場合は、「font-size: 」の後のパーセントを、色を変えたい場合は「color: 」の後のカラーコードを、それぞれ変更すれば変わります。

文字を変えたい場合は、3か所の「text(" ")」の中の文字を変えるだけです。

デザインCSSにコードを入力

「デザイン」「デザインCSS」に以下のコードをコピペします。

/* 目次の表示非表示　*/
.show-area{
display: inline-block;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 0;
}

色の設定と思われる記述は、先ほどのコードで設定したので削除しました。

以上で完成です。

これで、目次が邪魔な時だけ閉じてもらえるようになりました。

感想

注意書き

設定できたものの、このコードにはクセがあるようです。

ブログトップの記事一覧ページで、どこかの記事で目次を閉じると、他の記事の目次も自動的に閉じた状態になります。その場合、まだ「閉じる」を押していない記事の表示が、目次が閉じているのにボタンは「閉じる」となっている、という、少し変な感じになります。まぁ、見た目以外支障はなさそうなので、そのままにしています。

見た目について

前回設定したものは、「ボタン」のカタチをしていましたが、今回はボタン型にはできませんでした。
その見た目を補うためにカッコ [ ] を付け、視覚的にわかるように色付けしてみました。

このサイトのカスタマイズは、見よう見まねでやっているだけですので、もしおかしな部分があれば、ご指摘いただけますと幸いです。

はてなブログに投稿しました #はてなブログ
目次を(再び)カスタマイズしました。
開いた状態が初期状態で、閉じたり開いたりできるようにしました。
-
目次を閉じるボタンを更新しました - はんこキャプターやぁのんhttps://t.co/E1kgk8Jdu1
— やぁのん (@yaanon_21) December 27, 2020