ウラガミ

いわゆるチラ裏

CSSではてなブログの見出しをMarkDownっぽくしてみる

MarkDownで見出しをつけるための記法はテキストの前に「#」をつけるだけ。そして「#」の数で見出しのレベルを表現する。慣れてる人なら「# ○○」で書かれている部分が見出しだと直感的に分かるし、レベル(階層構造)もすぐに把握できる。

文字サイズや線のみの装飾で見出しのレベルが分かりにくいブログがあるけど、MarkDown記法だとすぐに分かる。そんなわけで、このブログの小見出しMarkDown風にCSSで装飾してみることにした。(HTMLをMarkDown風に表示するという逆転の発想)

具体的には、H2の前に自働で「## 」という文字列を挿入、H3の前には「### 」を、という風に文字を追加するってことです。

こういう

ことね。

これなら階層が分かりやすいし、見た目もシンプル。

実装

実装するには以下のコードをカスタムCSSなどに書けばOK。

.entry-content h2:before {
  content: "##";
  color: #aaa;
  margin-right: 4px;
}

.entry-content h3:before {
  content: "###";
  color: #aaa;
  margin-right: 4px;
}

.entry-content h4:before {
  content: "####";
  color: #aaa;
  margin-right: 4px;
}

はてなブログの推奨してる見出しのレベルはおそらくH3からなんだけど、私はH2から使ってる(記事タイトルがH1なのにその下がすぐH3って変じゃない?)ので、それに合わせた。


前も書いた(はてなブログテーマ「MarkDown Fū」の紹介(と、書き手と読み手の距離を近づけること))けど、書く時と読む時のデザインの差異を少なくすることで、読む時の印象を考えながら書きやすくなる効果もある。たぶん。

で、これを応用したのがこないだ投稿したはてなブログのテーマ「MarkDown Fū」だったりします(宣伝)

広告を非表示にする