MENU

WordPress ブロック間の余白をあける方法!スペーサーを使って見やすいサイトに

WordPressブロック感に余白をあける方法

投稿を作成していて、文章の行間を調整したい、もう少し余白をあけたい!と思ったことはありませんか?

🔰リサーチャーまるお

WordPressのブロックエディタでブロック同士がくっつきすぎて
読みにくかったり、画像に文字がくっついているせいで窮屈な感じに見えるんすよ!

集まる集客®総研リサーチャー道満早苗

ブロック間の余白をあけるとスッキリとバランスよくなるよ!

この記事ではWordPressブロック間の余白を入れる方法を解説しています。

WordPressブロックエディタでブロック間の余白をあける時には
スペーサー」ブロックを使います。

この記事を読むとできること
  • スペーサーを使う手順がわかる!
  • スペーサーを使うことができる!

WordPressブロック間の余白を適切にあけることでWEBページの見た目が整い、見やすくなりますよ。

目次
総研リールメーカー

WordPressブロックエディタで余白をあけるならスペーサー!

WordPressブロックの余白をあける

WordPressでブロックとブロックの余白を作る際に使うのが「スペーサー」ブロックです。

ブロック間に余白(スペース)を入れる方法はとても簡単!

例としてWordPressで実際の記事に「スペーサー」ブロックを追加する手順を紹介します。

 スペーサーの挿入方法

WordPressブロックの余白をあける

上の画像はWordPress編集画面で3つの段落ブロックを入れています。

プレビューでは次のように表示されます。

WordPressブロックの余白をあける

2つ目と3つ目のブロックの余白を入れてみます。ブロックの間に表示される「+」をクリックします。

WordPressブロックの余白をあける

よく使うブロックが表示されるので、「スペーサー」がない場合は検索窓に「スペーサー」と入れてください。または、全て表示をクリックすると画面左にブロック選択画面が現れるので「スペーサー」を選択します。

WordPressブロックの余白をあける

このように「スペーサー」が出てくるのでクリックするとブロックを追加できます。

WordPressブロックの余白をあける

また、左上の「+」からも「スペーサー」ブロックを選択してブロックを追加することもできます。

WordPressブロックの余白をあける

画面左のブロック設定画面から「スペーサー」を選択し、クリックしてください。

これで、編集画面に「スペーサー」ブロクが追加表示されます。

WordPressブロックの余白をあける

「スペーサー」ブロック追加後のプレビュー画面が下のようになります。

WordPressブロックの余白をあける

スペーサーの余白幅の調整 

余白の幅の調整については

ブロックが青く囲まれているので下に表示されている◯にカーソルを合わせて動かすと余白の幅を変える事ができます。

スペーサーブロックの幅分が余白になりブロックの間にスペースがあいて表示されます。

WordPressブロックの余白をあける

2番目のブロックと3番目のブロックの余白が広くなっています。

スペーサーの余白の幅の調整は画面右側のブロックの設定からも可能です。

WordPressブロックの余白をあける
WordPressブロックの余白をあける

スペーサーの幅を直接数字を入れて決めることもでき、一定の間隔を開けたいときには便利です。

繰り返し同じ幅のスペーサーを使う場合は「複製」と「上下移動効率的に使用することもできます。

WordPressブロック間の余白を入れるメリット

🔰リサーチャーまるお

スペーサーを使ってブロック間の余白を作るメリットは
何があるんすか?

「余白」はデザインの一部であり、読みやすさと見た目のバランスを整えるための重要な要素です。

余白を自由に調整できる

WordPressでは、「スペーサー」ブロックを使うことで、ブロック同士の余白を自分好みに調整できます。

この自由度はとても便利です。

例えば、見出しと本文の間を少し広めにして、内容を際立たせたい場合や、画像とテキストの間に余白を足してスッキリしたデザインにしたい場合にも簡単に対応できます。

余白の微調整ができることで、読者にとってより心地よい見た目を提供できるのが大きなポイントです。

