目指せ！「モバイル・フレンドリー」なサイト！
目指せ！「モバイル・フレンドリー」なサイト！
最近、グーグルのサイトランキングにサイトがどれだけ「モバイル・フレンドリー」であることかが判定基準に加わりました。私なりに言えば「モバイル・フレンドリー」なサイトとはスマホやタブレットで見やすいサイトのことです。サイトが「モバイル・フレンドリー」であるかないかを判定するのにグーグルデベロッパーでは「モバイル・フレンドリー・テスト」というツールが存在します。
「モバイル・フレンドリー・テスト」URL：https://www.google.com/webmasters/tools/mobile-friendly/
スマホ向けにサイトを改良した結果、このツールでソノタブログはモバイル・フレンドリーであると認定されました。
やったー
どうやってモバイル・フレンドリーにしたか
このサイトではメタタグのviewportや画面サイズによってCSSスタイルを振り分けるMedia Queriesを使うことでサイトを「モバイル・フレンドリー」にしました。
viewportはサイトのヘダーに
のようなコードを入れることで指定できます。 また、Media Queries はCSSファイルに
スクリーンが1419px以下のときに実行したい内容を記述。
}
@media only screen and ( max-width : 1419px ) {
スクリーンが1420px以下のときに実行したい内容を記述。
}
のようなコードを記述することで実現できます。たとえば、このサイトの右サイドバーの場合、1419px以下は「右サイドバーを本文の横に表示するのではなく、下に表示させる」ことをしていて、逆に1420px以上の場合は「右サイドバーを普通に本文の横に表示せよ」という内容のコードになっています。
また、このサイトでは採用していませんですが、.htaccessファイルでスマホやタブレットからのアクセスをモバイル専用のサイトに誘導するという手段もあります。規模の大きいサイトではこれをしているところが多いように感じます。
サイトをお持ちの方は一度サイトの「モバイル・フレンドリー」さを意識してみてはいかがでしょうか。
それでは良いサイト作りを～
