こんにちは
慶です。


前回の記事「[アメブロ入門] CSSでブログ画面のデザインカスタマイズに挑戦」でテンプレートではなく、自分でオリジナルデザインに挑戦してみました。


今回はその続きです。


前回の時点では、シンプルにしようとブラウン系で統一していたのですが、
背景・ボタンを単一色にしていたため、全体的になんだかもっさりしている印象でした。


■全体ページ



■メニュー



特にボタンはのっぺりしている気がしたので、単一色よりもグラデーションをつけてアクセントをつけてみることにしました。


調べてみるとCSSでグラデーションを簡単に表現できるようなので、さっそくフリーのツールを使ってみました。


■基本色の作成はAdobe Kulerで作成


なるべく同じ系統の色で、彩度と明度を変化させて調整してみます。


適当ですがとりあえず色が作成できたので、


Ultimate CSS Gradient Generator」というツールでグラデーションを作ります。



■Ultimate CSS Gradient Generator




先ほど利用したAdobe Kulerで作った色を利用してグラデーションを作ります。


プレビューでできがった色を確認後に、上図右のCSS欄にあるCSSの記述をアメブロのCSSにぺたっと貼り付けます。






アメブロのメニューがグラデーションになりました。



ついでに同様の方法で背景も少しグラデーションをつけてみます。




最初ののっぺりした感じが消えて、ごちゃごちゃした感じもないように思えるので、前回よりもこちらを適用することに決定。


といった感じです。


こんな感じで少しずつ微修正していこうと思います。


ではでは




AD