はてなブログの目次を開閉式にする手順【コピペで簡単】

2025-02-23
| No Comments
1

Last Updated on 02-23-25 by Shinichi

はてなブログの目次なおしゃれな開閉式に

はてなブログの目次を開閉式にすることで、ブログ記事がすっきりと見やすくなります。特に、長文の記事では目次が画面を占領してしまうことがあり、開閉式にすることで読者がストレスなく必要な情報を探せるようになります。今回は、実際に私が試してみた方法をご紹介します。

目次を開閉式にカスタマイズするメリット

読みやすさの向上: 目次が折りたたまれているため、冒頭の見た目がすっきりします。
ユーザー体験の向上: 必要な時だけ目次を展開できるので、読者が使いやすい。
デザインの自由度: ブログのデザインに合わせてカスタマイズが可能です。

実際に目次を開閉式にする方法

必要なコードの追加

はてなブログで目次を開閉式にするには、以下のコードを「デザイン設定」の「ヘッダ」または「フッタ」に追加します。

JavaScriptコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
(function($) {
$(document).ready(function(){
        $('.table-of-contents').before('<span class="btn btn-3 btn-3a icon-cart">【目次を開く】</span>');

        $('.table-of-contents').hide();
        var flg = 'close';
        $('.btn').click(function(){
            $('.table-of-contents').slideToggle('slow');
            
            if(flg == 'close'){
                flg = 'open';
                $(this).text('【目次を閉じる】');
            }else{
                flg = 'close';
                $(this).text('【目次を開く】');
            }
        });
    });
})(jQuery);
</script>

適用手順

  1. デザイン設定を開く
    はてなブログの管理画面から「デザイン」→「カスタマイズ」を選択します。
  2. スクリプトの貼り付け
    上記のコードを「ヘッダ」または「フッタ」のスクリプトエリアに貼り付けます。
  3. 保存して確認
    設定を保存し、ブログをプレビューして目次が開閉式になっているか確認します。

実際に試してみた感想

私もこの記事で紹介した方法を試してみました。開閉式の目次は、長文の記事をすっきり見せるだけでなく、読者の利便性も大きく向上します。CSSを適用しても変化がなかったという方も、JavaScriptだけで実現可能なこの方法をぜひ試してみてください。

まとめ

はてなブログの目次を開閉式にすることで、デザイン性や読みやすさを向上させることができます。今回ご紹介したコードを活用して、ぜひブログの魅力をアップさせてみてください！

サイト作成

Web Creation