このブログも含めて、ちょいちょいサイトのスマホ対応をする機会があったので、忘れないうちに自分用メモ。
スマホと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; }にするとうまくいった（理由はよくわからない
画像サイズの設定
ブログで使う画像は基本幅500pxにしているので、横幅320px設定でははみ出してしまう。
これはJqueryかなんかでゴニョゴニョしなければいけないのか？と悩んでたらなんとCSSであっさり解決。
img {
max-width: 100%;
height:auto;
}
でOK。
参考：【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを縮小・拡大できます。
＝＝
ページ遷移が必要なコンテンツはともかく、もともと回遊性の低いコンテンツなら最初からスマホ用のテンプレ作って後からPC対応でもいいんじゃないかという気がしてきた。ブログならいっそ1カラムデザインでも潔くていいかも。
これこそモバイルファースト（←ちょっと違うか）
- 執筆者: a-ki
- 最終更新日: 2019/02/02