こんにちは！！ごーです。
Cocoonって無料テーマなのに本当に機能が豊富で最高ですよね！！
無料で使わせてもらうのが申し訳ないくらいです。
機能は豊富ですがデザインはカスタマイズを前提に作ってあるので至極シンプル。
スキンという機能を使えば簡単にデザインを着せ替えることが出来ます。
今回、Cocoon用のスキン【Hygiene】（ハイジーンと読みます）を作成しました。
現在このサイトでもHygieneを使用しています。よろしければご覧になってください！
サイト移転をしたら画像が無くなってしまいました。
特徴
パッと見のCocoonらしさを薄めてちょっと小洒落た感じに。
あと所々に青系とピンク系を基調としたグラデーションを取り入れています。
見出しは以下のようになっています。
H6なんてほとんど使われないと思いますが念の為H6まで設定しておきました。
おすすめポイント
スキンを作成するにあたってめっちゃ苦労しながらも、どうにか思ったように表示させることが出来た箇所なんかはやはり個人的にお気に入りです。
フェイスブックいいねボックス
これはホント苦労したな〜。
まぁ苦労話は置いといてこれ、良くないですか？！
アイキャッチ画像を背景にグラデーションをかけてみました。
ちなみにスマホで見た際、左右の余白がないのも密かに気に入っています。
前後ページのナビゲーション
こちらは前後ページへのナビゲーション。
「前の記事を読む」「次の記事を読む」と表示することでユーザビリティ的にもOKでしょう。
ただ、アイキャッチの一部を切り取る形になるため、アイキャッチに文字とか入れていると残念な感じに・・・。
プロフィールボックス
“この記事を書いた人”のやつですね。
あらオシャレ。
SNSフォローボタンもなかなかいい感じに出来ました。
引用符（””）で囲まれているのは肩書きです。
スマホでのアイキャッチ
デフォルトのCocoonではスマホでのアイキャッチ画像の左右に余白があるんですが、その余白をなくしました。おかげでほんの少しワイドに見せることが出来ます。
ほんの少しの余白があるかないかで結構印象が違いますね。
SNSシェア・フォローボタン
はい。もうこれが一番苦労しました。
ブランドカラー（白抜き）、モノクロ、ブランドカラーと3つのデザインから選ぶことが出来ます。
フォローボタンはそんなに苦労もしなかったけど、シェアボタンはマジで面倒でした。。。
表のスクロールがスルスル〜！
Cocoonのデフォルトではスマホ（iPhoneだけ？）でスクロール可能な表をスクロールさせると少しカクつきますが、スルスル〜と滑らかにスクロールするようにしてます。
こちらは親テーマで採用されました。
その他
あとはもう気になるところを好きなように見て回ってください。PCから見ている方はホバーアクション（カーソルをリンクなどに重ねること）も地味にシャレオツな感じにしたので見ていただけると嬉しいです。
あ、あとアイキャッチのカテゴリーラベルも結構頑張りました。
最新版ダウンロード
最新版のダウンロードはこちらから。
『Hygiene』はワードプレステーマ『Cocoon』をインストールし、有効化した上で動作するスキン機能の一つです。ワードプレステーマ『Cocoon』をお持ちでない方はこちらからダウンロードしてください。
質問や感想、気軽にください。
スキンを使用してみて困ったことや使用した感想等ありましたら気軽にコメント等ください。
記事のコメント欄からでもお問い合わせページからでも、SNSからでもなんでもOKです！
待っています。
最新版をリリースした際はツイッターでつぶやくので是非ツイッターでフォロー！
追記
新しいスキンを作ってみました！
PCでもフッターモバイルボタンを使用でき、ダークスキンとしても使用出来ます。
更に追記
新たなスキンを作ってみました！
いろんな機能を詰めてみました！
コメント
はじめましてクロネコと申します。
この度WordPressでブログを立ち上げるためテーマをcocoonで予定しております。
スキンをどうするか検討しておりましたが、ハイジ様が作られた【Hygiene】を拝見し自分のイメージにぴったりなとても素晴らしいスキンでぜひ利用させていただきたいのですが、一点だけ修正したい箇所がございます。
トップぺーでのタイル型一覧のサムネイルにカーソルを合わせた時に、画像下のブルーのエリア（カテゴリ等が記載されるスペース）がエフェクトしますが、その際に一瞬チカッとフラッシュするので目がとても疲れてしまいます。個人的な感じ方はあると思いますが、出来ましたらズームのホバーのみ有効にしたいと考えておりますが可能でしょうか？
大変厚かましい質問で申し訳ございませんが、宜しくお願い申し上げます。
ハイジです！
コメント、Hygieneの検討ありがとうございます。
質問の件に関しては以下のCSSを追加すればOKだと思います。
.ect-vertical-card .a-wrap:hover .entry-card {background: linear-gradient(225deg, #25125df5 10px, #6f6ab9);
}
上記のコードをお試し下さい。
ハイジ様へ
お忙しい中ご回答いただきありがとうございました。
さっそく試したところ、まさに自分が思っていた通りに編集できました！
これから頑張ってブログにチャレンジしたいと思います！
本当に本当にありがとうございました。
ハイジ様
初めましてmiyoと申します。
テーマをダウンロードしようとしましたが
「パッケージをインストールできませんでした。 style.css スタイルシートには有効なテーマヘッダーが含まれていません。」
となりインストールできませんでした。
どうしたらよいのでしょうか？
コメントありがとうございます！
『Hygiene』は『Hygiene』単体で動作するワードプレステーマではなく、ワードプレステーマ『Cocoon』をインストール、有効化した上で動作するスキン機能の一つとなっております。
よってダウンロードしたzipファイルを”テーマを追加”よりアップロードしても
「パッケージをインストールできませんでした。 style.css スタイルシートには有効なテーマヘッダーが含まれていません。」
と表示されインストールすることが出来ません。
説明不足で申し訳ありません。
ダウンロードページに注釈を加えさせていただきます。
ハイジ様
初めまして、とっても素敵なスキンで
うっとりします。
WordPressスキルは「コピー貼り付け」しか
出来きないのですが、
素敵なスキンで、とっても嬉しいです。
有難う御座います。
一つだけ、教えて頂きたい事があります。
老眼世代の私には、
「前後ページのナビゲーション」が
見ずらいのです。
出来ましたら、
「前後ページのナビゲーション」だけ
元々のCocoon仕様に戻すことは
出来ないでしょうか？
お友達も老眼世代の方が
多いので、よろしくお願いいたします。
返信が遅くなりすいません！
本業があまりにも忙しかったのでPCを全然触ってませんでした。。。（言い訳です）
Hygieneスキンをご使用くださり、またお褒めの言葉を頂きありがとうございます！
さて、前後ページのナビゲーションをもともとのCocoon仕様にしたいとのことですが、以下のcssをstyle.cssに追加してみてください。
.pager-post-navi a.prev-post, .pager-post-navi a.next-post {line-height: 1.2;
}
.pager-post-navi a.prev-post{
flex-direction: row;
}
.pager-post-navi{
margin: 38px 0;
position: relative;
}
.pager-post-navi a.prev-post::before, .pager-post-navi a.next-post::before{
content: none;
}
.pager-post-navi a figure{
min-width: 120px;
max-width: 120px;
}
.prev-post-thumb.card-thumb img, .next-post-thumb.card-thumb img{
opacity: 1;
object-fit: none;
}
.pager-post-navi a.prev-post .prev-post-title, .pager-post-navi a.next-post .next-post-title{
position: relative;
font-weight: normal;
}
.pager-post-navi a.next-post {
flex-direction: row-reverse;
}
.pager-post-navi a.prev-post::before{
content:'\f053';
}
.pager-post-navi a.next-post::before{
content: '\f054';
}
.next-post-title::after, .next-post-title::after{
content: none;
}
.pager-post-navi a.prev-post:hover, .pager-post-navi a.next-post:hover{
background-color: #f5f8fa;
transition: all .5s ease;
color: #333;
}
うまくいかない場合やわからない点ある場合は再度お教えください。
お忙しい所、ありがとうございます。
style.cssにコピーするのも、ドキドキしますが、
貼り付けます。
素敵なスキンを作ってくださって
ありがとうございます。