もっとも簡単！Bloggerのモバイル表示や修正のためにviewportやMedia queriesを設定する方法

おすすめ記事ピックアップ

Bloggerテンプレートをカスタマイズする際に、モバイルの表示修正が増えています。bif cond data blog.isMobileにて、モバイル用のCSSを有効にする方法があるのですが、なぜか一部のBloggerテンプレートだと、うまく動作しません。勉強不足で原因がわかりません。そこで古くからあるメディアスクリーンをBloggerで使う方法を説明します。

Media queries（メディアクエリ）は、ざっくり説明するとCSS3の機能で、ブラウザーの画面サイズに合わせてCSSを適用できます。Media queriesが登場したのが2011年頃ですので、今は標準的なCSSです。IE8以前では、ちょっと問題がありますが、もう気にしなくてもよいでしょう。

Media queries（メディアクエリ）の存在を知っているけど、難しくて理解できない！そんな人は多いでしょう。いろんなWebの説明を見ると、各機能が書かれていて、とても難しく見えます。実際には、すごく簡単な使い方があります。

viewport と min-width と max-width　だけ使えばOKです。主なモバイル用のサイズを書いておきました。これで簡単にBloggerでもMedia queries（メディアクエリ）を使用できると思います。


Media queriesの使い方ですが、まずヘッダー内にviewportを設定します。viewportとはモバイル等の表示の初期設定みたいなものです。下記の設定で良いです。Bloggerテンプレートにすでに設定されている場合も多いでしょう。

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

次にMedia queriesのもっとも簡単な書き方です。設定はいろいろあるので、気になる人はググってください。基本的にmin-width　と　max-width　だけ覚えておけば良いと思います。

@media only screen and は決まり文句です。でこんな風に書きます。下記はモニター横幅サイズが320～479pxの時に、中のCSSを実行するという設定です。min-width　と　max-width　で指定できる訳です。

@media only screen and (min-width:320px) and (max-width:479px){

.wide {
width: 100%;
}

}

iPhone等のスマートフォンの解像度は、端末上の解像度と、ブラウザー上の実質の解像度があります。例えばiPhone5でしたら、端末解像度1136×640pxです。 実質解像度は、568×320pxです。メディアクエリでは、実質解像度を見ますので、320ピクセルを指定すればOKです。

ちなみに初期のiPhoneから、横の解像度は320pxです。なので320pxで設定しておけば、OKな感じです。簡単ですね。正直なところ、ちょっと修正するならば320～479pxの設定だけで良いと思います。

もし加えて複数用意するならば、iPhoneを横にした場合は、iPhone4が480pxです。iPad 系の最小幅が768pxです。そういうことを考えてゆくと、こんな設定をすれば良いと思います。

@media only screen and (min-width:480px) and (max-width:767px) 
@media only screen and (min-width:768px) and (max-width:979px) 
@media only screen and (min-width:980px) and (max-width:1200px) 

ちなみに、max-widthだけ指定すれば、それ以下の時対象で、min-widthだけ指定すればそれ以上の対応となります。まあ例えば1200px以上なら、通常のCSSを使えばよいので、意味がありませんが、事例として。

@media only screen and (max-width:319px) 
@media only screen and (min-width:1200px) 

CSSを書く場所に、こんな風に記述します。
media only screenのなかは、通常のCSSと同じ書き方になります。

@media only screen and (min-width:320px) and (max-width:479px){

.wide {
width: 100%;
}

}


@media only screen and (min-width:480px) and (max-width:767px) {

#outer-wrapper {
overflow:hidden;
background:#fff;
width:480px;
margin:10px auto
}

}

IE8の対処方法はこちらを参考にどうぞ。

Media QueriesがIE8で効かない場合の対処法
http://www.imaginationdesign.jp/blog/html5css3/1592/