HTML5でレスポンシブデザインというところは、変わらなかった点ですが、今回は、デザインを大幅にイメージチェンジしました。

リニューアルに関して考察

デザインを変更するにあたり考えた大まかなところは以下になります。

• 色
• レスポンシブデザインについて
• カラム構成
• フォント

1.　色

今回、デザインを変更点する時に、１番考えたのは、色です。

前回のテーマカラーがグレーな色を多く使っていたので、今回は、パステルを基調とした優しい感じのブログに仕上げたいなと思っていました。

それと同時に記事本文のところは、白にする！！と決めていました。（読みやすさを考えると）

あと、基調の色は、ピンクと決めていたので細かなところの色合いなどは、以下のHUE/360ツールを参考にさせていただきました。

このツールは、色相環をRGBとRGB+、マンセルから選択し色を選ぶことができるのですが、今回このブログでは、マンセルから色を選んでいます。

2.　レスポンシブデザインについて

前回のテーマでは、800pxまでの対応と中途半端にしていたのですが、今回は、iPhoneなどのモバイルサイズまで対応。

これに伴い、今まで使用していたwpTouchというプラグインを使わなくなりました

対応と言い切ってますが、全モバイルで確認したワケではなくPCのブラウザ上のツールを使って作成したので多分おかしなところがあると思います。そんなおかしなところを見つけたら教えていただけたら。。と思います。

3.　カラム構成について

これは、1カラムにするか2カラムにするかかなり悩んだので。

1カラムにしてしまえばスッキリし、記事を見て下さる方にも集中して読んでもらえるというとても大きなメリットがあると思っているので、（実際1カラムのブログを拝見すると集中している自分を振り返ってます。）これは、最後まで悩みました。

が、結局サイドに色々と見て欲しいモノをおいて置く事にしました。次のリニューアルではシングルに挑戦してみようかな。

4.　フォント

フォントとしていますが、テキスト周りのことになります。

font-family の設定

主で使うフォントを

にしました。

Windows の場合 alphabet は“Candara”が表示されるので、。欧文と和文の間に “違和感” が生じてかわいらしいなと思ったので今回採用してみました。

サイトのタイトルとサイドタイトルのフォントは、Google Web Fontの　'Elsie Swash Caps'　というのを使用しています。

リンク周り

前回は、本文のリンク色は青色にし、ホバー時にゆっくりと水色になるようにしていたのですが、今回は、リンクには、borderをつけ、ホバー時には、背景色が変更されるようにしてみました。

まとめ

ザックリ案でススメたので、後々苦労しました。それが以下の点。

• レスポンシブデザイン
• かわいいというザックリ感

レスポンシブデザイン前回は、大雑把にしていたのですが、今回は、ブレークポイントが倍近くにまで膨れ上がりました。

もっとシンプルにできるようになりたいです。構成能力ほしいです。ほんと最初にものすごく詰めて考えて始めないとと身にしみました。

次にかわいいですが、

最初とりあえず可愛いものを！！と始めたのですが、かわいいには傾向がある！！と途中で気づき最初からやり直ししたりとこのｶﾜｲｲに翻弄されました。

かわいいの方向性を決めかねる日々。途中 かわいいってなんですか！！！ と盛大に自分に切れていましたことを最後にご報告して、今回のリニューアル所感まとめを終わりたいと思います。