CSSでスタンプ風アクセントをつくる

CSS

小見出しのアクセントとして、その左上にスタンプを捺したいと思い、CSSで書いてみた。
やりたいのは下のようなデザインだ：

こんな風に、

というものをつくりたい。
という訳で、この記事ではこのようなスタンプ風アクセントをCSSでつくった経緯を、3段階で紹介したい。何故3段階かと言えば、僕がこれをつくるのに苦労したのが

の2点だったので、それ以外の部分をまずさらっと説明した上で、この2つを説明しようと思ったからである。

はてなダイアリーのmine-TeXの埋め込みの見栄えを良くする。

CSS

などというタイトルを書いてしまったが、要ははてなダイアリーの詳細デザイン設定でCSSを書きますという、ただそれだけです。自分がCSSド素人だったので、同じCSSド素人の人がサクッと設定できるように、コードを書いておきます。これだけです：

img[class="tex"]{
vertical-align:middle;
}

これだけで、文中の埋め込みTeXが垂直方向に中央揃えになり、ラインがガタガタしなくなります。
例えば $x_i$ や $\sum_{k=1}^n k^2 = \frac16n(n+1)(2n+1)$ てな感じです。