【はてなブログ】Markdownで記事内にCSSを書く方法2017-01-30【はてなブログ】Markdownで記事内にCSSを書く方法はてなブログこんにちは、煮卵です。はてなブログのMarkdown記法で、なぜかstyleタグが除去される動作への対策です。したらわたしが正しい書き方を知らないだけかもしれませんのでご了承ください。red;}</style>実際の表示↓ここを赤文字にしたい赤文字になっていないですね(2017/1/30時点)。はてなブログのMarkdown入力では<style>タグが無視(除去)される仕様のようです。下記のように書くと<style>タグが除去されず、記事に反映されます。red;}</style>実際の表示↓ここを赤文字にしたい実は上記以外にもいろいろな書き方ができます。ルール:<style>タグの前(同じ行内)に、>が存在しているとstyleが除去されないという挙動のようです。はてな記法の>によるシンタックスハイライトやaa記法の影響ではないかと推測。個人的には見た目に影響する<br/>などを置くよりは、<span>で囲むのがオススメ。HTML的にもそれほど不自然ではありません。不要な<span>ではありますが。はてな記法のように>だけ置くのもおすすめしません。このハックがはてなブログ側で対処された場合に、表示崩れなどの恐れがあります。使いどころ(style属性でよくない?について)普通のCSSならstyleタグを使わなくてもstyle属性で書けちゃいます。red;">ここを赤字にしたい</div>実際の表示↓ここを赤字にしたいだったら<style>タグいらなくね?と思われるかもしれませんが、CSSにはstyle属性で書けないものがあります。::before、::afterなどの疑似要素です。最近よく見る吹き出し形式。::after使っとるで。こちらの記事を参考に活用している人も多いと思います。わたしも使わせてもらっています。shiromatakumi.hatenablog.com下記のようにアイコン画像の指定に::afterが使われています。{background-image:url(画像のURL);}吹き出しのアイコン画像のURLを入れるのですが、特定の記事だけで登場させたいアイコン画像を、ブログ全体設定であるデザイン→カスタマイズ→デザインCSSに書くのはできれば避けたい。(逆によく登場するアイコンは全体設定に書く)となると、その記事内に書くのが自然ですね。そんな時はこの書き方の出番です。先ほどの青鬼の吹き出しはこうなります。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;に置換されてしまい、ただしくフォントが適用されません。属性の方に書きましょう。映...こんにちは、6歳の女の子、3歳の男の子をもつアラフォーのお...2019-06-186歳の長女に性について絵本で読み聞かせした。Gray」をhttpsでも使う方法はてなブログがhttps対応しました。(1)月別アーカイブ参加グループ育児・子育てAmazon.co.jpアソシエイトはてなブログをはじめよう!uchitenさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。