WordPress | 背景色ありのテキストに余白をつける方法

2023-02-22WordPress 投稿・エディター,WordPress

WordPress | 背景色ありのテキストに余白をつける方法

「段落」ブロックでは文字色や背景色を指定可能ですが、「wp-block-library-css」を自身で削除していたりすると、余白が無く見た目が微妙になりやすいです。

このページでは背景色ありのテキストに余白をつける方法、正確には「テキストに背景色を指定した場合のpタグにpaddingをつける方法」を紹介しています。

背景色ありのテキストに余白をつける方法

「wp-block-library-css」を読み込んでいない場合、「段落」ブロックの「padding」は「0」になっています。

「wp-block-library-css」を確認すると背景色を指定した際に付与されるCSSクラス「has-background」には「padding: 20px 30px;」が指定されています。

同じような表示にするためにクラス名「has-background」にpaddingを指定します。

以下のサンプルCSSでは「wp-block-library-css」と同様に「padding: 20px 30px;」を指定しています。

p.has-background {
	padding: 20px 30px;
}

また、「wp-block-library-css」を有効にる手もあります。