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

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

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

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

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


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

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


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

見出しのスタイル

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

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

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス

アイコンボックス


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

引用文はこんな感じ

引用元はこんな感じ


テーブルのスタイリング

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

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


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

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

2023年2月
 12345
6789101112
13141516171819
20212223242526
2728 


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

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


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

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

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


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

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


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

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