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

最近ブログカスタマイズにはまっているゆきひーです。「またかよ！？」うっす。またっす。 はてなブログの文字をカスタマイズする際に、こんなのがあったら便利だなあと思っていたので作ってみました。 はてなブログ文字の構成図 はてなブログのidとかclassとかを直感的に分かりやすいような構成図を作ってみました。今回は文字の編集用につくったので、文字に関するのを抽出しています。全部はないのですが…。 下のキャプチャは、はてなブログの無料テーマの中でも最もシンプルだと思われる「blank」に、それぞれの文字に関するidやclassをふったものです。 ちょっと、いやだいぶ見にくくてすみません…。今回は僕も使わせていただいている「blank」を元にやりましたが、どのテーマでもはてなブログならだいたい同じではないかと思います。間違いあったら教えてください。 注意点としては、「.」「-」「#」「空白」などを忘

9/3追記：その他のカスタマイズ(サイドバー固定など)を増やしました。同じモジュールを並列に使いたい方もわかるように文を若干変更しました。 jQueryを使ってみると本当にいろいろとできるなあと実感しています。今回はそれを使って、サイドバーをタブメニューにしてみようと思います。 難易度はちょい高めです。 実装図 特徴・カスタマイズの注意点 特徴 カスタマイズの注意点 カスタマイズのやり方 手順１　タブに加えるものを決める 手順２　サイドバーをつくる 手順３　タブメニューのjQuery 補足　カスタムHTMLを入れる場合 手順４　CSSでデザインする その他のカスタマイズ タブメニューの下に余白を開ける タブになるまでに一瞬崩れるのを防ぎたい サイドバーに固定したい ブラウザサイズを狭めると、挙動がおかしい タイトルとモジュール部分が近くなっちゃうor離れすぎちゃう 固定された瞬間横幅が広が

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

2015-08-24 はてなブログのデザインを自分仕様に！カスタマイズ方法をまとめました。 気づけばこのブログを始めて１ヶ月が経ちました。 こうして更新できるのも、ひとえにキーボードを叩きまくっている自分自身のおかげ……ではなく、読んでくださってる皆さんのおかげです、ホントに。ありがとうございます！ところで、更新を続けるにつれブログにも少しずつ愛着が湧き始め……デザインも自分仕様にしたいなーと思い、先日ブログデザインを変更しました。そこで、私がカスタマイズした箇所をいくつか備忘録として残しておこうと思います。どなたかの参考になれば幸いです。 はじめに このブログは、公式テーマの「Report」を元にしています。別のテーマを元にしてる場合、もしかすると、ここで紹介するCSSをコピペしたときに表示が崩れるかもしれませんので調整をお願いします。 デザインについて 配色やデザインが苦手な方へ。と