HOME > Web > サイト製作・運営

[WPめも]サイトのスマホ対応

_C210023
このブログも含めて、ちょいちょいサイトのスマホ対応をする機会があったので、忘れないうちに自分用メモ。

スポンサーリンク

スマホとPCの分岐

WPの場合、レスポンシブデザインのテーマを入れるかWP_touchプラグインを導入するのが一般的だけど、自作テーマ使うならDevice Switcher系のプラグインを入れてテーマごと切り替える方が簡単。

このブログで使っているのはMulti Device Switcher。機能はシンプルだけどわかりやすくていい。

レスポンシブ・デザインにする場合はメディアクエリの設定でCSSを分岐できるけど、最初からスマホ表示を意識して作ったテーマでないと使いにくくなるだけだと思う。

参考:[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例

viewportの設定

スマホ対応の基本。デバイスの横幅に表示を合わせるためにviewportを<head>~</head>内に記述。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

としておくとピンチによる拡大操作にも対応できる。

参考:スマホに対応しつつユーザーによる拡大操作に対応する方法

横幅は320pxか640pxに設定。

最近のスマホは、ほとんど640px以上のディスプレイを積んでいるので、わざわざ320pxにする必要も無いのでは?とも思ったけど、アドセンスを入れるならやっぱり320pxでないと不便。広告入れないなら特にこだわらなくていい。

文字サイズはremで設定するのがいいらしい

スマホで見やすい文字サイズ設定。

横幅320px設定の場合

html { font-size: 62.5%; }
body { font-size: 1.4rem; }

横幅640px設定の場合

html { font-size: 62.5%; }
body { font-size: 2.8rem; }

font-size: 62.5%は10px相当。1.4remは14px相当。2.8remは28px相当。
横幅を大きく設定するほど文字サイズも大きくしないといけない。

何故かGalaxy S3αではhtml { font-size: 62.5%; } の設定では正常に表示されないのでhtml { font-size: 10px; }にするとうまくいった(理由はよくわからない

参考:CSS3 「rem」って何だ。

画像サイズの設定

ブログで使う画像は基本幅500pxにしているので、横幅320px設定でははみ出してしまう。

これはJqueryかなんかでゴニョゴニョしなければいけないのか?と悩んでたらなんとCSSであっさり解決。

img {
    max-width: 100%;
    height:auto;
}

でOK。

参考:【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを縮小・拡大できます。

==

ページ遷移が必要なコンテンツはともかく、もともと回遊性の低いコンテンツなら最初からスマホ用のテンプレ作って後からPC対応でもいいんじゃないかという気がしてきた。ブログならいっそ1カラムデザインでも潔くていいかも。

これこそモバイルファースト(←ちょっと違うか)

shop : 楽天ブックス
第一線で数多くのスマホサイト制作を手がけている著者が、スマホ最適化のための具体的なデザイン手法や知識を解説した1冊。

コメントは受け付けていません。

Auther

a-ki

a-ki

a-ki's factoryの中の人。京都生まれの京都育ち。

>>詳しいプロフィール

Web > サイト製作・運営

Kindle本を出版しました

cover

悩めるブロガーの皆様へ
巷にあふれる「ブログ論」とは違います。 ありそうでなかった「個人サイト運営者のための情報サイト構築論」の本です。


by aki-f.net