初めに 『はてな記法モード』と『Markdownモード』の2つの編集モードは『見たままモード』と違い、プレビューしないとブログでの表示イメージが確認できません。 そのため”リアルタイムプレビュー”という機能があるのですが、このリアルタイムプレビューがまた微妙で、自分のブログのCSSが適用されないため、本来の見た目とまったく違って見えてしまいます。 自分は常々『これ、なんとかならんのかなぁ』と思っていたんですが、たまたまリアルタイムプレビューにCSSを適用する方法を発見した*1ので紹介します。 リアルタイムプレビューにCSSを適用する方法 '14/03/29追記　記事訂正についてのお詫び いつの間にか、この記事で書いたことが効かなくなっていたのですが、久しく自分のブログを見ていなかったため気づくのが遅くなりました……。すみません。 原因は、はてなブログ側のCSSリンクURLが変更になり、以下

はてなブログで「デザインテーマコンテスト」が開催されています！ オリジナルデザインを投稿してAmazonギフト券を当てよう！ 「はてなブログ デザインテーマコンテスト」開催 - はてなブログ開発ブログ 使われている"id"や"class"がわかっていると デザインしやすいのでザックリさらってみました。 おおよそこんな感じ。 body（トップページで.page-index、記事ページで.page-entryが追加）div#globalheader-containeriframe#globalheader（ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど]）div#containerdiv#container-innerheader#blog-titlediv#blog-title-inner（タイトル画像）h1#title（ブログ名）h2#blog-description（