おすすめ記事ピックアップ
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テンプレートにすでに設定されている場合も多いでしょう。
次にMedia queriesのもっとも簡単な書き方です。設定はいろいろあるので、気になる人はググってください。基本的にmin-width と max-width だけ覚えておけば良いと思います。
@media only screen and は決まり文句です。でこんな風に書きます。下記はモニター横幅サイズが320~479pxの時に、中のCSSを実行するという設定です。min-width と max-width で指定できる訳です。
iPhone等のスマートフォンの解像度は、端末上の解像度と、ブラウザー上の実質の解像度があります。例えばiPhone5でしたら、端末解像度1136×640pxです。 実質解像度は、568×320pxです。メディアクエリでは、実質解像度を見ますので、320ピクセルを指定すればOKです。
ちなみに初期のiPhoneから、横の解像度は320pxです。なので320pxで設定しておけば、OKな感じです。簡単ですね。正直なところ、ちょっと修正するならば320~479pxの設定だけで良いと思います。
もし加えて複数用意するならば、iPhoneを横にした場合は、iPhone4が480pxです。iPad 系の最小幅が768pxです。そういうことを考えてゆくと、こんな設定をすれば良いと思います。
ちなみに、max-widthだけ指定すれば、それ以下の時対象で、min-widthだけ指定すればそれ以上の対応となります。まあ例えば1200px以上なら、通常のCSSを使えばよいので、意味がありませんが、事例として。
CSSを書く場所に、こんな風に記述します。
media only screenのなかは、通常のCSSと同じ書き方になります。
IE8の対処方法はこちらを参考にどうぞ。
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/