読者です 読者をやめる 読者になる 読者になる

たまには部屋をかたづけようよ

部屋を片付けせなあかんと思いつついつも放置プレイ。そんな自分の日々の想いをつづった日記系ブログですよ?

最近書いた記事

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

ブログについて

f:id:BNorider:20131012140417j:plain

初めに

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

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

'14/03/29追記 記事訂正についてのお詫び
 いつの間にか、この記事で書いたことが効かなくなっていたのですが、久しく自分のブログを見ていなかったため気づくのが遅くなりました……。すみません。
 原因は、はてなブログ側のCSSリンクURLが変更になり、以下のhref="/style/css"が無効になってしまったためです。
 解決方法は、hrefを有効なURLに変更してやればいいのですが、ちょっと手間がかかります。
 まず各自のブログを表示させた状態で、ブラウザの機能を使ってHTMLソースを表示させます。
 そしてblog_styleという文字を検索し、見つかったURLで置き換えます。
 
例)当ブログの場合

href="http://blog.hatena.ne.jp/-/blog_style/11696248318753273899/f6e9ffd297fd52eef5e02f0a09b9801fc500e973"

このURLでhref="/style/css"を置き換える。

<link rel="stylesheet" type="text/css" href="http://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適用前のリアルタイムプレビューです。

f:id:BNorider:20131012140416j:plain

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

f:id:BNorider:20131012145321j:plain

 ※この画像は、あくまでも自分のブログの場合で、実際は各自のブログの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="http://bnorider-loose.hateblo.jp/style/css"/>

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

最後に

 ちょっと手間がかかってしまいますが、これでリアルタイムプレビューがますます使いやすくなると思います。
 これが少しでも、みなさんのお役に立てれば、こちらとしても幸いです。

 最後になりますが、記事を公開するときは追記した2行を消すのを忘れないようにしてくださいね。

*1:本来は『見たままモード』の『見たまま編集』画面でこのことを実現しようとしていて、そのついでにわかった

テーマストア制作用サンプルエントリーをMarkdownモードと見たままモード用に作ってみた

ブログについて
f:id:BNorider:20131009192126j:plain

 こんばんは。先日、会社の健康診断を受けてきたBのりだーです。そしてその際、胃の検診がありバリウムを飲んだんですが、そのバリウムがなんとイチゴ風味だったんです。
 だからバリウムを飲む嫌な気分が、ほんのちょっと安らいで、ほんのちょっとだけ幸せを感じました。
 ま、そんな前置きはどうでもよいですね(笑)

 それはさておき、ここのところずっと写真ネタが続いていたので、たまには違うネタで攻めてみたいと思います。今回は、はてなブログにおける編集モードに絡んだネタです。

続きを読む

『今しかやれないことを今やる』ということ

写真

f:id:BNorider:20131003060556j:plain
Canon IXY 600F

 ある日の朝の通勤途中のことだった。太陽が昇りつつある東の空をふと見てみると、この写真の風景に出会った。

 空は青く、しかしまだ太陽が昇り始めて間もないため、地平線にはまだ朝焼け色が残っている。
 このグラデーションがとてもきれいで、実はこの時、電車の時間が迫っていてあまり時間がなかったにも関わらず、思わず立ち止まり急いでコンデジを取り出し、この風景を写真に収めた。

続きを読む

この道を通って家に帰ろう

写真 東日本大震災のその後

f:id:BNorider:20130923142642j:plain
CONTAX TVS DIGITAL モノクロJPEG撮影

 前回のエントリ記事(未来に続く希望の道)の写真を撮った後、停めていた自転車にまたがり帰ろうとした時、その目の前に広がる風景がふと目に留まり、思わず写真に収めたくなった。そうして撮影したのが冒頭の写真だ。

 でもなぜ、この風景を撮りたくなったのだろう?

続きを読む

未来に続く希望の道

写真 東日本大震災のその後

f:id:BNorider:20130923142215j:plain
CONTAX TVS DIGITAL モノクロJPEG撮影

 ここは前回のエントリ記事(津波被害に抗えなかった木)の場所から500mくらい離れたところにある、海岸沿いの堤防の上から撮った写真だ。
 この堤防は東日本大震災の津波で破壊されたのだが、被災後『仙台湾南部海岸堤防復旧プロジェクト』という計画により急ピッチで復旧がなされ、今年の3月に完成したばかりだ。

 そして自分は震災後初めてここに来た。

続きを読む

津波被害に抗えなかった木

写真 東日本大震災のその後

f:id:BNorider:20130923141229j:plain
CONTAX TVS DIGITAL モノクロJPEG撮影

 ほとんど枯れかかってしまっている3本の木。ここは宮城県にある仙台空港そばの風景だ。
(写真中央奥に、波打っている黒い屋根が写っているのがわかるだろうか? ここが仙台空港だ)

続きを読む

置いてきぼりの木馬

写真

f:id:BNorider:20130527150205j:plain
DMC-GF1 20mm RAWモノクロ現像
 周りには雑草が生い茂った荒地の中、ぽつんと残された木馬。

 東日本大震災以前、ここにはアパートがあり、この木馬はそのアパートの小さな遊び場に設置されていたものだ。

続きを読む

逆境に負けない木

写真

f:id:BNorider:20130920064836j:plain
IXY 600F
 ここは宮城県仙台市中心部を流れる広瀬川というところだ(ちなみに写真中央の奥に写っている場所が、市中心部にあたる)

続きを読む
広告を非表示にする

自分が撮りたかったセカイ

写真

f:id:BNorider:20130915053818j:plain
DMC-LX3 RAW現像
 たまたま朝早く目が覚めた日があった。その時、外は既に明るかったが、日の出はまだのようだった。

 窓から外を眺めると少し霧が出ていて、ふと自宅そばの公園の木々を見ると、それらが霧で霞んでいい感じに見えていた。

続きを読む

祖父母の家にあった祠の話

写真

f:id:BNorider:20130919064958j:plain
IXY 600F
 まず最初にお断りしておく。自分はこの写真を明らかな失敗写真だと思っているが、これが今回の話のいいきっかけになると思いあえて載せた。

続きを読む

↑ページトップへ