スペーサーブロック、区切り線

2024年3月28日 2024年5月9日 saito-tutiya2024R6

スペーサーブロックとは、「余白の高さ」を設定することができるブロックです。

余白を意識してブログ記事を作成することで、より読みやすいページを作ることができます。
ページが見やすくなることで、ブログ記事も読みやすくなり、お客様にも伝わりやすくなります。

「余白」を設定して、読みやすいブログを作成しましょう。

まず、投稿の編集ページを開きます。

スペーサーブロックを設定するには、以下の２つのやり方があります。

①『ブロックを選択するには「/」を入力』から設定する
② 『＋』をクリックして設定する

それぞれのやり方を紹介します。

①『ブロックを選択するには「/」を入力』から設定する

『ブロックを選択するには「/」を入力』と表示されている箇所に、「 /（半角スラッシュ）」を入力します。
（※全角だと項目が表示されません。必ず半角スラッシュを入力して下さい。）

表示された項目から「スペーサー」を選択します。

追加されたグレーの四角い枠がスペーサー（余白）です。

② 『＋』をクリックして設定する

『＋』をクリックすると、よく使うブロックが表示されます。
ここで「スペーサー」が表示されていればクリックします。

表示されていない場合は、下部の「すべて表示」をクリックします。

様々なブロックの種類が表示されますので、下にスクロールして「スペーサー」をクリックします。

スペーサー（余白）が追加されました。

スペーサーの高さはいくつかの方法で調節することができます。

① スペーサーブロックの下部をドラッグして、自由な高さに調節する
② 任意の数値で設定して、高さを指定する
③ 数値の横のバーを左右に動かして調整する

プレビュー画面などで、実際の見え方を確認して、余白の高さを設定すると良いでしょう。

区切り線は、ページ内での内容や場面が切り替わるタイミングに使う横線のことです。
長い文章やページ内の情報が多い時に、区切り線でコンテンツを分けることで、読みやすくなります。

ブロックの種類一覧から「区切り」をクリックします。

区切り線は、画面右側の設定から、スタイルを調節することもできます。

① ブロックのタブを選択
②「◐スタイル」タブを選択
③「デフォルト」「幅広線」「ドット」から選ぶ

色を変更する事も可能です。

「サイズ」から、上下の余白を設定することもできます。