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

Cocoonスキン「凸凹」の取扱説明書

超高性能無料WordPressテーマCocoonを
Neumorphismデザインにするためのスキン「凸凹」について説明します。

ダウンロードページと見本

スキンのダウンロードページと見本は別ページを用意しておりますので、そちらを参考にどうぞ。

「凸凹」スキンの売りである、全体色変更と、角丸調節について

スキンを反映したらWordPressダッシュボード⇒外観⇒カスタマイズに、「Neumorphism」というカスタマイズ項目が追加されます。

そちらで角の丸さ、全体の色の設定を行ってください。

調整したら「公開」ボタンを忘れずにクリックしましょう!

角丸調整
角丸調整

デザインの特性上、暗い色だと立体感がなくなるので、できるだけ薄めの色を選ぶ事をお勧めします。

全体色調整

ブロックエディタ(投稿管理画面)でのスキンスタイル反映について

基本、投稿管理画面でも実際のページの見た目とできるだけ同様の見た目になるようにしていますが、
多少の差異は出てしまいますので、ページを公開する前に、「新しいタブでプレビュー」する事をお勧めします。

スキン側からCocoon設定を制御している部分

スキンのデザイン特性上、背景色などは、スキン側からロックしています。

ただ、文字色や、全体のレイアウトなどの設定はロックしていないので、お好みの文字色、レイアウトでお使いいただけます。

ロックしているのはあくまでも背景色関係のみです。

プラグインなどに「凸凹」のスタイルを追加したい場合(※自己責任)

あなたのサイトで、もしプラグインなどで出力しているページがある場合、

追加CSSに以下の参考CSSを組み込む事で、
プラグインの見た目を「凸凹」に合わせる事が可能です。

※凸凹スキンを選択している場合のみ使用可能です。

background: var(--color-bg);/*テーマカスタマイザで選んだ色*/
color: var(--color-ki);/*テーマカスタマイザで選んだ色を濃ゆくした色*/
background: var(--color-shadow-light);/*テーマカスタマイザで選んだ色の光の色*/
background: var(--color-shadow-dark);/*テーマカスタマイザで選んだ色の影の色*/
border-radius: var(--corner);/*テーマカスタマイザで選んだ角丸具合*/
/*実用例*/
box-shadow: 6px 6px 12px var(--color-shadow-dark), -6px -6px 12px var(--color-shadow-light);/*凸デザインにする*/
box-shadow: 2px 2px 5px var(--color-shadow-dark), -2px -2px 5px var(--color-shadow-light);/*薄めの凸デザインにする*/
box-shadow: inset 3px 3px 6px var(--color-shadow-dark), inset -6px -6px 12px var(--color-shadow-light);/*凹デザインにする*/
text-shadow: 1px 1px 0 var(--color-shadow-light);/*凹文字にする*/
border-radius: 0 0 var(--corner) var(--corner);/*下の部分だけ調整した角丸を適用する*/

「凸凹」スキンを作るにあたって参考にさせていただいたテーマとページ

このスキンは下記のテーマを参考に作成しました。
作る過程で作成者の浜野さんのファンになりながら(笑)

テーマカスタマイザの色変更機能などの部分は一部を除いて真似させてもらいました。

Neumorphic
Neumorphicは、ニューモーフィックデザインに基づいた先進的なWordPressテーマです。このテーマはWordPressブロックエディタをサポートしており、ほぼ全てのコアブロックがニューモーフィックデザインに対応しています。カラースキン機能を使ってテーマの色を変更することができ、また各色を個別に調整してオリジナ...
t-hamano/neumorphic
Neumorphic is a advanced WordPress theme based on neomorphic design. - t-hamano/neumorphic

Neumorphismというデザインに決めたのはこのページの影響です。

Skeuomorph Mobile Banking
Skeuomorph Mobile Banking designed by Alexander Plyuto 🎲 for heartbeat. Connect with them on Dribbble; the global community for designers and creative professio...

Neumorphismに興味がある方はこちらに便利なツールがありますので、ご覧ください!

Neumorphism/Soft UI CSS shadow generator
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

最後に

このスキンを作っている間、とても楽しかったです!

Cocoonというテーマを世に生み出してくださった、わいひらさんに感謝を。

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