ブログデザイン・リニューアルの道のり１
こんちわ、おいさんです。(*´∀｀*)
みなさん、何か気付きませんか？
そう、このブログのデザインがほんのり変わっているんです！
そこで今回は
このブログのリニューアルについてお話してみたいと思います。
ブログ一周年を迎えて
以前もお伝えしましたが、
このブログも一周年を無事迎えることができました。
そこで一周年を記念して、ブログデザインを大幅に変更すると
再三言ってきましたが、
仕事にかまけて大幅な変更に手が出せずにいる状態が
ずっとつづいていました。
それに第一、リニューアルと大旗をあげてみても、
そもそもワシ自身はCSSやHTMLの知識がないし、
プログラムのイロハもわからない。
知識もない。
お金もない。
経験もない。
そんなわしがブログデザインをリニューアルしようにも、
今から本を読んだりして勉強してみても、
仕事が忙しくてとても今月中には間に合わない。
どうしても、
一周年である今月・6月中にブログのリニューアルを完了したい！
どうしたものかと悩んでいたそんなとき、
たまたま見かけた
レスポンシブデザイン対応のはてなブログテーマ一覧まとめ！モバイルからの広告収入を伸ばしたいなら、レスポンシブデザイン必須ですね。 - クレジットカードの読みものという記事で、
レスポンシブデザインについて書かれていた記事を見かけましたので、
なんだかよくわからないなりに、
レスポンシブ・デザインに取り組んでみることにしました！
レスポンシブ・デザインってなに？
しかし、ここでまた新たな疑問が。
そもそもレスポンシブ・デザインってなに？ということから
このブログデザインど素人のわしは始めなくてはいけませんｗ(-_-;)
レスポンシブ・デザインって一体何なのかしら？
今まで聞いたこともなかったわしは、Google先生で調べて見ると、
こんな記事が出てきました！
レスポンシブ・デザイン
で、結局レスポンシブ・デザインとアダプティブ・デザインの違いって何よ？という質問に対し、私個人が出した答えはこれです。
- レスポンシブ・デザイン・・・デバイスに関わらず、どんな画面サイズでも同じコンテンツを利用できるように、レイアウトならびに画像や文字のサイズなどを変更する手法。
- アダプティブ・デザイン・・・ユーザーの使用目的や状況、環境などに応じたコンテンツを、ユーザーの使用するデバイスや画面サイズに関係なく同じコンテンツを利用できるように、レイアウトならびに画像や文字のサイズ、並びに必要に応じてコンテンツや機能を変更する手法。
つまり、言い換えれば、「どのデバイスを使っても、同じ経験と機能を提供してくれる（デバイス中心）」のがレスポンシブ・デザインとすれば、「どこで、どのデバイスを使っても、それに応じた経験と機能を提供してくれる（ユーザー中心）」のが、アダプティブ・デザインと言えるのではないでしょうか。そこにある決定的な違いは、最優先しているのがデバイスか、ユーザーかということです。
な、なんかよくわからないけど、
どうやらブログのデザインというものには
レスポンシブ・デザインとアダプティブ・デザインというものがあるらしい。
アダプティブ・デザイン？(；´∀｀)
あ、アダプター？
なんか急にまた新しい言葉が出てきたけど、ようわからんなぁ・・・？
さらに読み進めていくと、
最後にやや強引に、お客さんが各自テイクアウト用の器を持って買いに来るお菓子屋さんの例を使って、まとめてみます（レアすぎるケースですが・・w）。
一般的なサイズでパッケージしたお菓子セットを売るのが、レスポンシブでもアダプティブでもない普通のデザインだとすると、
- お客さんが持ってくる、全ての器に応じた大きさに合わせてパッケージしたお菓子セットを売る・・・レスポンシブ・デザイン
- お客さんが持ってくることが多い器の幾つかの大きさに合わせてパッケージし、お客さんの好みや都合に応じて盛り合わせたお菓子セットを売る・・・アダプティブ・デザイン
- お客さんが持って来る、全ての器に応じた大きさに合わせてパッケージし、お客さんの好みや都合に応じて盛り合わせたお菓子セットを売る・・・デバイス・アグノスティックなアダプティブ・デザイン
という感じです。こうやって見ると、おもてなし度が一番高いのは、デバイス・アグノスティックなアダプティブ・デザインということになりますが、私 自身は「機種のスペックこれからも変わり続けるだろうし、あんまりやり過ぎない方がいいのではないか。(・ω・)」と思っています（笑）。
ははーん、なるほど。
アダプティブ・デザインについてはイマイチよくわからんが、
レスポンシブ・デザインというのは、
どんなデバイス（ｉＰｈｏｎｅやＡｎｄｒｏｉｄやiPadなどその他タブレット）でもおんなじように見せるデザインってことか。
つまりどんなものでも見ても、
表示が崩れないデザインってことでいいのかな？(*´∀｀*)
id:cardmicsさんの
レスポンシブデザイン対応のはてなブログテーマ一覧まとめ！モバイルからの広告収入を伸ばしたいなら、レスポンシブデザイン必須ですね。
という記事でもモバイルからの広告収入を増やしたいならレスポンシブデザインがおすすめと言っているし、
はてなブログでも
PC向けのデザインを、
スマホなどモバイルからの閲覧でも適用してくれる機能をつけたって
スマートフォンで閲覧したときにも「PCのデザインを使用」するオプションを追加しました - はてなブログ開発ブログで書いていたけど、
これってつまり、
レスポンシブデザインに対応したよ、ってことなのかな？
でも以前このブログを
デザイン設定のカスタマイズ「スマートフォン」で
「PCのデザインを使用」をチェックにして表示していたら、
マネー報道著者さんに
「スマホで見づらいっす(；´Д｀)」
って言われちゃったしｗ
もしかしたらこのブログテーマはレスポンシブ・デザインに
対応してないんじゃないかな？
ということは、はてなブログをレスポンシブ・デザイン仕様にするには
レスポンシブ・デザインに対応しているブログテーマを
使わなくちゃいけないんだろうか？
「FLAT」は対応済み？
そこでさっそく調べてみた。
わしがこのブログで使っているブログテーマは、
はてなブログのテーマストアでダウンロードできる
「FLAT」というもの。
フラットデザインに憧れていたわしは、
よくわからんままテーマをそのままインストールしていたのだ。
その時は見落としていたが、
よく見てみるとこんなことが書かれていた。
「レスポンシブデザインになっており、
PC以外にも見やすく保ユジするように調整しております」
あれ？このブログテーマはレスポンシブ・デザインに対応している？
でもそれなら以前、マネーさんにご指摘されたように、
見にくいですとは言われなかったはずだ。
そこでさらによく下を見てみると、
色を変えたい場合というところに、
タブレット用のフッターという文字を見つけた。
もしかしたら、(；´∀｀)
これをCSSに書き込めば、レスポンシブ・デザインになるのかな？
実際に試してみた
そこで、このブログテーマを作った人のブログを参考に、
はてなブログテーマストアに「FLAT」を投稿しました - mono-tone
この「色を変えたい場合」というコードをCSSに入れてみた。
せっかく色が変えられるんだから、
今までのくすんだ青から鮮やかな水色にしてみよう！
アイコンの絵も新しくしたことだし、
この色の方が絵にあっていてかっこいいぞ！
ついでに背景の壁紙も変えちゃおう！
今まではキラキラしたオレンジの壁紙だったけど、
デフォルトで付いている木の質感がわかる壁紙にしちゃおう！
というわけで出来たのがこちら↑
なんか前より統一感があって、さわやかでいい感じ！ｗｗｗ
これから夏だし、暑くなるからこんなデザインもいいかもしれないなｗ
最後にまたデザイン設定のカスタマイズ「スマートフォン」で
「PCのデザインを使用」をチェックをいれて、
完成！
そんなわけで
今回、色々いじってみましたが、
レスポンシブ・デザインにこのブログが生まれ変わったか
イマイチ自身が持てません（タブレット端末持ってないので）ｗ
でもリニューアルの一貫として色々変更を加えてみました。
これでまだブログデザインのリニューアルを終えるつもりはないので
このサイトの
- デザインが見にくい！
- レスポンシブ・デザインになってないよ！
- 前の方がよかった！
などというご指摘がありましたら、どんどんご意見をお寄せください。
色々コツコツ勉強しながらこのブログのデザインを、
ほんのり変更していきたいと思います！
ていうか、
誰かレスポンシブデザインの詳しいやり方をわしに教えて！ヽ(=´▽`=)ﾉ
↓ランキングに参加しています。
おもしろければポチッと押してもらって、
ツイッターやはてブなんかで拡散してもらえればうれしいなぁ(=´▽`=)ﾉ
みなさんのコメントをお持ちしております。m(_ _)m