WordPressで余白や区切りの挿入方法【初心者向け/WordPressの使い方】

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、記事を読みやすくするために余白や区切りを挿入する方法をお伝えいたします。

以前解説したとおり、空白ブロックで余白はできません

間にいくつか空白ブロックを空けたエディタ画面
エディタ画面
実際のページ(プレビュー)
実際のページ(プレビュー)

ですが、記事を読みやすくするために、文の区切りや要素の間には余白を入れたいものです。

スペーサーブロックアイコン
区切りブロックアイコン

こういう時は「スペーサー」「区切り」ブロックの出番です。

「スペーサー」ブロックの追加方法

プラスボタンから「スペーサー」ブロック選択
エディタ画面の「ブロックを追加」から「スペーサー」ブロック選択
左上のプラスボタンからメニューを開いて「スペーサー」ブロックを選択
画面左上プラスボタンからメニューを開き「スペーサー」ブロック選択

スペーサー」は、大幅に余白を入れたいときに使用します。

余白のサイズ調整

スペーサーの調整

一番下の辺(青い丸)を動かせば、余白のサイズを視覚的に調整できます。

スペーサーの調整(アニメーション)

数値で微調整したい場合は、右メニューバーにある「ピクセル値での高さ」で設定しましょう。

ピクセル値での高さ

1〜500pxまで指定できます。

スペーサーで余白を空けたプレビュー画面
プレビュー画面

このとおり、余白が開きました。

「区切り」ブロックの追加方法

区切り」はその名の通り、話や場面を区切るためのブロックです。

プラスボタンから「区切り」ブロック選択
エディタ画面の「ブロックを追加」から「区切り」ブロック選択
左上のプラスボタンからメニューを開いて「区切り」ブロックを選択
画面左上プラスボタンからメニューを開き「区切り」ブロック選択
区切りブロック

見出しでは区切れない場合や、閑話休題などで使用しましょう。

「区切り」ブロックの設定・デザイン調整

区切りブロックのスタイル

右メニューバーの「スタイル」で、3つのデザインが選択できます。

  • 短めの線が入る「デフォルト
  • 横幅いっぱいに線が広がる「幅広線
  • 真ん中に太い3つのドットが入る「ドット
配置を変更する

配置は中央寄せしかできません。

区切り線の色設定

「色」で線の色を変えられます。

背景色と同じ色にすれば、区切り線を隠せます。

区切り線を背景と同じ色に設定

以上、余白や区切りの挿入方法を解説しました。

その他のブロックについての解説は、WordPressレクチャーからご覧ください。

受付時間 平日10:00~17:00(土日祝除く)

東京オフィス
香川オフィス
関連の事業・サービスの詳細はこちら!
WordPressのログイン画面と投稿管理画面
WordPressの使い方 シリーズ
火燵でも利用しているCMS「WordPress」の使い方です。