リストブロックのフォントサイズを指定する方法

現在、Lightning Pro のブロックエディターにはリストブロックのフォントサイズを指定する機能がありません。

今後実装予定のようですので、期待して待ちましょう。

そこで、いまリストブロックのフォントサイズを指定するにはどうしたらよいかを書きます。

CSS でカスタマイズすればなんでもできるのですが、そこまでしなくても、[高度な設定][追加 CSS クラス] に Bootstrap 4 のクラス名を入力してフォントサイズを変更することができるんです。

以下のように h5 と入力するとフォントサイズが少し大きくなります。

リストブロックのフォントサイズを指定する方法

ここに h1 と入力するとフォントサイズがかなり大きくなります。

h5 ⇒ h4 ⇒ h3 ⇒ h2 ⇒ h1 とだんだんフォントサイズが大きくなっていきます。

small と入力するとフォントサイズが小さくなります。

フォントサイズを変更するだけでよいのであれば、このようなやり方もあります。

Lightning には Bootstrap 4 というしくみが組み込まれていて、上記の h5 や small は Bootstrap 4 のクラス名です。

「Bootstrap 4 クラス」でググるとたくさんのクラス名が見つかりますので、眺めていると役に立つのが見つかるかもしれません。

私がよく使う、おすすめのクラス名は mb-0 です。

段落のフォントサイズを大きくすると、段落間が空き過ぎることがあります。

そのようなときに mb-0 を使うと次のブロックとの隙間を小さくすることができます。

mb-0 は CSS の margin-bottom: 0; の指定に相当します。