START!なにまだ小正月は来ていないから(ぉ>普段は大体エロゲのバナーばっかりやからえろい人と定義されたくないわけですね(ぉ>【理系が恋に落ちたので証明してみた。広夢さん>時代も変わったなぁ・・・と思いつつ現実は厳しいということでしょうか?(汗)昔に比べるとやはり厳しいでしょうね。!人生の一時を精一杯楽しもう。Since2007.7.17お知らせ相互リンク申請・質問等あれば、こちらから。等に就いて書いています。HeartほしうたD.C.IIP.C.さかあがりハリケーンかみぱにリトルバスターズ!エクスタシーバナーはこちらになります。レスポンシブWebデザインに対応しましたレスポンシブWebデザインに対応しました表題の通りですが、1ヶ月程、構想を練るところから試行錯誤を重ね、ようやくレスポンシブデザインに対応することができました。レスポンシブデザインとは、デバイス(PC,タブレット,スマートフォン)によって、それに合った見やすいデザインに勝手に切り替わって表示されるデザインのことです。勝手に切り替わるのがポイントで、URLが変わることはありません。最近は、時代の流れでスマートフォンでネットを見る人が多いので、スマートフォン用に見やすいデザインに変えるHPやブログが増えています。昨年からGoogleがモバイルファーストインデックス(スマホで見やすいデザインを採用しているサイトを検索の上位に表示させる)を採用しました。ちなみにスマホで見やすいデザインのことをモバイルフレンドリーといいます。いつまでたってもPC用のデザインを目一杯縮小してスマートフォンに表示させるわけにはいかないということですね。これに当ブログもいよいよ対応したということです。ブログを構成・制御している基本的なコードはHTMLですが、これらのデザイン(文字の大きさや色、配置など)を別で制御しているものがCSSになります。HTMLは1つで、この表示の仕方をCSSにてPC用とスマホ用にカスタマイズするわけですね。サイトにアクセスするとそのデバイスの解像度を取得し、PC用かスマホ用のどちらかのCSSを採用することになります。ちなみにレスポンシブデザインに移行する前はこのようなデザインでした。スマホでアクセスしたとしても、このデザインをスマホの画面に縮小して表示していましたので文字が小さく見づらかったですね。PC版でも若干変わっている箇所があります。ブログのタイトルの文字が大きくなった存在感がなかったので以前よりも少しだけ大きくしました。ヘッダーメニューが消えたTOP画像のすぐ上にあるグレーのメニューですね。これらのメニューは同じものが右カラムにありますので思い切って削除しました。TOP画像とその下のコンテンツの間に空白を設けた以前は空白がありませんでしたが、少し窮屈なので空けました。お知らせエリアの文章の左側に空白を設けた以前は枠線ギリギリでしたので空白を設けました。今回は優しい色ながらも、オンマウスでの変化がありますのでボタンとしても存在感が高まりました。右下に薄いですが、ブログの一番上に移動するボタンが登場しています。TOPでは表示されず少し下にスクロールすると表示されるようになります。コメント投稿・編集のテキストボックスの大きさを最適化コメントのテキストボックスの大きさを最適にしました。機会はありませんが、以前の「コメント編集」の際のテキストボックスは大きすぎて右のカラムに被っていましたので早急に修正するべき箇所でした。5と6が目玉でしょうか。レスポンシブデザインのメインはスマートフォン版のデザインです。以下のサイトから、様々なデバイスで当ブログを閲覧した際のデザインを実際に見たり触ったりできます。Plusで閲覧した時のデザインになります。上記のサイトにて実際にいじっていただくと分かるかと思いますが、変更点は以下になります。相互リンクや記事・コメントの一覧などの主要コンテンツを格納しています。左カラムにあった、カレンダーや月別アーカイブ、アクセスカウンターなどは真ん中の「お知らせ」の下に続けて表示させています。文字の大きさを少し大きくしたスマートフォンなので文字を少し大きくして見やすくしました。いうことで、メインは右上のドロワーメニューだと思います。スマホでは必要なコンテンツだけ絞り、シンプルにしました。TOPに戻るボタンもスマホでの使用を想定して設置しています。あると便利な機能です。このほか、様々な改良点がありますが、注意点は、過去の記事によってはレイアウトが崩れることもあるということです。それぞれの記事自体を修正する必要が出てくるため、昔のものは仕方がないということにします。動画の埋め込みがある記事を表示させると左右のスクロールが発生することになります。今後の記事では、動画の方もスマホ用に最適化されるように設定していきます。このような形で、Googleでもモバイルフレンドリーに認定されています。(ただしFC2の標準のスマホ版テンプレートを設定していてもモバイルフレンドリーと認定されることもあるが)ということで、デザインが良くなったのでこれからもよろしくお願いします。愛する風(かぜ)のブログです。こちら!尚、相互リンクは大歓迎なのでコメントかメールフォームにどうぞ。START!なにまだ小正月は来ていないから(ぉ>普段は大体エロゲのバナーばっかりやからえろい人と定義されたくないわけですね(ぉ>【理系が恋に落ちたので証明してみた。広夢さん>時代も変わったなぁ・・・と思いつつ現実は厳しいということでしょうか?(汗)昔に比べるとやはり厳しいでしょうね。Raggamuffin420。