ブロックの配置の変更方法
Webページを作りこんだり、修正を加えるようになると、
元々ブロックの配置を上下に変更するなどが起こります。
また、マウスでブロックの場所を挿入しにくい場合などは、
一旦ブロックを挿入し、その後、ブロックの位置を上下操作して
挿入したい位置まで移動するという操作もできます。
ブロックを挿入した後、各ブロックの配置位置を変更する場合の
操作方法について解説します。
挿入されたブロックの順番を変更する場合、基本的には上下にブロックを移動させます。
上下移動の操作は、まず、移動したいブロックをクリックし編集できる状態にします。
その後、下の画像のように、ブロックを上下させる機能のボタンを使います。
このボタンをクリックすることで、指定したブロックを上下に移動できます。
画像：ブロックの順番を変更するボタン
上向きの方向のボタンをクリックすると、ブロックを上部に移動できます。
また、下向き方向のボタンをクリックすると、ブロックを下部に移動できます。
画像：「上に移動」が表示されたボタン
マウスを使ったり、ノートパソコンのマウスパッドを使ったりなど、
パソコン作業環境にもよるのですが、なかなかブロックとブロックの間に
挿入しづらい場合などは、先にブロックを挿入し、その後にブロックの移動をすると、
作業がスムーズになります。
例えば、下の画像のように、「文章①」用の画像を配置したい場合、
「文章③」の後に「画像」ブロックを挿入配置します。
画像：先に「画像」ブロックを挿入した状態
その後、文章①の下に移動するため、先ほどのボタンにマウスでカーソルを持っていき
（「上に移動」という表示がでます）、2回クリックすると、「文章①」の下に移動できます。
画像：「画像」ブロックを「文章①」の下に移動させた状態
「スペーサー」ブロックを配置する
記事の内容ごとに線やスペースを設け、各記事を区分しやすく表示するときには、
「スペーサー」ブロックや「区切り」ブロックを使います。
この2つのブロックを配置すると、ページ全体にメリハリを持たすことができたり、
「画像」ブロックやその説明文の「段落」ブロックを一組にしてまとめたりすることができます。
まずは、「スペーサー」ブロックの使い方について解説します。
「スペーサー」ブロックは、ブロックとブロックの間に空間を設けたい場合に使用します。
例えば、「見出し」ブロックと出だしの文章にあたる文章①の「段落」ブロックの間に、
スペースを設け「見出し」をハッキリさせたい（目立たせたい）とします。
（下の画像が「スペーサー」ブロックを挿入した場所）
画像：「スペーサー」ブロックを入れたい場所
「見出し」ブロックと文章①の「段落」ブロックの間にマウスでカールを持っていくと、
下の画像のように、ブロックを追加するために「＋」が表示されまする。
この「＋」をクリックします。
画像：ブロックを挿入する場所
また、「ブロックの挿入方法」という記事でも、4つの挿入方法を解説しておりますので、
参考にしてみてください。
「＋」をクリックすると、挿入するブロックを選ぶ画面が表示される。
画像：挿入するブロックを選択する画面
ここで、挿入するブロックを絞り込むために、検索部分に「スペーサー」と入力します。
（この画面は、よく使うブロックが表示されます。「スペーサー」ブロックを頻繁に使用しているので、すでに、「スペーサー」ブロックが表示されています。）
画像：検索部分に、挿入したいブロックの名前を入力し、絞り込んだ画面
すると、「スペーサー」ブロックが表示されるので、このブロックをクリックすると、
「見出し」と文章①の「段落」ブロックの間に「スペーサー」ブロックが挿入されます。
画像：「スペーサー」ブロックが挿入された画面
この「スペーサー」の高さを調節したい場合、
「スペーサー」ブロックを編集する画面を表示する必要があります。
画面右上部に表示されている設定ボタンがあります（下の画像を参考してください）。
この設定ボタンをクリックします。
画像：「スペーサー」ブロックの編集画面を開く設定ボタンの場所
ブロックの編集画面を開く設定ボタンをクリックすると、
下のように右側に編集画面が表示され、「投稿」と「ブロック」というタブが表示され、
そのうち「ブロック」をクリックします。
この部分「高さ：」を調整する場所があります。ここで、ブロックの高さを調整します。
画面上では、「100」で設定されています。
高さを狭くしたい場合は、数字を小さくしてみてください。
高さを大きくしたい場合は、数字を大きくしてみてください。
また、青色の線に丸の部分をマウスでドラッグしても数字を変更できます。
このスペースを均等に配置するのであれば、高さを合わせる必要があるので、
数字で変更すると全体のバランスが均一に統一されます。
画像：ブロックの編集画面を表示
「区切り」ブロックを配置する
「スペーサー」ブロックは空間を設けて、文章や記事にメリハリをつけますが、
「区切り」ブロックは、境界線を設けて文章や記事にメリハリをつけます。
境界線があるので、視覚的に区分されます。
ブロックを挿入する方法については、上記の「スペーサー」ブロックを配置すると同様です。
「スペーサー」ブロックのところでも参考にしましたが、
「ブロックを挿入する」という記事でも、4つの挿入方法を解説しておりますので、
参考にしてみてください。
「区切り」ブロックには、「スペーサー」ブロックと違い、
区切り線に色を付けることができたり、ドット（点線）区切り線の種類が選べます。
画像：「区切り」ブロックが挿入された状態の画面
「スペーサー」ブロックを挿入した時と同様に、ブロックを挿入する画面を表示し、
検索部分に「区切り」と入力しブロックを絞り込みます（①）。
すると、「区切り」ブロックが絞り込まれ上位に表示されますので、
この「区切り」ブロックをクリックします（②）。
画像：「区切り」ブロックを絞り込み挿入する画面
ブロックの配置を変更する方法と、
配置されたブロックを「スペーサー」ブロックと「区切り」ブロックを使って
メリハリをもたせる方法について解説しました。
最後までご覧いただき、ありがとうございました。