スペーサーブロックをうまく使おう - OPENCAGE
新テーマ「STORK19」はこちら!

スペーサーブロックをうまく使おう

スペーサーブロックの使い方

WordPressのブロックエディタには「スペーサー」というブロックがありますが、その機能と使い方についてご存知でしょうか。

スペーサーブロックはブロック間の余白を調整するのに役立つツールなのですが、実際にどのような場面で使えるのか、いくつか事例を交えて解説していきます。

スペーサーブロックの使い方

ブロックエディタ内の余白(スペース)を入れたい箇所で「スペーサー」を追加します。

スペーサーブロックの追加

スペーサー設定でピクセル値を変更、もしくはブロックのマーカーを上下にドラッグして、スペーサーの高さを調整できます。

スペーサー設定

スペーサーブロックの使い所

段落間の余白調整に

文章(段落)同士の間隔を空けたいとき、スペーサーブロックを使うと便利です。

通常の段落の場合はこんな感じ…

この新しいエディターのゴールは、WordPress へのリッチコンテンツの追加をシンプルで楽しくすることです。

この投稿全体がコンテンツのパーツ—LEGO ブロックのようなもの—により構成されており、動かしたり操作できるようになっています。

カーソルを動かすと、様々なブロックが枠線と矢印とともにフォーカスされます。

矢印を押すとブロックをすばやく並び替えることができ、コピー & ペーストしているうちに内容が消えてしまう恐れがありません。

OPENCAGE

こういう長文が続くと、読むのが疲れそうに感じるかも知れませんね。

スペーサーを挿入して段落間の余白を調整

それぞれの段落の間にスペーサーブロックを挿入してみました。(スペーサーの高さ40px)

スペーサーを挿入すれば段落がスッキリ

あこの新しいエディターのゴールは、WordPress へのリッチコンテンツの追加をシンプルで楽しくすることです。

この投稿全体がコンテンツのパーツ—LEGO ブロックのようなもの—により構成されており、動かしたり操作できるようになっています。

カーソルを動かすと、様々なブロックが枠線と矢印とともにフォーカスされます。

矢印を押すとブロックをすばやく並び替えることができ、コピー & ペーストしているうちに内容が消えてしまう恐れがありません。

OPENCAGE

文章間に余白が生まれると、気軽に読めるように感じませんか?

文章の間隔を適切に空けることで、長い記事でも読みやすくなります。

文章との間隔を空ける際、空の段落([return]キー)を作ったり、連続改行([shift]+[return]キー)などで対応していませんか?空の<p>タグや<br>タグの連続使用はHTMLの文書構造において好ましくないようなので、スペーサーブロックを使うようにしましょう。

画像上下の余白調整に

このように、画像ブロックには最初からある程度の余白は設けられています。

物書きをする女性

ただ、文章と画像が隣接していて少し窮屈に見える場合は、余白を入れてみましょう。

スペーサーを挿入して画像上下の余白を調整

画像の上と下にスペーサーブロックを挿入しました。(スペーサーの高さ50px)

物書きをする女性

画像の周りに余白を作ることで窮屈さを解消できる上、画像も際立ちます。

OPENCAGE

画像と文章のバランスを見ながら余白を調整してみてください。

グループブロックの余白調整に

ブロックパターンやグループブロックでコンテンツを作成した際の余白調整にも使えます。

見出し

もう少し背景上下に余白が欲しい…

スペーサーを挿入してグループ内の余白を調整

見出しの上とボタンの下にスペーサーブロックを挿入しました。(スペーサーの高さ:見出しの上20px / ボタンの下30px)

見出し

スペーサーで自由に余白を調整できます!

OPENCAGE

こういう微妙な余白調整もできるので便利ですね。

まとめ

適切に余白がとられたページは見やすく読みやすいので、ユーザーにとって優しいコンテンツと言えます。

内容が充実している上、目で見ても綺麗なサイトは再訪率の向上に繋がると思いますので、記事作成時はプレビューで確認しながら、ユーザー目線を意識するようにしましょう。

CHECK! OPENCAGEのアフィリエイトプログラムについて /

NEWバージョン!

究極のモバイルファースト
WPテーマ「STORK19」

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。

いさぎよく、シンプル。
WPテーマ「スワロー」

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。

「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。