はてなブログの「Minimalism」で、目次を表示・非表示（隠す）できるカスタマイズ方法

はてなブログのデザイン「Minimalism」を使用しているこのブログ。

最近、ブログのデザインを集中的にカスタマイズしています。

今回は、目次のカスタマイズ方法について、ググって実践してみました。

f:id:kayoko_cafe:20200521110817j:plain

はてなブログの目次機能について
目次をシンプルなデザインにして、表示・非表示できるようにカスタマイズする方法
- ① CSSで、デザインと表示/非表示の設定をする
- ②目次の表示/非表示の機能のHTMLを設定

↑今回の目次のカスタマイズで、完成した目次がこれです！

はてなブログの目次機能について

ブログ記事の分量が多くなってくると、見出しもまぁまぁ多くなりますよね。

そんな時は、大見出し・中見出し・小見出しの3種類ぐらいを使って、階層化しながら記事を読みやすくまとめると思うんです。

で、この見出しが記事中に一覧で表示できるのが、目次表示機能です。

はてなブログの初期設定の目次表示機能

私は、今まで記事中にこの目次を表示させたことがなかったのですが。

はてなブログでは、ボタン一つで簡単に目次を表示させることができるんですよね。

f:id:kayoko_cafe:20200521142933j:plain

その方法は、上の画像のように、まず、記事作成画面で記事内に見出しをつけておいて。

記事中の目次を表示させたい場所に、ツールバーにある小さな赤枠の「目次ボタン」をポンと押すと、［:contents］って表示されます。

そして、プレビュー画面に切り替えると、グレーの背景色の目次が表示されると思います。

もちろん、それぞれの見出しをクリックすると、記事中のその見出しの所までワープできます。

デザイン変えたい！＆目次を隠したい！

この、はてなブログの初期設定の目次。

うーん…(ｰｰ;)、って感じに思いまして。

まずは、デザインを変えたい！と。

そして、見出しが3階層まで、しかも見出しが多めにある記事だと、この目次の表示だけで、記事のトップ部分を埋め尽くしてしまいます。

なので、最初は、目次の内容は非表示になっていて、見たい時だけ目次の中身を表示させて、また目次を隠す。

ってことができるようにしたいな、と。

はてなブログの目次のカスタマイズ内容

ということで、今回ご紹介する目次のカスタマイズ内容は、以下の目的の方におすすめです。

目次のカスタマイズ内容

✳︎ 目次を表示したり隠したりできるようにしたい

✳︎ 目次のデザインをシンプルでいい感じにしたい

✳︎ 目次は、大見出し・中見出し・小見出しとも表示させたい

目次カスタマイズの参考サイト

今回の目次のカスタマイズでは、以下のサイトを参考にさせていただきました。

目次のデザイン関係では：

投稿記事内で表示する目次の設定方法 - FOCUS

目次の表示・非表示の設定では：

『目次』をカスタム！【表示】【隠す】機能を追加する方法 - 人生RPG

目次の表示・非表示の設定ができなかった原因：

https://pagain.hatenablog.com/entry/2019/05/14/175812

実は、今回。

「目次を表示・非表示にする設定」が、他サイトを参考にしてもちゃんと再現されなくて。

目次自体が表示されない、というところで1週間もつまづいていました。＿|￣|○

もし、目次の表示・非表示の設定が参考サイト通りにやってもうまくいかない場合は、ぜひ上記3つめの参考サイトをご覧ください！

目次をシンプルなデザインにして、表示・非表示できるようにカスタマイズする方法

では、カスタマイズ方法です！

① CSSで、デザインと表示/非表示の設定をする

今回は、上記のデザインについての参考サイトにある、以下の「目次デザイン」と「隠れる目次のデザイン」のCSSをベースに使わせていただきました。↓

/*はてな目次のデザイン*/
ul.table-of-contents {
    border: 1px solid #ccc;
    padding: 1.2em 1em 1em 2em;
    margin: 0.5em 0 2em 0;
    position: relative;
    background-color: #fff;
  border-radius: 3px;
}
ul.table-of-contents:before {
    content: "Index";
    display: inline-block;
    position: absolute;
    top: -0.6em;
    left: 0.5em;
    background: #fff;
    padding: 0 0.5em;
    font-weight: 700;
    color: #ccc;
}
.table-of-contents ul ul{
    display: none;/*3階層以降を消す*/
}
.table-of-contents li,
.table-of-contents ul{
    list-style-type: none;/*表示一時的に消す*/
}
ul.table-of-contents li:before {
  content: "▼"; /*記号に変更*/
  color: #b0d7fd;
  padding-right: 0.5em;
  font-size: 80%;
  vertical-align: text-top;
}
  }
.table-of-contents ul{
    font-size: 95%;/*h3以降小さく*/
}
.table-of-contents a{
    color:#444;
    text-decoration: none;
}
.table-of-contents a:hover {
  color: #ccc ;/* リンクにマウスを重ねた時の色 */
  text-decoration: underline;
}

/*隠れる目次のデザイン*/
.table-of-contents{
    display: none;
}
.show-area{
    display: inline-block;
    font-size:0.7em;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
    color: #4f96f6;
}

そして、まずこのコードの

.table-of-contents ul ul{

display: none;/*3階層以降を消す*/

}

という部分を削除しました。

これは、小見出し（h3）以下の見出しは表示させない、という意味だと思いますが。

今回のカスタマイズでは、見出し自体を隠すことができるように設定するので。

目次を表示させた時には、ちゃんと小見出しまで全部表示された方がいいかな、と思って、このようにしました。

そして、

ul.table-of-contents li:before {

content: "▼"; /*記号に変更*/

color: #b0d7fd;

の「▼」を「▶︎」に変更して。（マイナーチェンジ笑）

＃以下の6桁のカラーコードの数字を「ffb6c1」に変更しました。

ちなみに、カラーコードは、こちらから見つけられます。↓

WEB色見本原色大辞典 - HTMLカラーコード

で、この変更したコードをまるっとコピーします。

それを、ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。

最後に「変更を保存する」をクリック。

これで、目次のデザインの設定は完了です！

②目次の表示/非表示の機能のHTMLを設定

次に、目次の表示/非表示をさせるHTML設定をします。

先に紹介した、表示・非表示の設定についての参考サイトにある、以下のHTMLをコピーします。↓

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//クリックすると表示される目次
$(function(){
    var $Contents = $(".table-of-contents")
    $($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
    $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') == 'none'){
            $Contents.slideDown(400),
            $this.text("[隠す]");
        }else{
            $Contents.slideUp(400),
            $this.text("[表示]")
        };
    });
});
</script>