【日報 2016/11/22版】 「デーモン閣下「歌も歌うんですね」と言われ“今”を感じる」他
「踊り場」がバズる現代日本のツイッター。謎。
更新
はてブ
佐々木大輔@中の人 - ちょっとしか違わないのに、ずいぶん違うのはなぜなのか - LINE BLOGの新しいところ - Powered by LINE
“スマホをにぎってLINE BLOGのアプリに向かっているときに、自然と素直な心情が湧き上がってきてそれが適切に表現できるとしたら、こんなにうれしいことはありません。”
「calm editor」アップデート。MarkDownプレビュー、ショートカットキー実装など
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ū」の紹介（と、書き手と読み手の距離を近づけること））けど、書く時と読む時のデザインの差異を少なくすることで、読む時の印象を考えながら書きやすくなる効果もある。たぶん。
