みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、記事を読みやすくするために余白や区切りを挿入する方法をお伝えいたします。
以前解説したとおり、空白ブロックで余白はできません。
![間にいくつか空白ブロックを空けたエディタ画面](https://kotatsu.info/blog/wp-content/uploads/2021/07/blank-blocks.png)
![実際のページ(プレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/07/blank-blocks-preview-1024x637.png)
ですが、記事を読みやすくするために、文の区切りや要素の間には余白を入れたいものです。
![スペーサーブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_spacer.png)
![区切りブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_horizon.png)
こういう時は「スペーサー」と「区切り」ブロックの出番です。
「スペーサー」ブロックの追加方法
![プラスボタンから「スペーサー」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/spacer-add-2.png)
![左上のプラスボタンからメニューを開いて「スペーサー」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/spacer-add-1-868x1024.png)
「スペーサー」は、大幅に余白を入れたいときに使用します。
余白のサイズ調整
![スペーサーの調整](https://kotatsu.info/blog/wp-content/uploads/2021/08/spacer-move.png)
一番下の辺(青い丸)を動かせば、余白のサイズを視覚的に調整できます。
![スペーサーの調整(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/s4IsZtMhCy-min.gif)
数値で微調整したい場合は、右メニューバーにある「ピクセル値での高さ」で設定しましょう。
![ピクセル値での高さ](https://kotatsu.info/blog/wp-content/uploads/2021/08/spacer-height-setting.png)
1〜500pxまで指定できます。
![スペーサーで余白を空けたプレビュー画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/spacer-preview.png)
このとおり、余白が開きました。
「区切り」ブロックの追加方法
「区切り」はその名の通り、話や場面を区切るためのブロックです。
![プラスボタンから「区切り」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/horizon-add-2.png)
![左上のプラスボタンからメニューを開いて「区切り」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/horizon-add-1-868x1024.png)
![区切りブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/horizon-block.png)
見出しでは区切れない場合や、閑話休題などで使用しましょう。
「区切り」ブロックの設定・デザイン調整
![区切りブロックのスタイル](https://kotatsu.info/blog/wp-content/uploads/2021/08/horizon-style.png)
右メニューバーの「スタイル」で、3つのデザインが選択できます。
- 短めの線が入る「デフォルト」
- 横幅いっぱいに線が広がる「幅広線」
- 真ん中に太い3つのドットが入る「ドット」
![配置を変更する](https://kotatsu.info/blog/wp-content/uploads/2021/08/horizon-align.png)
配置は中央寄せしかできません。
![区切り線の色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/horizon-color.png)
「色」で線の色を変えられます。
背景色と同じ色にすれば、区切り線を隠せます。
![区切り線を背景と同じ色に設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/horizon-color-select.png)
以上、余白や区切りの挿入方法を解説しました。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。