もっとも簡単!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/





いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : もっとも簡単!Bloggerのモバイル表示や修正のためにviewportやMedia queriesを設定する方法
もっとも簡単!Bloggerのモバイル表示や修正のためにviewportやMedia queriesを設定する方法
Bloggerテンプレートをカスタマイズする際に、モバイルの表示修正が増えています。bif cond data blog.isMobileにて、モバイル用のCSSを有効にする方法があるのですが、なぜか一部のBloggerテンプレートだと、うまく動作しません。勉強不足で原因がわかりません。そこで古くからあるメディアスクリーンをBloggerで使う方法を説明します。
ふりむけばコウホウ
http://www.furimuke.com/2014/08/bloggerviewportmedia-queries.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2014/08/bloggerviewportmedia-queries.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy