【Cocoon】スキンを選んで自分の好きなデザインにカスタマイズ

Cocoon

Cocoonで使えるスキンはどれもこれも素敵なSkinが多いのですが、そのまま使うのではなくまずは色やロゴの位置を変えるだけでも自分らしさがでてきます。簡単にできる作業なので、WEB Memoのカスタマイズを残しておきます。

カスタマイズする前に決めておくこと

スキンなしでもカスタマイズできるのですが、初めてカスタマイズする場合はスキンを使った方が圧倒的に楽に仕上がります。ただ、スキンには変更できない場所も出てくるので、ある程度のカラーコンセプトは決めておいた上で、そのカラーに沿ったスキンを選ぶことで違和感なく仕上がります。

基軸になる色を中心に濃い色、薄い色を数色見繕っておきましょう

スキンを選ぶ

Cocoonの設定画面をひらき、スキンのタブをクリック。

自分のコンセプトに合いそうなスキンを選んでいきます。写真アイコンにカーソルを合わせるとイメージが出てくるので探しやすいです。

今回は「Simple Navy」を選んでみました。

全体の設定を行う

冒頭で述べた通り、ここで大まかなカラーの設定をおこなっていく。今回紺色をメインにしあげていくことにしたので、決めた色を説明にそって入力。「#FFFFFF」のようなHTMLカラーコードでの入力が必要です。

指示に従って入力していけば思い通りに色やフォントサイズなどを変更することができます。

ファビコンの設定はあと回しにしておく(凝りだしたらキリがない)。

ヘッダーの設定を替える

ブログの一番上の目立つ部分のデザインを変更していきます。

ヘッダーレイアウトを変更すると、ロゴを真ん中から端に寄せたり場所を替えることができるので、いろいろ試してみるとレイアウトががらりと変わります。

またヘッダーロゴの画像を設定するとそれだけでも独自感がでますね。あまり大きな画像にしてしまうと場所ばっかりとってしまうので80pxぐらいまでに抑えてつくるとバランスがいいかな。

簡単なカスタマイズできあがり

自分で設定した色、ロゴに簡単に変わりました。

色やロゴの位置を少し変えるだけでも全然イメージが変わってきます。

カスタマイズした時に使った色コードなどはメモ帳などに保存しておくことをお勧めします。何かの画像を作る際に、色のコードを確認しなおすことがわりと多いです。

コメント

タイトルとURLをコピーしました