こんにちは、ハイジ(@haiji-blog)です。
Cocoonって無料テーマなのに本当に機能が豊富で最高ですよね！！
無料で使わせてもらうのが申し訳ないくらいです。
機能は豊富ですがデザインはカスタマイズを前提に作ってあるので至極シンプル。
スキンという機能を使えば簡単にデザインを着せ替えることが出来ます。
今回、Cocoon用のスキン【Hygiene】（ハイジーンと読みます）を作成しました。
現在このサイトでもHygieneを使用しています。
よろしければご覧になってください！
特徴
パッと見のCocoonらしさを薄めてちょっと小洒落た感じに。
あと所々に青系とピンク系を基調としたグラデーションを取り入れています。
見出しは以下のようになっています。
H6なんてほとんど使われないと思いますが念の為H6まで設定しておきました。
おすすめポイント
スキンを作成するにあたってめっちゃ苦労しながらも、どうにか思ったように表示させることが出来た箇所なんかはやはり個人的にお気に入りです。
フェイスブックいいねボックス
これはホント苦労したな〜。
まぁ苦労話は置いといてこれ、良くないですか？！
アイキャッチ画像を背景にグラデーションをかけてみました。
ちなみにスマホで見た際、左右の余白がないのも密かに気に入っています。
前後ページのナビゲーション
こちらは前後ページへのナビゲーション。
「前の記事を読む」「次の記事を読む」と表示することでユーザビリティ的にもOKでしょう。
ただ、アイキャッチの一部を切り取る形になるため、アイキャッチに文字とか入れていると残念な感じに・・・。
プロフィールボックス
”この記事を書いた人”のやつですね。
あらオシャレ。
SNSフォローボタンもなかなかいい感じに出来ました。
引用符（””）で囲まれているのは肩書きです。
スマホでのアイキャッチ
デフォルトのCocoonではスマホでのアイキャッチ画像の左右に余白があるんですが、その余白をなくしました。おかげでほんの少しワイドに見せることが出来ます。
ほんの少しの余白があるかないかで結構印象が違いますね。
SNSシェア・フォローボタン
シェアボタン
フォローボタン
はい。もうこれが一番苦労しました。
ブランドカラー（白抜き）、モノクロ、ブランドカラーと3つのデザインから選ぶことが出来ます。
フォローボタンはそんなに苦労もしなかったけど、シェアボタンはマジで面倒でした。。。
表のスクロールがスルスル〜！
Cocoonのデフォルトではスマホ（iPhoneだけ？）でスクロール可能な表をスクロールさせると少しカクつきますが、スルスル〜と滑らかにスクロールするようにしてます。
スマホで見ている方はお試しください。↓
| 日曜日 にちようび | 月曜日 げつようび | 火曜日 かようび | 水曜日 すいようび | 木曜日 もくようび | 金曜日 きんようび | 土曜日 どようび |
| sun | mon | tue | wen | thu | fri | sat |
その他
あとはもう気になるところを好きなように見て回ってください。PCから見ている方はホバーアクション（カーソルをリンクなどに重ねること）も地味にシャレオツな感じにしたので見ていただけると嬉しいです。
あ、あとアイキャッチのカテゴリーラベルも結構頑張りました。
ちなみにブログカードはこのように。
バージョンアップ情報
ver1.1.5
2018/8/10にver1.1.5を公開しました。
CSSを修正しました。
- ヘッダーロゴにシャドウがかかってしまう設定を削除
- 引用内にリンクを置いた場合”出典：”と勝手に挿入される設定を削除
- シェアボタンがズレてしまうのを修正
- アフィリエイトボタンがIE11やedgeで閲覧した場合デザイン崩れが起きていたのを修正
ver1.1.0
2018/8/5にver1.1.0を公開しました。
１，スマホから見た際のアイコン付きボックス5種類のスタイルをカスタマイズしました。
例：補足情報ボックス）
他のアイコン付きボックスもこんな感じです。
２，アフィリエイトのテキストリンクをボタンリンクや装飾テキストリンクにするためのCSSを入れときました。
アイコン付きやアニメーション付きなど色々なパターンの組み合わせが出来ます。
例）
これに関しては以下の記事で詳しく書いています。
最新版ダウンロード
最新版のダウンロードはこちらから。
ワードプレステーマ『Cocoon』のスキン、『Hygiene』を作成しました。
パッと見のCocoonらしさを薄め、青系とピンク系のグラデーションを所々に使用しています。
ダウンロードは下にある緑のボタンから出来ます。
質問や感想、気軽にください。
スキンを使用してみて困ったことや使用した感想等ありましたら気軽にコメント等ください。
記事のコメント欄からでもお問い合わせページからでも、SNSからでもなんでもOKです！
待っています。
最新版をリリースした際はツイッターでつぶやくので是非ツイッターでフォロー！
コメント
はじめましてクロネコと申します。
この度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 スタイルシートには有効なテーマヘッダーが含まれていません。」
と表示されインストールすることが出来ません。
説明不足で申し訳ありません。
ダウンロードページに注釈を加えさせていただきます。