こんばんは。ドコえもんです。
以前「モバイルフレンドリーなサイトを目指す」にてご紹介させて頂きましたが、現代ではパソコンだけでなくスマホからも見やすいホームページ作りが必要不可欠です。
方法は何個かありますが、単一のファイルだけど、ページを読み込む機器の画面サイズに合わせて表示するレイアウトを制御して最適化する方法、というのが望ましいです。
これを「レスポンシブデザイン」と言います。
この方法ですと、複数のページを用意して読み込む機器に応じて開くページを変更させる方法と異なり、更新するときに一つのファイルを更新するだけで済みますし、検索エンジンやアクセス解析で
レイアウトが若干異なるだけで同じ内容のURLが重複して出現するのを防ぐことが出来ますので、Google先生も推奨しております。
私のサイトでもこのレスポンシブデザインを目指そうということで、過去記事のとおりGoogleが提供するモバイルフレンドリーテストを無事乗り切りましたが、一部目を背けている部分がありました。
それをちょこちょこ時間があるときに直してはいたのですが、一つだけ完全に諦めかけていた部分がタイトルにあります「ナビゲーションバー」になります。
ナビゲーションバーとは、通常ホームページの上部にありますメニュー欄（製品情報やお問合せなど）のことで、私のサイトでは元々パソコン閲覧向けに作成した画像を5ヶ並べて表示する形で対応していたので、スマホで開くと画面が小さくなりますから勝手に改行されてメニューが大変なことになってしまっていました。
モバイルフレンドリーテストを受けた際、スマホから開いた場合はこの画像を全て表示しない形にして応急対応しており、結果今までスマホからのアクセスからですとナビゲーションバー不在で非常に不便な状態となってしまっていました。
（サイドバーの一部抜粋記事からたどって行ったりすれば一応全記事見れましたが・・・笑）
これを直す方法を探してみましたが、ドロップダウンするなどの動的なシステムを導入する方法が多く出てきますね。でも、私自身がサイト閲覧をする際に動的なページがあまり好きではないといった完全な私情により、リストを使用して作成する方法を取りました。
私が実施した方法・・・
【パソコンでの閲覧向け】
①ヘッダー幅100％の<ul>リストを作成
②CSSにて、各<li>の幅を、メニューが5ヶなので20％に設定し、HTML欄にはそれぞれメニューの文章とリンクを設定
③CSSを活用して、マウスのポインタがメニューに被ったときに色が若干変わるように（これはオシャレ感を出す為です。。。）
【スマホでの閲覧向け】
①メディアクエリにて、画面が480px以下になった時に各<li>の幅が100％になるように記述
②あとは上記のまま
これにより、目を背け続けてきましたナビゲーションバーもレスポンシブデザインとなり、スマホ閲覧でも記事が検索しやすくなりました。
ただ、スマホ版でのレイアウトはまだ気に入っていないところもありますので、まだまだ修正していきたいと思うドコえもんなのでした。
コツコツ着実に記事を増やしております「使用者目線情報局」にも是非お立ち寄りください！
最新の記事は「おふろの防カビくん煙材」についての実演＋レビューです。
サイト名での検索か、プロフィール欄のホームページリンクからアクセスして頂ければ幸いです♪
リンクフリーですのでお気に召して頂ければ是非ご紹介下さいませ！