Cocoonは、スキン機能を搭載しています。

Cocoonスキンの機能の仕様

Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

これは、リッチなデザインをスキン機能に任せて、洋服を着替える感覚でサイトデザインを変更するためのものです。

なので、スキン機能では出来る限りCocoonっぽさはなくなった方が、「着せ替え」感は強まるかと思います。

というわけで、「スキンでCSSカスタマイズするなら、より効果的となるCocoonぽいパーツ」をテーマ作者目線で考えてみました。

出来る限り、CSSを変更してもテーマの機能に影響しない部分を選びました。

ヘッダー部分

グローバルナビ

ヘッダー部分で変更すると効果的なのは、グローバルナビメニューでしょう。

この部分のスタイルを変更するだけで、サイトの印象は大きく変わります。

また、サブメニュー動作にアニメーションをつけると、楽しい操作性になるかもしれません。

デザインサンプル

グローバルナビゲーションのブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ　公式サイト

Webデザインの“ブブン”を集めたブブンデザインアーカイブのグローバルナビゲーションのカテゴリです。

http://croppy.org/category/nav/

HeaderLove – Let's Design an Awesome Header

HeaderLove - Let's Design an Awesome Header. A showcase directory of hand-picked quality Website Header Designs for your...

インデックスリスト部分

インデックスリスト部分のポイント。

エントリーカード

インデックスリストだと、やはりエントリーカードでしょうか。

中でも、カテゴリーラベル部分は、どうしても特徴的になってしまうため、形を変更したり、位置を変更したりすると効果的かもしれません。

エントリーカード全体に、輪郭や影をつけたり、ホバーアニメーションを付けたりするのも良いかもしれません。

デザインサンプル

美しいデザインと必要な機能のそろったコンテンツカード！CSSを使ったスニペット10選 - SeleQt【セレキュト】

CSSコンテントカードは、ブログ記事や商品・サービス等のコンテンツをまとめるのに最適です。きれいにデザインすることで、各コンテンツをより一層見やすくすることができますし、マウスオーバーエフェクトや画像フィルターを使用する

2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ

Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっています。今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用...

カードデザインのポイントと実装方法

Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実

ページネーション

ページネーションも、Cocoonとわかりやすい部分かもしれません。

デザインサンプル

＜前へ次へ＞のブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ　公式サイト

Webデザインの“ブブン”を集めたブブンデザインアーカイブの＜前へ次へ＞のカテゴリです。

ページングCSSのオススメデザイン紹介コピペサイトをまとめました。結構ページングデザインって気になっちゃいませんか？

投稿・固定ページ

見出し

やはり、一番変更できると効果的なのは見出しでしょう。

H1見出し

H2見出し

H3見出し

H4見出し

H5見出し

H6見出し

デザインサンプル

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

見出しのデザインを集めたWEBデザインギャラリー

見出しのブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ　公式サイト

Webデザインの“ブブン”を集めたブブンデザインアーカイブの見出しのカテゴリです。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

CSSで簡単に作れる見出しデザイン40選｜オシャレ装飾で見出しに存在感を

ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめました...

ブログカード

Cocoonでは、ブログカードはシンプルなものにしてあります。悪く言えば、味気ないともいえるかも。

内部ブログカード。

Cocoonスキンの機能の仕様

Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

スキンを作成した際にはぜひ当サイトで紹介させてください

スキンを作成したならば、是非当サイトで紹介させていただければと思います。また、親テーマに同梱させていただければ幸いです。

外部ブログカード。

寝ログ

寝ながら出来るコトや使えるモノを紹介

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

デザインサンプル

美しいデザインと必要な機能のそろったコンテンツカード！CSSを使ったスニペット10選 - SeleQt【セレキュト】

2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ

カードデザインのポイントと実装方法

引用

引用は、本文を書くときも結構使う要素です。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

デザインサンプル

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなものからカッコイイものまで。

http://mugcup8.com/blockquote-styling/

記事のアクセントに！CSSで作る引用(blockquote)デザインサンプル集

