はてなブログのリアルタイムプレビューに自分のブログのCSSを適用する方法

初めに

　『はてな記法モード』と『Markdownモード』の2つの編集モードは『見たままモード』と違い、プレビューしないとブログでの表示イメージが確認できません。
　そのため”リアルタイムプレビュー”という機能があるのですが、このリアルタイムプレビューがまた微妙で、自分のブログのCSSが適用されないため、本来の見た目とまったく違って見えてしまいます。
　自分は常々『これ、なんとかならんのかなぁ』と思っていたんですが、たまたまリアルタイムプレビューにCSSを適用する方法を発見した*1ので紹介します。
　

リアルタイムプレビューにCSSを適用する方法

'14/03/29追記　記事訂正についてのお詫び
　いつの間にか、この記事で書いたことが効かなくなっていたのですが、久しく自分のブログを見ていなかったため気づくのが遅くなりました……。すみません。
　原因は、はてなブログ側のCSSリンクURLが変更になり、以下のhref="/style/css"が無効になってしまったためです。
　解決方法は、hrefを有効なURLに変更してやればいいのですが、ちょっと手間がかかります。
　まず各自のブログを表示させた状態で、ブラウザの機能を使ってHTMLソースを表示させます。
　そしてblog_styleという文字を検索し、見つかったURLで置き換えます。
　
例）当ブログの場合
href="https://blog.hatena.ne.jp/-/blog_style/11696248318753273899/f6e9ffd297fd52eef5e02f0a09b9801fc500e973"
このURLでhref="/style/css"を置き換える。
<link rel="stylesheet" type="text/css" href="https://blog.hatena.ne.jp/-/blog_style/11696248318753273899/f6e9ffd297fd52eef5e02f0a09b9801fc500e973"/>
が、しかし。それでも以前に比べると記述すべき文字数が多くなってしまったため、本当にこれをやる価値があるのか微妙になりました……。

　新しい記事を作成したら、記事の先頭に以下の2行をコピペしてください。

<link rel="stylesheet" type="text/css" href="/style/css"/>　←現在はこの記述では効果がありません。上記を参照してください。
<div style="background: white;">

　※background: white;の部分で指定している色は、ご自身のブログの文字色に合わせて見やすいよう変更してください。あと、この背景色の指定が不要なデザインテーマもあると思います。その際、この行は削除して構いません。

　たったこの2行を追記するだけで、リアルタイムプレビューにもご自身のブログのCSSが適用されます。

　13/10/12追記：
　これから書くことは『Markdown記法モード』をお使いの方のみ留意していただきたい点です。詳細な理由は以下に書きますが、基本的には<div style="background: white;">は削除する、という意識でお願いします。
　ではその理由です。Markdown記法の仕様として『div要素などのブロック要素で囲われた部分では、Markdown記法は無効になる』というのがあるのですが、はてなブログのエディタでは、なぜかこの仕様が無視される時があります。例えば、下記に挙げた例ではMarkdown記法を使っているのですが、画像を見ていただくとわかるように、先頭にdiv要素があるにも関わらずMarkdown記法が有効（仕様が無視されている）になっています。このため自分はすっかりその仕様のことを忘れて、この記事を投稿してしまいました。ただ記事内容（例えばpre要素が入っている記事）などでは仕様どおり無効になることもあり、どうやらエディタの挙動がおかしい？　ようです。もっとも、この方法自体がイレギュラーなことをやっているだけなので、うまく動いているようならいいですが、基本的には<div style="background: white;">は削除する、という意識でお願いします。そしてその結果デザインテーマによっては文字が見えなくなる場合もあります。自分の確認不足でした。申し訳ございません。

適用例

　まず、CSS適用前のリアルタイムプレビューです。

　次に、上記の2行を追記した後のリアルタイムプレビューです。

　※この画像は、あくまでも自分のブログの場合で、実際は各自のブログのCSSが適用されます。
　

もう一つおまけでTips

　他の方のブログを見ている時『このブログのデザインテーマいいな』と思ったことはありませんか？
　その場合、上記で紹介した行にちょっと手を加えるだけで、そのブログのデザインテーマを、暫定的に記事に適用してみることが出来ます。

　href="/style/css"←これのhref="と/style/css"の間に、その方のブログのトップページのURLを入れるだけです。

　例えば、自分のブログで例を挙げるとこうなります。

<link rel="stylesheet" type="text/css" href="/style/css"/>
　　　　　　　　　　　　　　　　　　　　　　　　　↓
<link rel="stylesheet" type="text/css" href="https://bnorider-loose.hateblo.jp/style/css"/>

　まったく同じになるわけではありませんが、テーマストアのプレビューよりも気軽に試すことが出来ますよ。
　