「メイド・イン・ヘブン」スキン適用中

モノトーン調にデザインされた「モノクロ」スキンを同梱追加

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

CareerLOGを運営されているゆるけーさんが作成されたモノクロスキンを同梱させていただきました。

Cocoonのデザインをモノトーン調にカスタマイズ・スタイリングしました
WordPress無料テーマ「Cocoon」のデザインをモノトーン調にスタイリングしてみました。CSSだけを用いています。この記事ではモノクロデザインの紹介をしていきます。

「モノクロ」スキン

本業がウェブデザイナーのゆるけーさんが作成された、黒を基調としたスキンです。

monochrome_thumb

モノトーン色を効果的に使うことで、締まった感じの印象。ビジネス系ブログとかに合いそう。

レイアウト

主なレイアウトはこちら。

見出し

落ち着いた色合いで、章の違いが分かりやすく読みやすい。

モノクロームスキンの見出し

引用

引用部分はデザインもアイコンも結構変わっています。

モノクロスキンの引用

アイコンボックス

一番よく使われているであろう、アイコンボックスはモノトーン調にデザインが変わっています。

モノクロスキンのアイコンボックス

テーブル

テーブルも落ち着いた感じに。

モノクロスキンのテーブル

カレンダー

カレンダーも少し引き締まった感じ。

モノクロスキンのカレンダー

ブログカード

ブログカードの枠も太めの黒な使われていて、マウスホバーするとアニメーションします。

モノクロスキンのブログカード

エントリーカード

エントリーカードもホバー時にサムネイルがキラリと光るエフェクト入り。

モノクロスキンのエントリーカード

アピールエリア

アピールエリアのマウスホバーエフェクトも気持ちいいですね。

モノクロスキンのアピールエリア

プロフィール

プロフィールのボタンは丸型。

モノクロスキンのプロフィール

ページネーション

ページネーションもかわいくなっています。

モノクロスキンのページネーション

サイドバー

サイドバーウィジェットのクリップが良いアクセントになっています。

モノクロスキンのサイドバー

設定方法

今回紹介したスキンは、Cocoon親テーマに同梱されています。

利用するには、Cocoon設定の「スキン」タブからスキンを適用して保存してみてください。

モノクロスキンの設定方法

詳細はこちらをご参照ください。

Cocoonのデザインをモノトーン調にカスタマイズ・スタイリングしました
WordPress無料テーマ「Cocoon」のデザインをモノトーン調にスタイリングしてみました。CSSだけを用いています。この記事ではモノクロデザインの紹介をしていきます。
タイトルとURLをコピーしました