表題の通りですが、
1ヶ月程、構想を練るところから試行錯誤を重ね、ようやくレスポンシブデザインに対応することができました。
レスポンシブデザインとは、デバイス(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の標準のスマホ版テンプレートを設定していてもモバイルフレンドリーと認定されることもあるが)
ということで、デザインが良くなったのでこれからもよろしくお願いします。
距離的にマラソンにもぴったりですね♪>職質に会いそうですが(汗)
>同級生のリメイク
・・・同級生3まだー【お約束】
>ナンバーワンよ元井 広夢Mi deh yah fi yu whenever yu feel alone誰もいないつまり忍び込むには(殴)
>オリジナルとリメイクを比較するとこんな感じ
リメシクといっても絵師の人はベテランなんだけどなぁ(笑)
>いよいよこのシリーカーフM7.3コメントレス元井 広夢さん
そうだったんですね。震災レベルが来るとビビって動けなくなりそう・・・
>反対側なので4でしたが3くらいだと思ったのであの日から麻痺しているのです風ButterflyRE:カーフさんストレスに負け続けてます(ぁ
>北岳という名前の地味さがひどい日本二番目の山ですね(ぉ
どこから見て北やねんと(ぁ
>おまいら結局ハイレグビキニとスク水の二択やろと風M7.3揺れの質は完全に東日本大震災でした(汗)
>東北は震度6強!!?
反対側なので4でしたが3くらいだと思ったのであの日から麻痺しているのですね
>日曜に自宅で飲むコ元井 広夢M7.3こっちにもいつ地震が状態ですからねと(汗)
>地震でフィギュアが散乱してしまう
接着剤で固定とかやらないですからね(¨;)
>Twitter始めて以来ずっとアニメアイコカーフWe're In The Moodコメントレス元井 広夢さん
作るところから試されていたのですね(ぉ
>当たりが少ないので希少価値が上がります(マテ
原作やってる人からもやってない人からも人気が無いこともあり風月末の秋葉原(1/28)コメントレス元井 広夢さん
>そして、昨シーズンの記録的暖冬を平均にしようとしているかのような圧倒的な寒さです
平均とらずに程よく調整してほしいですよねw
>というよりも今の風Butterfly人間ストレスとの戦いですからねぇ(^_^;;;
>2番目に高い山を難なく解答してした
北岳という名前の地味さがひどい日本二番目の山ですね(ぉ
>ラブライブ虹ヶ咲のキャカーフWe're In The Mood>124年ぶりに2月2日が節分だったらしいですが
恵方巻を手に入れられませんでした【悲報】
>「美少女ゲームのアニメ化」→これ誰が喜ぶの?残念な出来にしかならないじゃ元井 広夢We're In The Moodバナー配布してくれるとこすっかり減ったよなと(汗)
>「美少女ゲームのアニメ化」
恋姫無双は三期までやったぐらいだそ定期(ぁっ
>ご当地ラーメン、博多が1位
カーフBlue Seaコメントレス元井 広夢さん
もう2月ですし(ぁ
>更新は大事ですよね、年を重ねると変わりますしね
嫁以外は全部変わりますから(マテ
>関西は異世界だった
異世界でもネタ要因(ぁ
>風月末の秋葉原(1/28)>あっという間ではなく妥当な早さで1月が終わりを
こちらはあっという間ですね
そして、昨シーズンの記録的暖冬を平均にしようとしているかのような圧倒的な寒さです
>元井 広夢月末の秋葉原(1/28)毎年同じようなものですから(笑)>妥当な早さで
>都合の良い立ち位置を1話で確立したアイドルも
ゲキドルの方がいいやとそっちに切り替えました(ぁっ
>チョコカーフBlue Seaもう11ヶ月もあっという間のオチですね、わかります>挨拶
>プロフィールのページを更新
更新は大事ですよね、年を重ねると変わりますしね
>この世界には関西の概念元井 広夢Blue Seaアプデってものは決断力との戦いですからね(ぁっ
>CUBEの待望の新作について
この更新速度だと延期フラグに見える件(殴)
>ラブライブさん、アニメに注力するよりドカーフThe Disappearance Of 2021コメントレス元井 広夢さん
今年は世間的に特殊ですので年明けを感じさせるイベントも少ないですからね・・・
>積みフラグですね、わかります(マテ
積んでいることすら忘れてたり(風The Disappearance Of 2021麻衣年そうですが今年は特に年明け感がないです>挨拶
>アニメ中心の生活とはいかないですね・・・
積みフラグですね、わかります(マテ
>強制テレワークの要請
サービ元井 広夢 2K21 JUST START!コメントレスカーフさん
今年も宜しくお願いいたします!
>もう21世紀もとか言う時期なんですよと(ぁっ
世紀を跨ぐときはどんな記事を書きましょうかねぇ(マテ
>そしてこれ出風The Disappearance Of 2021もう2022年に期待を馳せていると(ぉ
>新アニメも始まったわけですが
推しアニメ紹介の時間なわけですね(笑)
>アニメ中心の生活とはいかないですね・・・
なかなかカーフ