スモールビジネスのIT日誌

• (2015-04-02 17:48:35)

ぜんぜん知らなかったが「モバイルフレンドリー」でないサイトはランク落ちの刑に処するとGoogleから通達が来ているらしい。

コンテントがはみ出す

丁寧にも「モバイルフレンドリー・テスト」サイトまで準備されていた。テストするといろいろ問題が出るが、私にとっての問題は次の1点

「?コンテンツの幅が画面の幅を超えています」

「画面の幅」とはスマホの画面のことだろうが、今時のスマホはだいたい640pxくらいあるのではないかと思うが、Googleが言う「画面の幅」とは320pxを想定しているようだ。

テスト結果として表示されたスマホ画面の幅から判断して320pxがGoogleの言うところのモバイル画面の幅に見える。このサイズの画面で見て、コンテントがはみ出していなければOKらしい。

そんなことはない、viewportの操作で回避できるようなことを解説してくれるサイトもあったが、自分がさきほどテストした範囲では320pxではみ出さないようにするしかないようだ。

モバイル用とPC用の2種類のページ分け

テストは充分でなかったし、正確さも欠けていたかもしれない。しかし、そもそもGoogle自身このテストの評価基準は日々変えている可能性もある。

よくわからないので320pxのラインを一つの基準で調整することにした。320pxを次の日480pxにするしても640pxにするしてもたいしたことはない。

PCサイトは自分の場合950pxくらいを一つの標準にしているので、これを無理矢理320pxにするにはレスポンシブルwebにするしかなさそう。

レスポンシブなテンプレートを購入したいが、ない

本当はプロフェッショナルなレスポンシブルwebテンプレートを購入してくるのが一番早いと思うが、すでにできあがっているPCサイトを新しいテンプレートに移植すること自体、とっても苦痛。

それに30くらいのテンプレートを見たが、気に入るものを見つけられなかった。

レスポンシブルwebページの作成

しぶしぶレスポンシブルwebページの作成方法を勉強する。すると考え方それ自体は案外シンプルで作れるかもという気になってきた。

CSS3に、メディアクエリー手法があって、モバイル版とPC版で別々のCSSファイルを読み込ませるだけらしい・・・・明日から作ってみる