サイトのデザインをリニューアルしました！

いつも、フラミGOをご覧いただきありがとうございます。今回、サイトのデザインをリニューアルしました。

今までは「Minimalism」のテーマをアレンジして使っていましたが、トップページのアイキャッチが正方形で画像が見切れてしまうのをどうにかしたいと思っていました。

サイトのデザインをリニューアルしようと思いたち、1月初めから少しずつ作業を進めていました。今回、「Cappuccino」のテーマを使ってみました。

Cappuccinoは、何よりアイキャッチが長方形の表示なので、見切れずに表示できそうだと思い選びました。カフェ風なデザインもオシャレで気に入りました。

今回のリニューアルで役立ったサイトを紹介します。

作成者さんがアレンジしやすいように色々と解説をしてくれています。サイト全体の色の変更も直感的に変更できたり、既存の見出しや引用符などを取り消して新たに追加したりしやすかったです。

オリジナルはカフェのようなコーヒー色がメインでしたが、このサイトでは以前のデザインに引き続き緑をメインに黄色をアクセントにしてみました。色彩感覚が優れているわけではないので、良いのか悪いのか分かりませんが、いかがでしょうか？

この色のカラーコードが分からない！という時に毎回参照しているサイトです。

サイトではなく、クロームの拡張機能です。サイト内の画像や絵で気に入った色があれば、カラーコードを調べることができ、便利です。↑で紹介した「色見本と配色サイト」と組み合わせると最強です。

見出しや引用符のデザインで参照しました。シンプルでカワイイものが多く、コピペですぐ使えるのがありがたいです。

「Cappuccino」の作者が感化されて、このデザインを作った素材サイトです。今回、上部に固定した「おすすめ記事」のアイキャッチに使わせていただきました。

以前、デザインCSSなどを適当に書いていったので、どのCSSが何を意味しているのか分からないものもあり、調べ直す必要がありました。

すぐに見分けがつくように、　/* ### ヘッダーの背景色 ### */　などと、それぞれに名前を付けておくと後々見やすいと思いました。

以前より知識が付いていたため、ゼロからの手探り状態ではなく、ある程度こうしたいというイメージで作れたので良かったです。

変更に伴い変な箇所も出てくるかもしれませんが、気付いたら直していきたいと思いますので、よろしくお願いします。

Flamin-GO