はてなブログでスマフォ(iPhone)向けページのBlockquoteタグのCSSをカスタマイズするコツ

モニュメントバレーの夜明け　Dawn in Monument Valley Photo by Yuya Sekiguchi

はてなブログで、スマフォ向けページのCSSをカスタマイズするには、設定画面から「headに要素を追加」の中にStyleタグを追加する必要があるのは、ご存知の方も多いと思います。

実は今回、スマフォ向けページのBlockquoteタグを少しカスタマイズしようと思ったのですが、作業していたらカスタマイズにコツが必要なことが判りましたので、ご紹介しますね。
（かなり限定的な内容だなぁーとか、ツッこまないでね^^;）

概要

２つのコツがありますので、まずスクショで要点を示しますね。

20140414023724

１．CSSの定義には#containerを使う

一つ目のコツは、スマフォ向けページのBlockquoteタグのCSSを定義する時は#container(idセレクタ)を使う、というものです。

最初は .entry-content(classセレクタ)を使って定義していたのですが、PC向けページでは表現されるものの、スマフォ向けページでは定義したCSSが全く動作してくれませんでした。

そこで、iPhone用のWebインスペクタを確認しながら、スマフォ向けページでもBlockquoteタグのCSSが動作するセレクタを探してみると、どうやら #container を指定してCSSを定義すると動作することが判りました。

２．Blockquote の pタグに上下のマージンが定義されていた

スマフォ向けページでBlockquoteタグのCSSが動作するようになったのも束の間、下のスクショのようになぜか文章の上下が空いてしまいました。

20140414023726

最初はBlockquoteタグ側のpaddingに原因がある、と思い込んでいて、いくら修正しても変化がなく時間ばかりが過ぎていき、正直もう寝てしまおうかと思ってましたw

けれども、iPhone用のWebインスペクタを確認すると、どうやらBlockquoteタグ内のpタグに上下のマージンが設定されている様子。なるほど、これではいくらBlockquoteタグのpadding設定を変えても、反映されないわけです。

20140414023725

ということで、２つ目のコツは、Blockquoteタグ内のpタグのマージンを適宜再設定する、ということです。

まとめ

最終的に、スマフォ向けページのBlockquoteタグのCSSをカスタマイズするコツは、

CSSの定義には#containerを使おう
Blockquote の pタグマージンを適宜再設定しましょう
iPhone用のWebインスペクタがとても便利！

の３点です

また、今回私が設定したCSSのソースを載せておきますので、参考になれば幸いです。

<style>
/* 引用のカスタマイズ */
#container blockquote {
  border:0;
  border-left:5px solid #ddd;
  background: #fff;
  padding: 3px 0 3px 10px;
  margin: 5px 0 5px 0;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}
#container blockquote p {
  margin: 0;
}