無料テンプレートCocoonのスキンを作ってみた

Cocoon

はじめてWodPressテンプレートのスキンなるものを作ってみた。

Cocoonはスキンで好きなデザインに簡単に変更できるのも魅力の一つですね。

スキンのダウンロード

今回、ベースとなる色の色違いバージョンとして、赤、青、緑の3色分のスキンを作成。

ちなみに、スキンの名前は、ミックスグリーン、ミックスブルー、ミックスレッド。

スキンは以下のボタンからダウンロードできます。

ミックスグリーン

ミックスブルー

ミックスレッド

 

以下では、標準のデザインからどこが変わったのかを説明します。

スキンの見出し

見出しの画像は、上からミックスグリーン、ミックスブルー、ミックスレッド。

 

ミックスグリーン

 

ミックスブルー

 

ミックスレッド

 

目次

標準の目次はシンプルで好きだったけど、ちょっとだけ変更してみた。

エントリーカード

エントリーカードにマウスを乗せると、ふわっと浮くようにした。

ページネーション

ページネーションも少し変更。

マウスを乗せると、背景がキラリと走ります。

テーブル

テーブルのヘッダー行にはグラデーションをつけた。

下の画像はミックスグリーンのテーブル

 

変更はだいたいこんな感じです。

大きく標準からは変更していないので、スキンを使ってみて、気に入らないところや足りないところは自分好みにどんどん変えてみてください。

 

スキンテスト中

Cocoonのスキンがボタン1つでリアルタイムに切り替わります
下のボタンを押すと、リアルタイムでスキンを変更できます!※ページをリロードすると、スキンが適用されていない元の状態に戻ります。ミックスレッドミックスグリーンミックスブルーサムライブルー(勝色モデル)サムライブルー(無印)ミックスグリーン(改

コメント

トップへ戻る