当サイトにも適用している「凸凹」スキンですが、Cocoonテーマ内に同梱していただきました!!Cocoonのバージョン 2.2.9以降はダウンロードなどは不要でCocoon設定のスキンタブ内で選択していただけます!!

WordPressテーマCocoonをNeumorphismデザインにするスキン「凸凹」を作成しました!

ワードプレス(WordPress)

WordPressの無料テーマの中でも断トツで高性能!カスタマイズの幅も極大!
そんなWordPressテーマ「Cocoon」のスキンを作成しました!

Cocoonテーマを知らない方はこちらをご覧ください!

さて、そんな今回作成したスキンの名前は「凸凹」(でこぼこ)です!

コンセプトは「立体感」です!
少し前に出てきたNeumorphism(ニューモフィズム)というデザインを参考にして作り上げました!

デザインが反映されている範囲などは、デモサイトを是非ご覧ください!

⇧スキンを実装する方法はダウンロードページに書いてあります。

「凸凹」スキンの特徴

  • 立体的なデザイン
  • 色を好きな色に変更可能
  • 角の丸さを調節可能

「凸凹」スキンの色と角の丸さ調節方法

この「凸凹」スキンを反映すると、
WordPressダッシュボード⇒外観⇒カスタマイズに、
「Neumorphism」というカスタマイズ項目が追加されますので、
そちらで角の丸さ、全体の色の設定を行ってください。

「凸凹」スキンを作った経緯

先日、ふと思い立って最新のWEBデザインが知りたくなり、検索してみたところ、
Neumorphism(ニューモフィズム)というデザインを知り、衝撃を受けました。

そこで早速触ってみたくなり、ふとWordPressのテーマで作っている人がいないか探しました。

するとNeumorphicというテーマが見つかりました!

すぐにインストールして試してみると、ものすごくよかったんです。

早速このデザインを導入することにしました。

そこで、ふと思いました。

大好きなCocoonテーマでこのNeumorphismというデザイン手法を使いたい。

思いついてしまったらもう止まりません。

早速子テーマで作り始めました。

そして、作成中にまたふと思いました。

そういえば、Cocoonにはスキンっていう機能があったな・・・

・・・よし、Cocoonスキンにしてしまおう!

女性受けは微妙かもしれないが、男性の中には僕と同じような好みの人もきっといるはず!

だったらシェアしたい!

そんなこんなで出来上がったのが、今回のCocoonスキン、「凸凹」というわけです。

⇧スキンを実装する方法はダウンロードページに書いてあります。

「凸凹」スキンを作成する上で参考にさせてもらったページ

経緯でも話した、NeumorphicというWordPressテーマを参考にさせてもらっています。

そして一番助けられたのが、こちらの浜野さんという方のgithubページです。

t-hamano/neumorphic
Neumorphic is a advanced WordPress theme based on neomorphic design. - t-hamano/neumorphic

特にWordPressのテーマカスタマイザーでの色変更機能の部分はものすごく勉強になりました。

まとめ

というわけで、Cocoonテーマのスキン「凸凹」を作成したという報告でした!

⇧スキンを実装する方法はダウンロードページに書いてあります。

同梱されたらいいな・・・

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