はてなブログで開閉式の目次を設定する方法【図解あり！】

ブログをまとめている際に項目が多くなり、目次を付けたが目次が画面いっぱいに表示されて邪魔に感じたことはありませんか？

そもそも、「目次ってどうやって設定するの？」という方もおられるかと思います。

ユレオももちろんそんな一人で、目次はHTMLで地道に設定するものだとばかり思っていました。

調べたら目次なんぞものの2秒で設定できることを知り、「はてなブログすげー」と驚きました。

調子に乗っていろんな記事に目次をつけていたのですが、見出しが多い記事では目次が画面を占有してしまい、邪魔に感じたので開閉式にできないかと思い調べてみました。

そんなわけで、今回の記事では開閉式の目次の設定方法をご紹介いたします。

●スポンサーリンク

◆記事の目次◆

設定手順１　ＰＣ版の開閉式目次の仕組みの設定
設定手順２　スマートフォン版の開閉式目次の仕組みの設定
設定手順３　記事に目次を設定する

設定手順１　ＰＣ版の開閉式目次の仕組みの設定

この設定方法は以下のサイトを参考にさせていただきました。

Yukihy Life

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

https://www.yukihy.com/entry/hatenablog-table-of-contents-custom

この間追加されたはてなブログの目次機能。どのモードでも、と書き込むだけで目次がつくれるので、「凄い！」って思ったしとっても便利になりましたよね！今まで目次を自動生成するコードもあったのですが、特定の説明記事やリスト記事にだけ入れたいなと思っていた…

１：はてなブログの　デザイン→カスタマイズ→ヘッダ→タイトル下　を開きます。

2:タイトル下に以下のコードをコピーします。

<script><script type="text/javascript" src="https://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>

３：はてなブログの　デザイン→カスタマイズ→デザインCSS　を開きます。

４:デザインCSSに以下のコードをコピーします。

.table-of-contents{
display: none;
}
.show-area{
display: inline-block;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 0;
color: blue;
}

設定手順２　スマートフォン版の開閉式目次の仕組みの設定

１：はてなブログの　デザイン→スマートフォン→ヘッダ→タイトル下　を開きます。

２：タイトル下に以下のコードをコピーします。

<style type="text/css"> 
 .show-area{
 color: #47a1e5
 }
</style>
<script><script type="text/javascript" src="https://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>