超簡単 Googleモバイルフレンドリー 応急対応
スマートフォンでグーグル検索したときに、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。応急対応ですが超簡単な対処方法を紹介します。
モバイル対応の有無がランキングを決定する要素となります
2015年4月21日から、スマートフォンでグーグル検索したときに、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。
気づけばあと5日しか無いですね。皆さん対応しましたか?モバイル フレンドリー テスト、突破できてますか?
「うおお!艦コレに夢中になってて忘れてた!」という方いらっしゃいましたら、応急対応ですが対処法を紹介いたします。
モバイル フレンドリー テストをクリアした例
上記ページは弊社の旧サイトに載っていたコンテンツです。もったいないので、とりあえず取ってあるコンテンツです。見るからにモバイルフレンドリーではないですし、RWDでもないですが、今回紹介する方法でモバイル フレンドリー テストに対処しています。では、モバイル フレンドリー テストをしてみます。
はい、ちゃんと突破しております。
では、実際に対処方法を紹介していきます。
1. ヘッダにviewportを設置
①<meta name="viewport" content="width=device-width, initial-scale=1.0">
②<meta name="viewport" content="width=device-width">
まずはヘッダにviewportを設置します。
①の場合はスマホを横にした時に拡大されません。ユーザのことを考えると②の方がいいですね。
2. スマホだけに読み込ませるCSSを準備
スマホだけに読み込ませる調整用のCSSを作成します。
CSS読み込み時にlink要素で行ってもいいですし、
<link rel="stylesheet" media="only screen and (max-device-width:480px)" href="old_column_mobile.css">
mediaQueryを利用してもいいと思います。mediaQueryでしたら従来のCSSに追加ができます。私はmediaQueryの方が好きです。
@media screen and (max-device-width: 480px)
3. 横幅の調整用CSS
「content="width=device-width"」ですと、例えば横幅980pxのサイトでは横幅320pxのスマホで一部が拡大されて表示されてしまいます。これではモバイル フレンドリー テストに引っかかります。そこでサイトの横幅をzoomをつかって調整します。
先ほどの「過去のコラム」サイトの場合は widthが1041pxありましたので、スマホの横幅320pxに収まるように「320÷1041=30.7396...」で端数切り捨て「30.73%」にしました。
html {
zoom: 30.73%;
}
4. 文字サイズの調整
今のままですとモバイル フレンドリー テストで「テキストが小さすぎて読めません」と言われてしまうので、文字サイズを大きくします。文字サイズを大きくすることで崩れるようでしたらレイアウトを調整をしてください。
body {
font-size: 200%;
}
まとめ
はい、これでもう一度モバイル フレンドリー テストを試してみると...、見事突破!
行ったのは下記のみです。
- viewportを設置
- スマホだけに読み込ませるようにCSSを準備
- CSSで、zoomとfont-sizeを調整
CSSのサンプル
@media screen and (max-device-width: 480px) {
html {
zoom: 30.73%;
}
body {
font-size: 190% !important;
}
}
根本的な解決にはなっていませんが、とりあえず早急に対処したいということでしたら、利用してみてはいかがでしょうか。
- このエントリーのトラックバックURL
- http://www.ibnet.ne.jp/mt/mt-tb.cgi/1051