ブログのデザインを変更しました Version 1.8

ブログのデザインを変更しました。

今回のでVersionは1.8へ、ってことなので8回目の変更ですね。

では今回のデザイン変更点を。

デザインの変更コンセプト

今回のデザイン変更のコンセプトは「フラット」で「オシャレ感」を出すことです。

フラットデザインは今のWebデザインのトレンドなので練習を兼ねて。

オシャレ感を出すデザインがまだうまくできないのでこれも練習を兼ねて。

デザインの変更点

ブログタイトル

今までは左上にブログのロゴを置いていましたが、今回のコンセプトとしてオシャレ感を出すというものがあったので、大きく余白多めにとって目立つように配置しています。

それに合わせてフォントも変更。

Google Web Fontsの中からイメージに合うものを選びました。

今回は曲線がきれいだった「Tangerine」を使用しています。

hの縦線が素敵です。

記事一覧の表示方法

今までは1行に1つの記事を表示していました。

そしてアイキャッチ画像は途中から使用するようにしたので、アイキャッチ画像が表示されるとうまくバランスがとれていませんでした。

ということで、アイキャッチ画像を表示する前提でデザインの組み直し。

そしてフラットデザインの練習ということで、1行に2つの記事を表示するようにして記事を敷き詰めた上で、背景色で市松模様にしてみました。

色がうすいのでわかりづらいのですが、あんまりやりすぎてもうるさいかなぁと判断してのことです。

また、1行2列の記事表示になったので、それに伴ってブログ全体の横幅を768pxから1024pxに広げています。

フッター

全体的に淡い色合いを使用しているので、ブログの見た目を引き締めるためにダーク系の色合いに変更しました。

フッターを暗くしたことで全体の安定感を出しています。

ここではただ黒い色ではなく、暗黒系だけど淡い感じの色を使用しています。

記事ページ

ヘッダーとフッターやコンテンツ幅は前述した内容に基づいています。

他の変更点として、まず記事のタイトル名を中央寄せにしました。

これもオシャレ感を出すためです。

ヘッダーを表示しているので、ヘッダーと同じ中央寄せにしてバランス取ってます。

次に、背景に使用していた画像をなくしました。

今はただの白を指定しています。

今まで背景色に真っ白は使用しないようにしていたのですが、ただの真っ白の方が読みやすいのかな、と思って試してみています。

あとは前に実装したループスクロールをちょっと前に辞めたりしています。

動作がうまく制御できなかったというのと、HTMLが冗長な内容になってしまう、というのが辞めた理由です。

以上が変更点です。

まとめ

前よりはオシャレ感出たかなと思って、自分では満足しています。

やっぱり画像が表示されていると映えますねー。

ブログのデザインをいろいろと考えていて、湯船に入りながらも考えていたら、このデザインを思いついて、創作意欲が湧いてきたので一晩で一気に作ってしまいました。