@tarVolcanoメガネ男子のtarが書くブログです。Sekiguchiはてなブログで、スマフォ向けページのCSSをカスタマイズするには、設定画面から「headに要素を追加」の中にStyleタグを追加する必要があるのは、ご存知の方も多いと思います。実は今回、スマフォ向けページのBlockquoteタグを少しカスタマイズしようと思ったのですが、作業していたらカスタマイズにコツが必要なことが判りましたので、ご紹介しますね。(かなり限定的な内容だなぁーとか、ツッこまないでね^^;)スポンサーリンク概要2つのコツがありますので、まずスクショで要点を示しますね。1.CSSの定義には#containerを使う一つ目のコツは、スマフォ向けページのBlockquoteタグのCSSを定義する時は#container(idセレクタ)を使う、というものです。.entry-content(classセレクタ)を使って定義していたのですが、PC向けページでは表現されるものの、スマフォ向けページでは定義したCSSが全く動作してくれませんでした。指定してCSSを定義すると動作することが判りました。pタグに上下のマージンが定義されていたスマフォ向けページでBlockquoteタグのCSSが動作するようになったのも束の間、下のスクショのようになぜか文章の上下が空いてしまいました。最初はBlockquoteタグ側のpaddingに原因がある、と思い込んでいて、いくら修正しても変化がなく時間ばかりが過ぎていき、正直もう寝てしまおうかと思ってましたwけれども、iPhone用のWebインスペクタを確認すると、どうやらBlockquoteタグ内のpタグに上下のマージンが設定されている様子。これではいくらBlockquoteタグのpadding設定を変えても、反映されないわけです。いうことで、2つ目のコツは、Blockquoteタグ内のpタグのマージンを適宜再設定する、ということです。pタグマージンを適宜再設定しましょうiPhone用のWebインスペクタがとても便利!の3点ですまた、今回私が設定したCSSのソースを載せておきますので、参考になれば幸いです。03:22はてなブログでスマフォ(iPhone)向けページのBlockquoteタグのCSSをカスタマイズするコツTweet書き人:tar@メガネ男子の自己紹介スポンサーリンク訪問いただきありがとうございます。気に入った記事をシェアしてくださると、とても励みになります。(3)ツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。