文章を構成する要素の一つに引用があります。自分の記事に他の人の文章を取り入れたい場合は引用として明記する必要があります。今回はCSSで作る引用デザインをまとめました。文章ページにデザインを添える事ができますし、是非参考に ...

リストアイテム1
1. リストアイテム1
  1. リストアイテム1
  2. リストアイテム2
  3. リストアイテム3
  4. リストアイテム4
2. リストアイテム2
3. リストアイテム3
4. リストアイテム4
リストアイテム2
リストアイテム3
リストアイテム4

デザインサンプル

CSSで作るリストデザイン38選！オシャレな箇条書きを実現

HTML・CSSをコピペするだけでできるオシャレなリストデザイン38選です。オシャレで可愛い箇条書きリストのデザインを調整方法もあわせて紹介しています。html・cssだけで作成しているのでお試しを！

コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

【HTML・CSS】コピペで簡単！リストデザイン記事まとめ | さかぽんブログ-MIYAZAKI LIFE

OL、UL、DLといったリストタグを装飾したいときに参考にしているサイト・記事を、”あのデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。基本、画像を使わずにHTML・CSSのみで装飾できる記事です。ノンデザイ

https://www.nxworld.net/tips/no-image-css-list-icon.html

テーブル

Cocoonのテーブルはこんな感じ。

タイトル	閲覧数
トップページ	111	以上
投稿ページ	33	以上
固定ページ	22	以上
検索ページ	6	以上

デザインサンプル

オシャレなTableデザインサンプル15点 | コトダマウェブ

ここではtableレイアウトのサンプルをご紹介します。デザインの参考にしてください。

参考にしたいCSSでできるテーブルデザイン10選

こんにちは、工藤です。今回はテーブルデザインについて参考にしたいものを集めました。簡単なようで結構悩んでしまうんですよね・・。目次1 テーブルデザイン1.1 Oranges In The Sky1.2 Nimbupani1.3 Cas

CSS拡張スタイル

ボックスは、使用しなければ表示されない部分ではあるけど。

インフォアイコンボックス

クエスチョンアイコンボックス

エクスクラメーションアイコンボックス

メモアイコンボックス

コメントアイコンボックス

プライマリーボックス

サクセスボックス

インフォボックス

ワーニングボックス

デンジャーボックス

デザインサンプル

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

【HTML・CSS】コピペで簡単！ボックス（囲み枠）デザイン記事まとめ | さかぽんブログ-MIYAZAKI LIFE

HTML・CSSを使って、ボックス（囲み枠）デザインをコピペで実装できるサイト・記事を、”あのデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。ノンデザイナーがWebデザインをすることになった際に、大変助かるあ

CSS で作るおしゃれなボックス（枠線・囲み枠）のデザインサンプル 13 選 - Naifix

コピペで使えるCSSボックスデザインサンプルをご紹介します。サイトのデザインに合わせて使ってみて下さい。WordPressはブロックエディターを使うのもおすすめ。

アイキャッチラベル

アイキャッチラベルもCocoonと気づきやすい部分。

パンくずリスト

目立たない部分ではあるけれど、細部まで手を加えたい場合は。

デザインサンプル

パンくずリストのブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ　公式サイト

Webデザインの“ブブン”を集めたブブンデザインアーカイブのパンくずリストのカテゴリです。

パンくずリストとは？作り方とCSSデザインサンプル12選

ウェブサイトやブログに設置する「パンくずリスト」について解説します。パンくずリストとは？から始まり、設置のメリット、設置方法、CSSデザインサンプルなどまで詳しく紹介します。

スマホのパンくずリスト19選＋α！あのサイトからあのサイトまで！

タイトルは今流行ってる感じで言いたかっただけです。怒られたらやめます。スマートフォンのパンくずリストがどんな形式のものなのかを撮影しまくっただけの更新。「どういうのがいい」と言えるようなセンスもないのですが、個人的な・・・

マルチページ用のページャー

レイアウト見本ページにある、1つの投稿を複数ページに分けるためのページャー。

デザインサンプル

＜前へ次へ＞のブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ　公式サイト

Webデザインの“ブブン”を集めたブブンデザインアーカイブの＜前へ次へ＞のカテゴリです。

