WordPressで見出しブロックと段落ブロックの使い方
![](https://tart.co.jp/wp-content/uploads/txt2img/txt2img_p-25147_uq-mbhla3z2a8hx4kvj-1024x538.png)
ブロックエディタを扱う場合、見出しブロックと段落ブロックを使うことが一番多いでしょう。
ブロックエディタの超基本である「見出しと段落」ブロックを使いこなせるようになっておきましょう。
今回は例として、以下のような見出しと段落を追加してみます。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-168-768x591.png)
ブロックエディタを使う前に
ブロックエディタを上手に使いこなすためのコツを1つ紹介します。
それは以下のアイコンから「リストビュー」を表示させておくことです。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-169.png)
すると、ブロックエディタのブロック要素が階層構造で左パネルの「リストビュー」に表示されます。
ブロックエディタはお世辞にも見やすく使いやすいとは言えません。すぐにレイアウトや編集箇所を見失いがちです。
リストビューを表示させておくことで構造を常に階層で把握することができます。
では、実際のブロックエディタでの作成に移ります。
見出しを追加する
見出しブロックを追加していきます。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-170.png)
追加されたブロックにテキストを入力し、見出しのサイズを変更します。
見出しのサイズはH1~H6までありH1が一番大きく重要な見出しとなります。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-171.png)
段落を追加する
次に段落ブロックを追加します。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-172.png)
追加されたテキストに内容を入力して、テキストを中央寄せします。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-173.png)
スペーサーブロックを追加する
少しデザイン的に窮屈なので、空白を入れて整えていきます。
空白スペースを確保するためのスペーサーブロックを追加します。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-174.png)
スペースの高さを決めます。4remとしてください。
※remはCSSで使うサイズの単位で、サイト内の基準文字の大きさを1とした時の相対的サイズです。4ならサイト内文字の4倍です。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-175-768x509.png)
同様にして見出しと段落のまわりに以下のようにスペーサーブロックを入れてみて下さい。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-176-768x495.png)
これで見出しと段落の設定ができました。
![](https://tart.co.jp/wp-content/uploads/2023/09/image-168-768x591.png)
おまけ
初心者向けのホームページの作り方を網羅的にまとめたページをぜひご覧ください。