WordPressのブロックエディターでは、画像に対するスタイルとして初期状態で「デフォルト」と「角丸」が選択可能です。
テーマによってはカード型が用意されているものがあるようですが、TwentyTwentyには用意されていなかったのでカード型を追加してみました。
方法としては、functions.phpに”register_block_style()”を使って追加します。コードは下記のような感じになります。
// カード型スタイルを追加
register_block_style(
'core/image',
array(
'name' => 'mkyCard',
'label' => 'カード型',
'inline_style' =>
'.is-style-mkyCard {
padding: 10px;
border: solid 1px gray;
box-shadow: 5px 5px 5px gray;
}'
)
);
register_block_style()の第1引数は対象ブロック名です。画像の場合は’core/image’となります。
register_block_style()の第2引数はスタイルを示す連想配列です。’name’にはスタイル名を、’label’にはエディタに表示されるラベルを指定します。’name’と’label’は必須パラメータです。
‘inline_style’では適用するCSS設定を記述します。対象ブロックには”is-style-ブロック名”というクラスが追加されるので、今回の例では”is-style-mkyCard”に対し、”padding”、”border”、”box-shadow”の設定を記述しています。
以上により画像に対するスタイルに’lable’で指定した「カード型」が追加されます。
画像に各スタイルを適用すると、下記のように表示されます。
カード型では上記の’inline_style’に加え、別途CSSファイルでfigureに対し”margin-top”と”margin-bottom”に0を設定しています。
角丸は完全な「丸」ですね。
以上、画像のスタイルにカード型を追加する方法の備忘録でした。’inline-style’では、今回の例に限らず色々な設定を行うことができます。
最後までお読みいただきありがとうございました。