ページングCSSのオススメデザイン紹介コピペサイトをまとめました。結構ページングデザインって気になっちゃいませんか？

SNSフォローボタン

フォローボタンは、機能によりデザインが変わる部分ではないので、スキンでも編集しやすいかも。

デザインサンプル

CSSで作る！押したくなるボタンデザイン100（Web用）

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

CSS・HTMLで作るweb用ボタンデザイン110選

CSSとHTMLだけで作れるボタンデザイン110種です。カッコいい・オシャレ・可愛いCSSボタンが揃っています。アニメーションを使用したエフェクト付きのものまで全てコピペだけで実装可能です。

コメント表示欄

コメントメインのサイトなら、デザインを変更したい部分かも。

コメント入力欄

コメント入力フォームは、投稿ページ最後に表示される締めのHTML要素。モバイル向けに、分かりやすく大きくしたけど、変更したい人も多いかも。

デザインサンプル

http://bashooka.com/inspiration/30-stunning-web-ui-form-designs/

サイドバー

サイドバー見出し

サイドバーで一番目立つ部分は、やはりウィジェットの見出し。

デザインサンプル

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

見出しのデザインを集めたWEBデザインギャラリー

見出しのブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ　公式サイト

Webデザインの“ブブン”を集めたブブンデザインアーカイブの見出しのカテゴリです。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

CSSで簡単に作れる見出しデザイン40選｜オシャレ装飾で見出しに存在感を

カテゴリ・アーカイブリスト

カテゴリと、アーカイブリストも簡素なものなので、装飾を作るのもありかも。

フッター

フッターメニュー＆クレジット

フッターは、背景色などを付けるとよりフッターらしさが増すかもしれません。

ただし、濃いめの色にしてしまうと、文字色を反転する必要があるので、それが結構面倒かも。

個人的には、背景色を変更するなら薄めの色にする方が、開発コストが低くて楽だと思います。

前作のSimplicityでは、フッターの背景色を濃い目の黒にしていたので、全ウィジェットに対応する文字の反転に苦労した思い出。

デザインサンプル

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

いろんなサイトのフッターを集めたWEBデザインギャラリーリンク集

その他

検索ボックス

検索ボックスも、地味と言えば地味。

モバイルボタン

スマホなどで表示されるモバイルボタンの、色やアイコンを変えるというのもありかも。

背景

あと、サイト全体の背景色は色替えだけで全く違ったサイトに感じられます。

背景画像を変更すると、より目を引きます。ただし、他の人が作成した画像使う場合はライセンス関係を考慮する必要はあると思います。

まとめ

そんなわけで、テーマ作者が考える「スタイル変更すれば効果的なHTMLパーツ部分」を抽出してみました。

ここら辺の、色や背景色、アイコンフォント、枠線、余白程度を変えたぐらいでは、Cocoon動作に影響はほぼないかと思います。

それでいて、「Cocoonと別物感」は出やすいかと思います。

もし、スキンを作成された場合は、サイトで紹介させていただくので、フォーラムもしくはメールでご連絡いただければ幸いです。

ヘッダー部分

グローバルナビ

デザインサンプル

インデックスリスト部分

エントリーカード

デザインサンプル

ページネーション

デザインサンプル

投稿・固定ページ

見出し

H1見出し

H2見出し

H3見出し

H4見出し

H5見出し

H6見出し

デザインサンプル

目次

ブログカード

デザインサンプル

引用

デザインサンプル

リスト

非順序リスト（ネスト化）

順序リスト

デザインサンプル

テーブル

デザインサンプル

CSS拡張スタイル

デザインサンプル

アイキャッチラベル

パンくずリスト

デザインサンプル

マルチページ用のページャー

デザインサンプル

SNSフォローボタン

デザインサンプル

コメント表示欄

コメント入力欄

デザインサンプル

サイドバー

サイドバー見出し

デザインサンプル

カテゴリ・アーカイブリスト

フッター

フッターメニュー＆クレジット

デザインサンプル

その他

検索ボックス

モバイルボタン

背景

まとめ