現在デフォルトスキンとして「Bizarre-food(ブルーカレー) 」適用中。近日同梱予定。

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

開発者向け
この記事は約8分で読めます。

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

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

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

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

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

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

ヘッダー部分

グローバルナビ

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

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

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

デザインサンプル

グローバルナビゲーションのブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブのグローバルナビゲーションのカテゴリです。
http://croppy.org/category/nav/
https://headerlove.com/

インデックスリスト部分

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

エントリーカード

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

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

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

デザインサンプル

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

ページネーション

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

ページャー部分

デザインサンプル

<前へ 次へ>のブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブの<前へ 次へ>のカテゴリです。
【まとめ】ページングCSSおすすめデザインコピペサイト 5選
  ノンデザイナーの為のおすすめCSSコピペサイトまとめシリーズいきます。 今回はページングとかペー…

投稿・固定ページ

見出し

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

H1見出し

H2見出し

H3見出し

H4見出し

H5見出し
H6見出し

デザインサンプル

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

目次

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

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

ブログカード

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

内部ブログカード。

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

外部ブログカード。

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

デザインサンプル

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

引用

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

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

デザインサンプル

CSSで作る!魅力的な引用デザインのサンプル30(blockquote)
画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなものからカッコイイものまで。
Blockquote(引用)の重要性 ついでにデザイン変更(コピペOK)
 前々からずっと気になっていたBlockquote(引用)のデザインをいじってみる事にしました。基本CSSのみで編集していきます。気に入ったらご自由にコピペして使ってください。 カスタマイズに関しては必ず子テーマを編集し、バックアップを取っておくようにしましょう。 Blockquote(引用)の重要性 GoogleのM...
記事のアクセントに!CSSで作る引用(blockquote)デザインサンプル集
文章を構成する要素の一つに引用があります。自分の記事に他の人の文章を取り入れたい場合は引用として明記する必要が…

リスト

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】コピペで簡単!リストデザイン記事まとめ
OL、UL、DLといったリストタグを装飾したいときに参考にしているサイト・記事を、"あのデザインどこにあったっけ?"という備忘録代わりに、精査しながらまとめています。基本、画像を使わずにHTML・CSSのみで装飾できる記事です。
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 | NxWorld
いずれも`li`要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。使用できるブラウザは限られてきますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。

テーブル

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

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

デザインサンプル

オシャレなTableデザインサンプル15点 | コトダマウェブ
ここではtableレイアウトのサンプルをご紹介します。デザインの参考にしてください。
参考にしたいCSSでできるテーブルデザイン10選
こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんです

CSS拡張スタイル

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

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

デザインサンプル

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

アイキャッチラベル

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

Cocoonのアイキャッチラベル

パンくずリスト

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

Cocoonのパンくずリスト部分

デザインサンプル

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

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

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

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

デザインサンプル

<前へ 次へ>のブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
Webデザインの“ブブン”を集めたブブンデザインアーカイブの<前へ 次へ>のカテゴリです。
【まとめ】ページングCSSおすすめデザインコピペサイト 5選
  ノンデザイナーの為のおすすめ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 engaging web form.

サイドバー

サイドバー見出し

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

デザインサンプル

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

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

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

カテゴリーリスト部分

フッター

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

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

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

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

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

デザインサンプル

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

その他

検索ボックス

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

検索ボックス部分

モバイルボタン

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

モバイルボタン部分

背景

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

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

まとめ

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

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

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

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

スキンに不具合があればご報告ください

「デザインが崩れている」とか「ここにデザインが適用されていない」等の不具合がありましたら以下でご報告いただければ幸いです。

Cocoon フォーラム
Cocoon ディスカッション掲示板

オリジナルスキンを紹介させてください

スキンを作成した場合は、是非お知らせください。

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

当サイトの記事で紹介させていただきます。

開発者向けスキン
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年10ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:8ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント

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