ゆるけーのポートフォリオサイトはこちら

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

この記事は約2分で読めます。

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

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


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

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


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

見出しのスタイル

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

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

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス


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

引用文はこんな感じ

引用元はこんな感じ


テーブルのスタイリング

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

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


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

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

2022年9月
 1234
567891011
12131415161718
19202122232425
2627282930 


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

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


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

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

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


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

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


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

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