WordPress5.0 Gutenberg スペーサーブロックの調整

こんにちは、ながまさです。
Gutenbergを使っているといろんな疑問にぶち当たってきます。
その中の一つに行間があります。

通常のブロックは1行分しかありません。
もっと行間を開けたい時ってありますよね。
そんなときに便利なブロックをご紹介します。

Gutenberg スペーサーブロック

スペーサーブロックについて

スペーサーブロックは、行間を調整するブロックになります。
特に、段落ブロックと画像ブロックの間隔が狭いように感じますので、スペーサーブロックを使って行間を開けると見やすくなるのではないでしょうか。

それでは、さっそくスペーサーブロックを挿入してみましょう。

スペーサーブロックの挿入

スペーサーブロックってどこにあるの?
はい、スペーサーブロックは「+」のブロック追加の中の「レイアウト要素」の中にあります。
追加方法は簡単で、スペーサーをクリックするだけで挿入されます。

この隙間がスペーサーブロックです。
ソースコードを見てみると100px空いています。

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

スペーサーブロックの幅は変えられる?

上記ソースコードを見てみると、height:100pxとなっています。
そこで、この間隔を調整できないものかと検証してみました。

height: 25pxのスペーサーブロック

height: 50pxのスペーサーブロック

height: 75pxのスペーサーブロック

height: 100pxのスペーサーブロック

スペーサーブロックの修正方法

スペーサーブロックのデフォルト値は「height: 100px」です。
この値を変えたい場合の変更方法になります。

コードエディター → 任意の数値に変更 → ビジュアルエディター → HTMLに変換

このような流れになります。
他にも方法はあるかもしれません。
例えば、cssの書き換えなどです。
ただ、初心者の方は難しいと思います。(自分も現状ではできません)

もし、スペーサーブロックの行間が広すぎると思ったら変えてみるのもアリかとは思います。

今後、テーマで対応と言うことも考えられますので、そこまで深くは考える必要はないかもしれません。
「行間は変えられる」、程度に覚えておいていただければと思います。

*数値変更は自己判断・責任でお願いします。

最新情報をチェックしよう!