この間追加されたはてなブログの目次機能。どのモードでも、[:contents]と書き込むだけで目次がつくれるので、「凄い！」って思ったしとっても便利になりましたよね！ 今まで目次を自動生成するコードもあったのですが、特定の説明記事やリスト記事にだけ入れたいなと思っていたので、半ば諦めていました( ；´Д｀) それにちょっとコードを足すとグッと使いやすくなるので、いろいろとサンプルを紹介したいと思います。 はてなブログユーザー向けの記事になります。 CSSでできるはてなブログ目次のカスタム リスト表示を番号にする 見出しの一部を消す 小見出しを消す 中見出しも消す 「目次」という言葉を入れる 目次部分に背景色をつける 文字の大きさを、少しずつ小さくしている 段の横幅を調整 jQueryでできる目次カスタム スムーズスクロールにする 最初は隠しておいて、クリックしたら表示するようにする まとめ

前回はてなブログの目次デザインをカスタマイズしましたが、今回は目次を表示・非常にするボタンの設定方法を紹介します。 ブログに動きが出るので見た目も使い勝手も格段にあがるはずです。作業はコードをコピーするだけで簡単に設置が出来るのでぜひ試してみてくださいね。 はてなブログの目次を折りたたむ（開閉式にする）方法 WordPressでは当たり前の機能ですがはてなブログは付いていないんですよね。その為カスタマイズをして実装します。 手順を作業ごとに画像付きでまとめたので紹介していきます。 [1] jquery（ジェイクエリー）を設定 はてなブログを始めた当初はjqueryの設定をしていないと思うのでコードを登録します。 jqueryを簡単に説明すると、ブログに動きをつける時に使うシステムのことです。例えばページの移動を滑らかにスクロールさせたりする事が出来たり、今回紹介する目次の表示・非常時が設定

はてなブログの目次のカスタマイズ★についてはこちらで解説していますが、 今回はjQueryを使って自動で開閉式にする方法です。 開閉式とは、↓↓これです！ このカスタマイズの特徴 １）どのテーマでも大丈夫！ ２）自動的に開閉式にできる！ 目次の表示切り替えのコード（jQuery/CSS） jQuery/CSSのコード コードを貼り付ける場所 コードの解説＆使い方（jQuery/CSS） jQueryコードの解説 CSSコードの解説 コードの公開についてのお願い はてなブログでは、編集画面で記事の「目次」を簡単に追加することができますよね！ ↓この機能 記事の「見出し」を設定することで、自動的に見出しを階層にして見やすい「目次」として表示してくれます。 ただし、この目次。 見出しをたくさん使って記事を書くと、目次だけですごく長くなってしまいますよね？ せっかく見やすくするために設置しているの