スキン設定で簡単衣替え［Cocoon］

今回の記事では、「Cocoonスキンなし！トップページをサイト型へ」でデザインしたサイトにスキンを設定します。

「スキンなし」の状態から、スキンを設定するとどんな変化があるのか確認したいと思います。

「スキンって何？」というアナタには、まずはこちらの記事 をお勧めします。

「スキンなし」で作成したサイト型フロントページ

前出の記事「Cocoonスキンなし！トップページをサイト型へ」では、「スキンなし」の状態でフロントページをサイト型にカスタマイズしました。

グローバルメニューとフッターに［背景色］を設定することで、シンプルとはいえ、だいぶ本格的なサイトに変身しました。

今回は、これにスキンを設定してみたいと思います。

スキンを設定するにあたって、グローバルメニューとフッターの背景色を［クリア］にして、真っ新まっさらな状態でスキンを設定したいと思います。（各スキンの設定が確認しやすいためです。）

背景色をリセットした状態のサイトが下図になります。

スキンの設定方法

スキンの設定をするには、Cocoon設定の［スキン］タブを開きます。

［スキン一覧］から好みのスキンを選んでクリックし、最後は「変更をまとめて保存」をクリックしてください。

クリックだけで、次々とサイトを着替えていくことができて便利ですね。

Sample: サイト型フロントページ

全部…というわけにはいかないのですが、シリーズごとの雰囲気がわかればと思い、フロントページだけのサンプルを作ってみました。

１カラムで見る時と、見出しやサイドバーが表示された時とでは、色の使い方で雰囲気が変わります。１カラムのフロントページだけではスキンのデザインは伝わり切らない点はご留意ください。

また、インデックスやメニューをクリックする時の動作に工夫を凝らしているものも多いので、気になるスキンは一度設定して、ぜひご自分のサイトで動作を確認してみてください。パッと見ただけではわからないことが見えてくると思います。

シンプル系

※ 各画像をクリックすると拡大します。

背景画像あり

※ 各画像をクリックすると拡大します。

ブラック系

※ 各画像をクリックすると拡大します。

他に、『てがきノート（ダークスカイ）』があります。

かわいい系

※ 各画像をクリックすると拡大します。

特殊スキン

※ 各画像をクリックすると拡大します。

Sample: プチ★カスタマイズ

地味に見えても、ヘッダーやフッターに背景色を設定するだけで雰囲気の変わるスキンもあります。

いつものコーヒー

スキン『いつもの』シリーズには、コーヒー、ローズ、深海の３種類があります。

１カラムにすると目立ちませんが、記事に移動すると見出しやサイドメニューに使われるメインカラーが引き立ちます。

サンプルに使っているのは『いつものコーヒー』です。

スキン設定直後はヘッダー部分に背景色が無いので、１カラムにしたフロントページだけを見ると少し寂しく感じますが、記事ページに移れば、見出しなどのメインカラーが目立ちます。

各部にメインカラーと同じカラーを指定すると、フロントページも引き締まります。

背景画像を設定するのも面白いでしょう。

Fuwari

スキン『Fuwari』は和色をベースにしたスキンで、４色のシリーズがあります。

サンプルに使ったのは「御召茶（おめしちゃ）」で、スキン設定直後はやっぱりシンプル…

いや、むしろ地味です…

これに御召茶ベースカラーの「#43676b」を［キーカラー］に設定してみたところ、次のようになりました。

ドット・レイニーブルー

スキン『ドット』には、レイニーブルーのほかにワインレッドがあります。

ドット模様に使われるカラーコードをヘッダー部分の［背景色］に指定すると、いい感じになります。

カラーコードの取得には画像編集ソフトに付属するカラーピッカーを使っているので、クリックする位置によって多少カラーコードが違ってしまいます。

てがきノート

細部まで作りこんだデザインの『てがきノート』ですが、独自機能が付属しています。

スキン『てがきノート』設定後に［外観］→［カスタマイズ］に進むと、3つのカスタマイズ項目が追加されます。

中でも面白いのが背景パターンのカスタマイズですね。デフォルトのパターン以外に罫線やドットが選べます。