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」を有効にる手もあります。