表題の通りですが、

１ヶ月程、構想を練るところから試行錯誤を重ね、ようやくレスポンシブデザインに対応することができました。


レスポンシブデザインとは、デバイス(PC,タブレット,スマートフォン)によって、それに合った見やすいデザインに勝手に切り替わって表示されるデザインのことです。


勝手に切り替わるのがポイントで、URLが変わることはありません。


最近は、時代の流れでスマートフォンでネットを見る人が多いので、スマートフォン用に見やすいデザインに変えるHPやブログが増えています。


また、ちょうど昨年からGoogleがモバイルファーストインデックス(スマホで見やすいデザインを採用しているサイトを検索の上位に表示させる)を採用しました。

ちなみにスマホで見やすいデザインのことをモバイルフレンドリーといいます。


いつまでたってもPC用のデザインを目一杯縮小してスマートフォンに表示させるわけにはいかないということですね。



これに当ブログもいよいよ対応したということです。


ブログを構成・制御している基本的なコードはHTMLですが、これらのデザイン(文字の大きさや色、配置など)を別で制御しているものがCSSになります。

HTMLは1つで、この表示の仕方をCSSにてPC用とスマホ用にカスタマイズするわけですね。


サイトにアクセスするとそのデバイスの解像度を取得し、PC用かスマホ用のどちらかのCSSを採用することになります。







ちなみにレスポンシブデザインに移行する前はこのようなデザインでした。

スマホでアクセスしたとしても、このデザインをスマホの画面に縮小して表示していましたので文字が小さく見づらかったですね。





さて、PC版でも若干変わっている箇所があります。

① ブログのタイトルの文字が大きくなった
存在感がなかったので以前よりも少しだけ大きくしました。


② ヘッダーメニューが消えた
TOP画像のすぐ上にあるグレーのメニューですね。
これらのメニューは同じものが右カラムにありますので思い切って削除しました。


③ TOP画像とその下のコンテンツの間に空白を設けた
以前は空白がありませんでしたが、少し窮屈なので空けました。自分の好みです。


④ お知らせエリアの文章の左側に空白を設けた
以前は枠線ギリギリでしたので空白を設けました。


⑤ ハイパーリンクが設定された文字の色を青→ロイヤルブルーに変更、オンマウスで赤・下線追加
以前は青の下線付きでオンマウスでも変化がなく、圧迫感がありダサかったですが、
今回は優しい色ながらも、オンマウスでの変化がありますのでボタンとしても存在感が高まりました。


⑥ 「TOPに戻る」ボタンを追加
右下に薄いですが、ブログの一番上に移動するボタンが登場しています。
TOPでは表示されず少し下にスクロールすると表示されるようになります。

⑦ コメント投稿・編集のテキストボックスの大きさを最適化
コメントのテキストボックスの大きさを最適にしました。
あまり機会はありませんが、以前の「コメント編集」の際のテキストボックスは大きすぎて
右のカラムに被っていましたので早急に修正するべき箇所でした。


以上です。⑤と⑥が目玉でしょうか。




さて、レスポンシブデザインのメインはスマートフォン版のデザインです。

以下のサイトから、様々なデバイスで当ブログを閲覧した際のデザインを実際に見たり触ったりできます。

http://lqd.jp/lab/rwd.html?url=http%3A%2F%2Fsounannnokaze.blog113.fc2.com%2F








こちらはiPhone6 Plusで閲覧した時のデザインになります。


上記のサイトにて実際にいじっていただくと分かるかと思いますが、変更点は以下になります。



① 左右カラムを削除し、右上のドロワーメニューに必要なコンテンツのみ表示
左右のカラムが完全になくなりましたので、右上にメニューを作り、
相互リンクや記事・コメントの一覧などの主要コンテンツを格納しています。

また、左カラムにあった、カレンダーや月別アーカイブ、
アクセスカウンターなどは真ん中の「お知らせ」の下に続けて表示させています。

② 文字の大きさを少し大きくした
スマートフォンなので文字を少し大きくして見やすくしました。



ということで、メインは右上のドロワーメニューだと思います。
スマホでは必要なコンテンツだけ絞り、シンプルにしました。

また、TOPに戻るボタンもスマホでの使用を想定して設置しています。
あると便利な機能です。



このほか、様々な改良点がありますが、注意点は、過去の記事によってはレイアウトが崩れることもあるということです。

それぞれの記事自体を修正する必要が出てくるため、昔のものは仕方がないということにします。


特に動画の埋め込みには対応できていませんので、
動画の埋め込みがある記事を表示させると左右のスクロールが発生することになります。

今後の記事では、動画の方もスマホ用に最適化されるように設定していきます。






このような形で、Googleでもモバイルフレンドリーに認定されています。
(ただしFC2の標準のスマホ版テンプレートを設定していてもモバイルフレンドリーと認定されることもあるが)



ということで、デザインが良くなったのでこれからもよろしくお願いします。