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

2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。

当ブログでははてなブログ時代、ブログテーマを「Minimalism」を使用していました。

シンプルなデザインで非常に見やすい構成となっています。

記事のTOPに出てきて、その記事にどのようなことが書いてあるのかを読者に伝えるための『目次』。

記事内容によっては、長くなり目次の数が多くなる場合があります。

その時に、目次を非表示にしたいと思っていても、 

『目次』の表示・非表示を設定したいけど、どうやって設定すればいいのかわからない。
設定が難しそう・・・

このような方は多いのではないでしょうか？

でも今回紹介するやり方だと、

マサ☆ミカ

必殺！コピペ！！
コピペで簡単だから遠慮なく使ってい〜よ〜。

と言うことで備忘録もかねて、

今回は、『目次』の表示・非表示設定について紹介します。

「マサ☆ミカ」さんて誰？というのはこちらの記事で

マサ☆ミカで〜す！しくよろ〜！（運営担当） 当ブログ運営担当のマサ☆ミカです。（当ブログオリジナルキャラ）

はてなブログカスタマイズ【Before→After】

今回ご紹介するアレンジでBefore→Afterどうなるのかイメージになります。

Before

設定前のBeforeです。（当ブログより）

大見出しだけで４項目とそれほど多くはないのですが、スマホ画面で見ると画面いっぱいになってしまいます。

After

今回紹介する方法でアレンジするとこのようになります。

上部に、 『Contents[非表示]』と表示されます。

そして、[非表示]をクリックすると、このように表示されてすっきりします。

はてなブログカスタマイズ【表示・非表示設定方法】

では具体的な設定方法について説明します。

以下の手順で設定しましょう。

jqueryを設定

jqueryは、ブログに動きをつけるためのシステムです。

使えるようにする設定が必要なので設定しておきましょう。

以下のコードをコピーします。

コピーしたコードを、

はてなブログ管理画面→設定→詳細設定→「headに要素を追加」欄に貼りつけ。

「変更する」をクリック。

表示・非表示設定方法

①デザイン→フッタにコードコピペ

表示させるための設定です。

以下のコードをコピーします。

青字の部分の文言を変更することで好きな文言に変更できます。

続いて、はてなブログの管理画面から、

管理画面→デザイン→フッタにペーストしてください。

②デザイン→デザインCSSにコードコピペ

見た目と「目次を非表示にする」の位置を調整するための設定です。

以下のコードをコピーします。

続いて、はてなブログの管理画面から、

管理画面→デザイン→デザインCSSにペーストしてください。

以上で設定は完了です！

まとめ

以下まとめになります。

色々なブログをみていると、ほどんどの方が設定されています。

ユーザー目線、筆者目線で使い勝手がよくなります。

簡単に設定できるので、やってみてください！

（参考）はてなブログアレンジ関連記事 

あわせて読みたい

【はてなブログアレンジ】『目次』のアレンジ | 記事中の『目次』表示の変更方法 本記事では、はてなブログで記事中の『目次』表示の変更方法をを紹介します。コピペで簡単にできるので、所要時間は1分もかかりません。色や文言は自由に変更できます。