Twenty Twenty-Two 2 画像の上部に余白を入れる

画像とギャラリーの上部のブロックの間に余白がなくてとても見にくかったので、マージンを入れました。

twenty twenty two image top spacing before

理想的には、テーマが準備した変数を使うのがよさそうですが、一番小さい余白設定が想像以上に大きかったので、値で指定しました。

変数を使った例

外観 → カスタマイズ → CSS追記

.wp-block-image {
	margin-top: var(--wp--custom--spacing--small, 1.25rem);
}
twenty twenty two image top spacing using variants

他のSpacing変数

上記のCSSコードの「small」の部分を「medium」などに帰ると、もっと広くなります。

Spacing変数規定値
smallmax(1.25rem, 5vw)
mediumclamp(2rem, 8vw, calc(4 * var(–wp–style–block-gap)))
largeclamp(4rem, 10vw, 8rem)
outervar(–wp–custom–spacing–small, 1.25rem)

値を使った例

外観 → カスタマイズ → CSS追記

.wp-block-image {
	padding-top:1.25rem;
}

「1.25rem」(=1.26 x 16px)ですから、好きに数値を変えてみてください。

twenty twenty two image top spacing using values

こんなもんかな?

作成者: のろのろ

サイト管理者

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です