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

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

[ftmaccho]

ブログ更新っ！

[rakutenpocket2]

いつもカスタム参考にさせていただいています！この目次すごくよさそうですね！

[scfedxxxx]

良い感じに背景色設定できないかと苦慮していたのでとても助かりました！いつも参考にさせていただいています。

[riekoand]

ありがとうございます！早速つかわせていただきました＾＾

[ruura]

こちら参考に目次をカスタマイズできました！ありがとうございます☆

[coccopigeon]

綺麗にまとまっていて見やすく助かりました！参考にします！

[higurashi-note]

わかりやすく助かりました。ありがとうございます。

[mygreenhome]

やってみます！ありがとうございます！

[zensoinspiration]

参考になりました。ありがとうございました。

[asakumamasaru]

はてなブロブ「目次」機能をCSSでカスタマイズ

[jarmusch]

長文記事が多くなっていたので目次が折りたためるのは助かります！ありがとう

[manabeya-wug]

とっても分かりやすくて使わせていただき参考にさせていただきました！ありがとうございます！

[zaq00555]

そのままだとデザインが崩れてしまうので、こちらを元にカスタマイズしました。

[hazama03]

使わせていただきます。

[rikunomaou]

はてなの例の目次が、さらに使いやすくなる！

[marumaru26s]

もくじ

[meganeshufu]

ありがとうございます！

[investravel]

ありがとうございました！

[tukinasikotonoha]

前々から、番号付きリストにできないか悩んでいたので凄い助かります！ありがとうございました。

[miyamarin]

おかげさまでページが更新される時に一瞬見える緑色のページが消えました。ありがとうございます。今回は目次をつけてみようかと挑戦中です。参考にさせていただきます！

[tarubomirubo]

とっても分かりやすいです！！

[ryuponn]

大変、参考になります。ありがとうございます

[momonari0565375]

あとで読む

[tsukikosan]

目次作成の参考にさせていただきました！ありがとうございました。

[sotsusotsu]

お借りします

[kmsr226]

参考にします。ありがとうございました。

[sue445]

昨日ここを参考に目次のcss変えたんだけどだいぶ見やすくなった！

[opiyotan]

めちゃくちゃ参考になりました。ありがとうございます!!　デザインもオシャレで素敵です

[designlife]

背景色を入れるのに、一手間省けました！本当にありがたい。

[cardmics]

なるほど。display noneでh5を消せば見栄えがいいのか。Google先生的にはちょっと心配だけど、見栄えは非常に良い！

[kobabiz]

おお、便利そうですね！