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

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

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


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

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


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

見出しのスタイル

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

アイコンボックスのスタイル

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス


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

引用文はこんな感じ

引用元はこんな感じ


テーブルのスタイリング

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

ヘッダー1ヘッダー2ヘッダー3
表の内容こんなデザインテスト
テストテストテスト
テストテストテスト
テストテストテスト


カレンダーのスタイリング

カレンダーも黒多めにしています。

2024年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  


ブログカードのスタイリング

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


ダウンロードリンク/ソースコード

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

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


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

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


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

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