以前に一度でもこのサイトに訪問してくれたことがある人ならお気づきかと思いますが、WordPressのテーマをレスポンシブ対応にしました。WordPressのテーマを作り始めて3作目、はじめてのレスポンシブ(なんちゃって見切り発車版)です。
はじめてレスポンシブ対応のテーマを自作したので、モバイルフレンドリーテストを受けてみました。Google Search Console(旧Googleウェブマスターツール)が提供してる「自分のサイトがモバイルデバイスに対してフレンドリーか?」をテストするサイトです。
モバイルフレンドリーとは何か?
モバイルフレンドリーというのは、要するに・・・スマートフォンやタブレットなどのモバイル端末で、いかに自分のサイトを快適に表示させることが出来るか?ということ。
1.ピンチアウトやダブルタップで拡大表示をしなくても文字が見やすいか?
スマホで2カラム、3カラムあるようなPCサイトを表示すると、どうしてもメインカラムのメインコンテンツにある文字が小さくなって・・・ユーザーは拡大表示せざるを得なくなります。
…
…
viewport指定を行って、コンテンツの幅が各デバイスの幅に収まるようにします。viewport指定をしてもモバイル端末にサイドバーが表示されるとどうしてもメインカラムの横幅が小さくなるので元の木阿弥です。CSS3 の Media Queries(メディアクエリ)という技術を使って、自分のサイトにアクセスしてきた端末の幅に応じて、どんなスタイリングをあてるか?を出し分ける記述をします。
[css highlight=”9″]
/*↑この上はスマホ向けのCSSを書く*/
/*↓この下以降はタブレットPC向けのCSSを書く。
スマホでは以下のスタイルは読み込まれない*/
/*———————————–
タブレット&PCのスタイル
———————————–*/
@media all and (min-width: 800px) {
body > header {
margin-bottom: 30px;
}
}
[/css]
モバイルファーストの時代なので、CSSの最初の方に画面の小さい端末向けのスタイルを記述して、後ろの方ではメディアクエリでタブレット向け、PC向けのスタイルを記述。スマホではメインカラムとサイドバーにfloatなどかけずに1カラムにして、CSSの後半PC用のメディアクエリ内でfloatを使うのが良さげ。
あとは文字サイズですが、16pxとか決め打ちしてしまうと・・・特にスクリーンサイズが大きくなるにつれて違和感が出てくるので、いまはemとかremを使ったりするのが主流。今回のテーマでは・・・
[css]
html {
font-size: 62.5%; /* 1rem = 10px相当 */
}
body {
font-size: 1.6rem;
}
[/css]
こんな感じでremを使いました。
2.ボタンのサイズ、リンク同士の幅が押しやすいか
PCサイトを作るような感覚でレスポンシブを作ると、どうしてもボタンのサイズが小さすぎて指で押せなかったり、縦並びのナビゲーションのリンク同士の間隔が狭すぎて・・・上手に押せなかったりします。
スマホ向けのスタイルではリンク同士の間隔を多めに取る、例えばフォントサイズを大きめにしたり、marginを余分に取ったり、line-heightを多めにとったり、ボタンだったらpaddingを大きめにとってボタンを大きくします。
3.FLASHを使ってないか?
HTML5の時代になってFLASHは死にゆく運命にあるのか?Steve JobsがFLASHを嫌っていたからか…iPhoneとかMacには特に相性が悪いので、モバイルフレンドリーにしたいのならflashは使わない方が良いでしょう。flashを使いたいならPCサイトに特化するしかない。
なぜモバイルフレンドリーが必要なのか?
モバイルフレンドリーかどうかが、Googleの検索結果に影響を及ぼすからです。
Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくなります。
モバイルフレンドリーテストの結果
無事にモバイルフレンドリーテストでOKをいただきました。
( ´Д`)=3 フゥ
コメント