box shadow

WordPress 6.5 ブロックエディタで、一部のブロックでシャドーのサポートが始まりました。

シャドーをサポートするブロック

  • ボタンブロック wp-block-button
  • カラムブロック wp-block-columns, wp-block-column
  • 画像ブロック  wp-block-image
  • アイキャッチ画像ブロック wp-block-post-featured-image

emulsion テーマでの注意点

スタイルバリエーションで黒背景のデザインを使用している場合、まだ、styles/****.jsonに黒系用の preset値を上書きすることができないため、ご自身で、CSS変数の上書きを行っていただく必要があります。

設定例

サイトエディタの追加CSSに以下を追加すると、影が赤く表示されます。

body{
--wp--preset--shadow--natural: 6px 6px 9px rgba(255, 0, 0, 0.8);
}

関連ページ:block image

--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);

Sunset Landscape” by Ales Krivec/ CC0 1.0

--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);

Sunset Landscape” by Ales Krivec/ CC0 1.0

--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);

Sunset Landscape” by Ales Krivec/ CC0 1.0

--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);

Sunset Landscape” by Ales Krivec/ CC0 1.0

--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);

Sunset Landscape” by Ales Krivec/ CC0 1.0

hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sunset Landscape” by Ales Krivec/ CC0 1.0

emulsin 3.1.3 でモバイルでの表示は、以下のように修正予定です。

[emulsion_relate_posts]