余白を作ることで読みやすくなる

余白には、視覚的な「呼吸スペース」を作る効果があります。

詰まった文章や画像が続くと、読み手に圧迫感を与えてしまいますが、余白を適切に入れることで、情報が整理され、すっと内容が頭に入ってきます。

特に、スマートフォンやタブレットで閲覧する場合、適度な余白があるとスクロールがスムーズになり、ストレスを軽減できます。

読みやすいサイトは訪問者の滞在時間を延ばすだけでなく、再訪問にもつながりやすいですね。

集まる集客®総研リサーチャー道満早苗

「スペーサー」ブロックを使えば、それを簡単にコントロールできるので、ぜひ取り入れてみましょう!

まとめ:WordPressブロックエディタの余白設定はスペーサーを使おう!

今回は、WordPressブロックエディタでブロック間の余白をあけるには「スペーサー」を使うと良い!ということを解説してきました。

ポイントは3つ!

  • 余白を作るために「スペーサー」という機能がある。
  • スペーサーで余白の幅の調整もできる。
  • 余白ができることで読みやすくなりユーザビリティの向上になる。

WordPressのブロック間に余白をいれることで、デザインがゴチャゴチャしているときに、「スペーサー」ブロックを入れてスッキリ見せることができる。

見出しを目立たせたいときは余白をしっかりあけるなど幅の調整ができるのが良いですね。

余白がしっかりあると、サイト全体が読みやすくなって、読者にとっても優しいデザインになります。ユーザビリティが上がれば、サイトの評価も自然と良くなりますよ。

🔰リサーチャーまるお

スペーサーを使うと、見た目も良くなって、読みやすさもアップするんすね!

集まる集客®総研リサーチャー道満早苗

スペーサーを活用してスッキリ見やすいサイトを目指してくださいね。

よかったらシェアしてね!

この記事を書いた人

私は集まる集客総研の
リサーチャーです。

私には夢があって

「集まる集客®総研」を
個人起業家さんが
集客で困ったり悩んだ時に

「一番頼りになる!」
「ここに来れば安心!」
「ここの記事が一番わかりやすい!」

そんな場所にすることなんです。

私は普通の主婦で
3人の子供を育てながらパートをしていました。

夫が頑張って働いてくれていたので
少しは家計費の足しにもしていましたが
自分のお小遣いが稼げればいいわ。
と呑気に過ごしてきました。


子どもたちの手が離れ、
さぁ、これから本気で働こう!
と思った時に

自分には何の資格もない
子育てをしながら正社員で働いてきた
ママ友さんのように
スキルも保証もない
ということに気づいたんです。

これから自分ができることは
何があるのだろうと考えた時に
日記のように付けていたブログがありました。

大好きで書いていたブログが収入になるということを知り
挑戦が始まりました。


ブログ塾、教材、セミナー
上手くいかないので、あれでもないこれでもないと
まさにノウハウコレクターになっていました。

ブログで稼ぐのはすぐにできるわけではない
諦めずに続けていけば、
ママ友さんも羨むような報酬が入るようになるはず!
とあがくほど焦りました。


どうして、私のブログは見てもらえないんだろう
人の役に立ちたいと頑張っているのに。



もう限界かも・・・と諦めかけていた時
集まる集客®プロデューサー
長瀬葉弓さんに出会いました。


初めて受け取った
「ラブレター」に感動!


こんなお客様へのラブレターを書くことができれば
私の書いた記事が
多くの人に届くかもしれないと思いました。


私は読者さんの心に届くラブレターを書けていなかった。
ということに気づいたのです。



そこから人生180°転換!

現在は集まる集客リサーチャーとして楽しく研究し記事を書いて
います。

「ここの記事が一番わかりやすい!」が一番のほめ言葉!

多くの方に届く文章で集客のお手伝いができるよう
三度の飯より研究!とオタク化しています。



プライベートは

夫との2人ぐらし
趣味は手芸と読書
動物占いはゾウ
岡山県在住です。

目次