【はてなブログ】Markdownで記事内にCSSを書く方法

こんにちは、煮卵です。

はてなブログのMarkdown記法で、なぜかstyleタグが除去される動作への対策です。

もしかしたらわたしが正しい書き方を知らないだけかもしれませんのでご了承ください。

はてなブログのMarkdownで記事内に<style>タグを書いても除去される
Markdownで記事ごとにCSSを入れ込む方法
使いどころ（style属性でよくない？について）
注意点
おわりの一句

はてなブログのMarkdownで記事内に`<style>`タグを書いても除去される

<div class="hoge">
ここを赤文字にしたい
</div>

<style>
.hoge {
  color: red;
}
</style>

実際の表示↓

ここを赤文字にしたい

赤文字になっていないですね（２０１７/１/３０時点）。はてなブログのMarkdown入力では<style>タグが無視（除去）される仕様のようです。正直やめてもらいたい。

Markdownで記事ごとにCSSを入れ込む方法

下記のように書くと<style>タグが除去されず、記事に反映されます。

<div class="foo">
ここを赤文字にしたい
</div>

<!-- styleをspanで囲む -->
<span><style>
.foo{
  color: red;
}
</style></span>

または

<div class="baa">
ここを赤文字にしたい
</div>

<!-- styleの前にspanを置く -->
<span></span><style>
.baa{
  color: red;
}
</style>

実際の表示↓

ここを赤文字にしたい

実は上記以外にもいろいろな書き方ができます。

ルール：
<style>タグの前（同じ行内）に、>が存在しているとstyleが除去されない

という挙動のようです。おそらく、はてな記法の>によるシンタックスハイライトやaa記法の影響ではないかと推測。

個人的には見た目に影響する<br/>などを置くよりは、<span>で囲むのがオススメ。HTML的にもそれほど不自然ではありません。不要な<span>ではありますが。

はてな記法のように>だけ置くのもおすすめしません。このハックがはてなブログ側で対処された場合に、表示崩れなどの恐れがあります。

使いどころ（`style`属性でよくない？について）

普通のCSSならstyleタグを使わなくてもstyle属性で書けちゃいます。

<div style="color: red;">ここを赤字にしたい</div>

実際の表示↓

ここを赤字にしたい

だったら<style>タグいらなくね？と思われるかもしれませんが、CSSにはstyle属性で書けないものがあります。::before、::afterなどの疑似要素です。

例えば、最近よく見る吹き出し形式。こんなの。

::after使っとるで。

こちらの記事を参考に活用している人も多いと思います。わたしも使わせてもらっています。
http://shiromatakumi.hatenablog.com/entry/fukidashishiromatakumi.hatenablog.com

下記のようにアイコン画像の指定に::afterが使われています。

.クラス名::after {background-image:url(画像のURL);}

吹き出しのアイコン画像のURLを入れるのですが、特定の記事だけで登場させたいアイコン画像を、ブログ全体設定であるデザイン→カスタマイズ→デザインCSSに書くのはできれば避けたい。（逆によく登場するアイコンは全体設定に書く）

となると、その記事内に書くのが自然ですね。そんな時はこの書き方の出番です。先ほどの青鬼の吹き出しはこうなります。

<div class="r-fuki aooni">::after使っとるで。</div>
<span><style>.aooni::after {background-image:url(https://lh3.googleusercontent.com/-QVsvW0sTxa0/WI7u7WSU76I/AAAAAAACYxA/DmMxRImTY-4eTgZuaSfKH-mzj8NPfUqfwCE0/s1024/IMG_2113.PNG);}</style></span>