注：コピペコードを写す前に、元々のhtmlやcssをメモ張にコピペするなど、必ずバックアップを取っておいてください！！ はてなブログで最近テーマストアを覗いたりしていると、本当に面白くオシャレなテーマが増えてきましたよね。 また多くのテーマがレスポンシブ対応をしてますが、現実にレスポンシブにしている方はあまり多くないと思います。 せっかく優秀なレスポンシブテーマがあるのに採用しない理由として、グローバルナビを後付けで行っているため、それがレスポンシブになっていないというのがあるかなあと。 もちろん、はてなデフォルトのスマホ表示が十分オシャレというのもありますが。 そこで今回は、よくあるWordPressのブログのように、グローバルナビをレスポンシブ対応させ、ブラウザ幅が縮んだらトグルメニューになるようなカスタマイズを紹介します。 ちょっと難易度が高いかもしれません。また、注意点として若干遅

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