grayishスキン適用中

Cocoonスキンでカスタマイズすると映えるポイントまとめ

スキン開発
この記事は約8分で読めます。

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

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

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

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

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

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

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

ヘッダー部分

グローバルナビ

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

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

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

デザインサンプル

グローバルナビゲーションのブブンデザイン|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 Hea...

インデックスリスト部分

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

エントリーカード

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

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

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

デザインサンプル

美しいデザインと必要な機能のそろったコンテンツカード!CSSを使ったスニペット10選 - SeleQt【セレキュト】
CSSコンテントカードは、ブログ記事や商品・サービス等のコンテンツをまとめるのに最適です。きれいにデザインすることで、各コンテンツをより一層見やすくすることができますし、マウスオーバーエフェクトや画像...
2017年大本命!HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ
Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっています。今回は HTML と CSS、わずかな JavaScript で実装できる...
カードデザインのポイントと実装方法
Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデ...

ページネーション

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

ページャー部分

デザインサンプル

<前へ 次へ>のブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブの<前へ 次へ>のカテゴリです。
【まとめ】ページングCSSおすすめデザインコピペサイト 4選 | Peiのフリーランスエンジニアブログ
ページングCSSのオススメデザイン紹介コピペサイトをまとめました。結構ページングデザインって気になっちゃいませんか?

投稿・固定ページ

見出し

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

H1見出し

H2見出し

H3見出し

H4見出し

H5見出し
H6見出し

デザインサンプル

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
見出しのデザインを集めたWEBデザインギャラリー
見出しのブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブの見出しのカテゴリです。
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
CSSで簡単に作れる見出しデザイン40選|オシャレ装飾で見出しに存在感を
ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるC...

目次

目次はかなりシンプルになっているので、装飾のしがいがあるかと思います。

大抵の投稿には、必ず入る部分なので結構重要箇所かと思います。。

ブログカード

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

内部ブログカード。

Cocoonスキンの機能の仕様
Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。
スキンを作成した際にはぜひ当サイトで紹介させてください
スキンを作成したならば、是非当サイトで紹介させていただければと思います。また、親テーマに同梱させていただければ幸いです。

外部ブログカード。

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

デザインサンプル

美しいデザインと必要な機能のそろったコンテンツカード!CSSを使ったスニペット10選 - SeleQt【セレキュト】
CSSコンテントカードは、ブログ記事や商品・サービス等のコンテンツをまとめるのに最適です。きれいにデザインすることで、各コンテンツをより一層見やすくすることができますし、マウスオーバーエフェクトや画像...
2017年大本命!HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ
Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっています。今回は HTML と CSS、わずかな JavaScript で実装できる...
カードデザインのポイントと実装方法
Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデ...

引用

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

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

デザインサンプル

CSSで作る!魅力的な引用デザインのサンプル30(blockquote)
画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなものからカッコイイものまで。
Blockquote(引用)の重要性 ついでにデザイン変更(コピペOK) | Mug8 Blog
前々からずっと気になっていたBlockquote(引用)のデザインをいじってみる事にしました。基本CSSのみ
記事のアクセントに!CSSで作る引用(blockquote)デザインサンプル集
文章を構成する要素の一つに引用があります。自分の記事に他の人の文章を取り入れたい場合は引用として明記する必要があります。今回はCSSで作る引用デザインをまとめました。文章ページにデザインを添える事がで...

リスト

Cocoonのリストは、ほぼHTMLデフォルトなので、変化をつけると差別化できるかも。

非順序リスト(ネスト化)

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

順序リスト

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

デザインサンプル

CSSで作るリストデザイン38選!オシャレな箇条書きを実現
HTML・CSSをコピペするだけでできるオシャレなリストデザイン38選です。オシャレで可愛い箇条書きリストのデザインを調整方法もあわせて紹介しています。html・cssだけで作成しているのでお試しを!
コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに
【HTML・CSS】コピペで簡単!リストデザイン記事まとめ | さかぽんブログ-MIYAZAKI LIFE
OL、UL、DLといったリストタグを装飾したいときに参考にしているサイト・記事を、”あのデザインどこにあったっけ?”という備忘録代わりに、精査しながらまとめています。基本、画像を使わずにHTML・CS...
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 Sky...

CSS拡張スタイル

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

インフォアイコンボックス
クエスチョンアイコンボックス
エクスクラメーションアイコンボックス
メモアイコンボックス
コメントアイコンボックス
プライマリーボックス
サクセスボックス
インフォボックス
ワーニングボックス
デンジャーボックス

デザインサンプル

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30
HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。
【HTML・CSS】コピペで簡単!ボックス(囲み枠)デザイン記事まとめ | さかぽんブログ-MIYAZAKI LIFE
HTML・CSSを使って、ボックス(囲み枠)デザインをコピペで実装できるサイト・記事を、”あのデザインどこにあったっけ?”という備忘録代わりに、精査しながらまとめています。 ノンデザイナーがWebデザ...
CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン - Naifix
ブログ記事をちょっとおしゃれにするボックス・囲み枠のデザインサンプルをCSSコード付きでご紹介します。コピペだけで使えるので、ブログに合わせて調整してみてください。ブログがおしゃれになれば記事を書くの...

アイキャッチラベル

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

Cocoonのアイキャッチラベル

パンくずリスト

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

Cocoonのパンくずリスト部分

デザインサンプル

パンくずリストのブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブのパンくずリストのカテゴリです。
パンくずリストとは?作り方とCSSデザインサンプル12選
ウェブサイトやブログに設置する「パンくずリスト」について解説します。パンくずリストとは?から始まり、設置のメリット、設置方法、CSSデザインサンプルなどまで詳しく紹介します。
スマホのパンくずリスト19選+α!あのサイトからあのサイトまで!
タイトルは今流行ってる感じで言いたかっただけです。怒られたらやめます。 スマートフォンのパンくずリストがどんな形式のものなのかを撮影しまくっただけの更新。 「どういうのがいい」と言えるようなセンスもな...

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

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

Cocoonのマルチページ用ページャー部分

デザインサンプル

<前へ 次へ>のブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブの<前へ 次へ>のカテゴリです。
【まとめ】ページングCSSおすすめデザインコピペサイト 4選 | Peiのフリーランスエンジニアブログ
ページングCSSのオススメデザイン紹介コピペサイトをまとめました。結構ページングデザインって気になっちゃいませんか?

SNSフォローボタン

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

フォローボタン部分

デザインサンプル

CSSで作る!押したくなるボタンデザイン100(Web用)
HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。
CSS・HTMLで作るweb用ボタンデザイン110選
CSSとHTMLだけで作れるボタンデザイン110種です。カッコいい・オシャレ・可愛いCSSボタンが揃っています。アニメーションを使用したエフェクト付きのものまで全てコピペだけで実装可能です。

コメント表示欄

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

コメント表示部分

コメント入力欄

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

コメント入力部分

デザインサンプル

30 Stunning Web UI Form Designs – Bashooka
So in this post i have gathered some stunning examples of web UI forms to help you design an engagin...

サイドバー

サイドバー見出し

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

デザインサンプル

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
見出しのデザインを集めたWEBデザインギャラリー
見出しのブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブの見出しのカテゴリです。
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
CSSで簡単に作れる見出しデザイン40選|オシャレ装飾で見出しに存在感を
ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるC...

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

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

カテゴリーリスト部分

フッター

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

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

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

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

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

デザインサンプル

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

その他

検索ボックス

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

検索ボックス部分

モバイルボタン

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

モバイルボタン部分

背景

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

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

まとめ

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

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

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

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

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