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

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

最近書いた記事

はてなブログのリアルタイムプレビューに自分のブログの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="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適用前のリアルタイムプレビューです。

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="https://bnorider-loose.hateblo.jp/style/css"/>

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

最後に

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

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

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

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

f:id:BNorider:20131009192126j:plain

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

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

続きを読む

ブログ更新の頻度落とします

 自分は飽きっぽい性格をしているので、ブログも1日でも休んじゃったらやらなくなる*1という思いがあって、今までは『何でもいいから、とにかく毎日ブログを更新し続ける』ことをやってきました。

*1:過去に何度もそういうことを経験しているので

続きを読む

はてなブログのテーマストアに「fake the Gridly」を投稿しました

f:id:BNorider:20130825200937p:plain 数日前に作成して以来、自分のブログでこのテーマを運用してみて、ある程度仕様が固まったので、fake the Gridly - テーマ ストアに投稿することにしました。

「Gridly」テーマとは?

 このテーマは、本来はWordPress用テーマである「Gridly」(Gridly Theme Demo)を参考にして作成しています。

 詳細は、実際に本家のデモページをご覧になられるとわかると思いますが、このテーマの特徴を簡単にまとめると以下のとおりです。

  • 1ペインのグリッドWebデザイン
  • トップページの1ページ内に、コンパクトに複数の記事が表示される
  • 各記事にアイキャッチ画像を付けることができる
続きを読む

とりあえず気が向いたので、ブログのデザインテーマを作ってみました

 いきなりですが、昨日からデザインテーマを全面的に変えてみました。


 みなさんのブログのデザインテーマを拝見させてもらっていると、結構白地ベースのテーマを使われている方が多いのが目に留まったんですね。

 それと自分はテーマのCSSをいろいろいじってしまったせいで、メニューやら、サイドバーやらごちゃごちゃしすぎな感じが気になってきて、そろそろデザインテーマを変えてみようかなと思ってました。

続きを読む

ブログを始めたきっかけを改めて考え直してみた

 自分がブログを始めて2ヶ月半くらい経つんだけど、ここ1ヶ月くらいはずっと自分のブログのことしか頭になかった。

 「次に投稿するエントリ記事は何にしよう?」とか「新しいブログネタ考えなきゃ」とか。


 でも、1週間くらい前に、ふと思ったのね。

 「自分は何のためにブログを始めたんだっけ?」って。

続きを読む

はてなブログデザインテーマのCSS変更点を紹介するよ(その3)

 #13/8/23追記
 現在はこの記事を書いた当時とは違うデザインテーマを採用しているため、以下に書いてあることは、現在のテーマには当てはまりません。ご注意ください。

続きを読む

はてなブログデザインテーマのCSS変更点を紹介するよ(その2)

 #13/8/23追記
 現在はこの記事を書いた当時とは違うデザインテーマを採用しているため、以下に書いてあることは、現在のテーマには当てはまりません。ご注意ください。

続きを読む

はてなブログデザインテーマのCSS変更点を紹介するよ(その1)

 #13/8/23追記
 現在はこの記事を書いた当時とは違うデザインテーマを採用しているため、以下に書いてあることは、現在のテーマには当てはまりません。ご注意ください。

続きを読む

はてなブログのはてな記法モードでのメリットをもっと有効活用しようよ!

 はてなブログでは、編集モードとして

 の3つを選べるようになってるけど、自分としては絶対に「はてな記法モード」をお勧めしたい!

続きを読む

↑ページトップへ