うち天

子育てで日々挫折するおじさんのブログ

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


こんにちは、煮卵です。

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

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

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

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

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

実際の表示↓

ここを赤文字にしたい

赤文字になっていないですね(2017/1/30時点)。はてなブログの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使っとるで。

こちらの記事を参考に活用している人も多いと思います。わたしも使わせてもらっています。
shiromatakumi.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>

画像(background-image)以外のCSSはデザイン→カスタマイズ→デザインCSSに書いてあります。<p>でなく<div>を使っているのは使用中のデザインテーマの影響で<p>だとスマホで吹き出しが崩れるためです。ふだん<p>を使っているひとはそのままで大丈夫です。

あとはstyle属性より見やすく書けるってのもこの書き方の利点ですね。

このように、吹き出しに限らず、その記事だけに適用したいCSSがある場合、Markdownで書いている人はこの書き方で実現できます。

注意点

ただし注意点があります。

ひとつめは、この書き方が使えなくなる可能性があるという点。わたしとしては<style>タグの除去を廃止して欲しいところですが、逆にこちらのハックが対策される可能性もあります。見たままモードでは書けるのでMarkdownでも書けていい気がしますが……。

もうひとつ。
この書き方ではダブルクォート、シングルクォートが使えません。実体参照にエスケープされるためです。font-familyの指定で、フォント名が日本語の場合にダブルクォートで囲みますが、&quot;に置換されてしまい、ただしくフォントが適用されません。属性の方に書きましょう。

おわりの一句

はてなさん
styleタグを
消さないで

関連記事

blog.uchiten.info