こんにちは。
スマイルネットワークのホームページを先日、リニューアルしました。
グーグルの検索結果の表示順位方式が変わるとのことで、スマートフォンにうまく対応していないホームページは検索結果の表示順位がかなり下がるだろうとの話がありました。日本のヤフーの検索もグーグルのシステムと基本的に同様みたいなので大変なことです。
WordPressで作られているブログなどのページはスマホにも対応されているのでよいのですが、スマイルネットワークのホームページはPC用でしたのでスマホでもきれいに見られるように追加訂正をしました。
今までは、会社名のスマイルネットワークで検索すると、検索の1ページ目には出ていたのですが、ランク外になるのもいやですし、お客様が当社の会社検索でなかなかヒットしないのもなんですので、ホームページをリニューアルすることにしたのです。
かなり修正個所はあるかと思いますが、一応、スマートフォンでも見られるようになったかなと思いますが、どうでしょう?
随時直していきますので、よろしくお願い申し上げます。
また、インターネットショップの商品紹介のホームページもリニューアルしました。
スマートホーンにも表示対応をさせるようにしました。
取り合えず、グーグルのモバイル フレンドリー テストのページでチェックしたら、モバイル表示に適応されて「問題ありません。 このページはモバイル フレンドリーです。」と判定されたので、よかったです。
モバイル表示対応にさせる方法はいろいろ調べたら、3パターンあるみたいで、
一つはモバイル専用のページのみを作る方法。これはPCで見るとレイアウトが少し変に見えます。
もう一つは、モバイル用のページを作り、PC用のページhtmlとリンクさせて、アドレスは同じで、自動的にPCで見た場合はPC用のページを表示、モバイルで見た場合はモバイル用のページを表示するやり方です。
これが一番簡単なので、PCテンプレート対応の大まかなページは、今のところ、これで対応させています。
スマートフォン用のページに変換するのは多少手間ですがテンプレートが決まっているのでレイアウトが崩れなくてよいかもしれません。
最後に3つ目の方法は、CSS:スタイルシートの中で記入して、一つのページhtmlで可変的に画像表示の大きさ・文字の位置、レイアウトを変えていくやり方です。
これは、一つのページのみを作ればいいので、メンテナンスが楽ですが、うまく作らないとレイアウトがウインドウ画面の大きさによって表示が崩れて見にくくなる可能性があるので注意が必要です。
また、文字は移動してレイアウトを変えられますが、画像は大きさを縮小対応させないと、画面からはみ出してモバイルフレンドリーにならなくなる可能性もありますので対応が必要です。
PCでも表示ウインドウ枠の大きさを変えると、文字の位置が変わり、レイアウトが移動するタイプがこのパターンです。いろいろなホームページで試しにやってみてください。レイアウト表示が変わらないページと可変されるページがあると思います。
この3番目の方法だと、うまくページを作れば、PCで見た場合とモバイルで見た場合とで画面のレイアウトは違いますが、一つのページアドレスで両方に対応できます。
なかなか、CSS:スタイルシートの記入作成が大変ですが、何ヶ所かのページはこれで対応させています。
まあ、大きさの違う画面での表示を一つでやろうとするので、多少無理があるとは思いますが、昨今モバイルの普及がこれ程進んでいるので、PC表示だけでは対応できないのも仕方ありません。
今後とも随時、見直して作っていこうと思います。
商品紹介ホームページ:
インターネットショップの商品を紹介しています
スマイルネットワークのホームページに物件情報を掲載しています。ご覧ください。
それでは、また。(^o^)/
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
【PR】★九州グルメ紹介はこちら↓