Cocoonのデザインをモノトーン調にカスタマイズ・スタイリングしました

WordPress無料テーマ「Cocoon」のデザインをモノトーン調にスタイリングしてみました。CSSだけを用いています。

この記事ではモノクロデザインの紹介をしていきます。

【追記】モノクロスキンがCocoonに同梱されました！

こちらのデザインがCocoonのスキンに同梱されました！詳しくはこちらの記事を参考にしてください。

↓目次もモノクロ調にデザインしています！↓

見出しのスタイル

見出しは黒を基調としたスタイルにデザインしています。

アイコンボックス

ちなみに引用ボックスもこんな感じにスタイリングしています。

引用文はこんな感じ
引用元はこんな感じ

表はこのようになっています。

ブログカードはこのように動きます。

デザインのサンプルは以上です。CSSのダウンロードやGithubは以下に記載しました。

ちなみにソースコード(Github)はこちら。（postフォルダ内が最新版のCSSファイルです。）

こちらのデザインがCocoonのスキンに同梱されました！詳しくはこちらの記事を参考にしてください。

是非ご利用ください！
使用したサイトをTwitterやお問い合わせで連絡もいただけるとめちゃくちゃ喜びます。