スマホ用自転車・車椅子出張修理店情報

「検索結果を表示するサイトを作る」の一連の記事でPC版の埼玉県内　自転車・車椅子出張修理店のページを更新しましたが、モバイルフレンドリーにはなりませんでした。

<携帯版もモバイルフレンドリーではないと判定されていましたので、こちらは別なアプローチでモバイルフレンドリーになるようサイトを更新しました。

従来はこのように市区町村の選択肢をすべて並べていましたが、コンボボックス化して、画面に占める割合を減らしました。


表示結果も、従来はすべて表示してリンクでラベル名に飛んでいたのを、動作は同じですが表示エリアをスタイルシートで制限しました。

参考にしたのはこちらです。
プルダウンメニューによるリンク
http://homepage2.nifty.com/tomoarai/java/pulldownlink.html

表示面積の狭いボックス内をスクロールバーで見せる
http://allabout.co.jp/gm/gc/23865/

こんな画面に作りりなおしました。

結果は、こちらのサイトで判定して
https://www.google.com/webmasters/tools/mobile-friendly/

合格です。



やっとスマホ用のサイトが一つ出来ました。