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

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

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


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

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


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

見出しのスタイル

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

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

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス


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

引用文はこんな感じ

引用元はこんな感じ


テーブルのスタイリング

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

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


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

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

2021年10月
 123
45678910
11121314151617
18192021222324
25262728293031


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

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


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

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

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


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

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


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

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