WordPress | テキストの背景色にpaddingをつける

2020-01-22WordPress Gutenberg,WordPress

wp-block-library-cssなしで段落ブロックの背景色にpaddingをつける

Gutenbergの段落ブロック(pタグのテキスト)では文字色や背景色を指定可能ですが、「wp-block-library-css」を自身で削除していたりプラグインや利用しているテーマの設定でを読み込まない設定にしていると、ピッチピチすぎてイマイチです。

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

wp-block-library-cssなし

「wp-block-library-css」を読み込んでいない場合、paddingは0になっています。

好みもあるかもしれませんが、これだと10年くらい前のWEBサイト感が漂っている気がします。

テキスト

「wp-block-library-css」あり

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

テキスト

「has-background」にpaddingを指定

wp-block-library-cssと同様に「padding:20px 30px;」でも良いのですが、これはこれで個人的にはpaddingつけすぎ感があるので控えめにしてみました。

p.has-background{
	  padding: 0.6em;
}

テキスト

wp-block-library-cssを有効にすべきか

余談です。

これだけでなくwp-block-library-cssは多くのブロック要素のデザインに影響を与えているので有効にするのも全然良いと思います。

しかし、AMPページを実装している場合はwp-block-library-cssはサイズが大きくAMPページでは使えない(AMPエラーになる)ので結局はAMP用にCSSを記述していくことになってしまいます。

おそらくWordPressでAMPを実装している場合、実装しているプラグインかテーマによってAMPページではwp-block-library-cssが読み込まれていないはず。

そう考えるとwp-block-library-cssは使わずに、必要な要素へのスタイルだけ記述していった方が良い気がします。

2020-01-22WordPress Gutenberg,WordPress

Posted by Yousuke.U