ブログ

文章に行間(スペース)を自由な広さで作りたい。ブロックエディター|スペーサー

プリト

こんにちは。 プリトです。

ワードプレスでブロックエディターを使用している方で

文章と文章の間にスペースを自由な広さで作りたい!

そんなあなたへやり方をご紹介します。

今回はワードプレスでブロックエディターを使用している方への記事になります。  

クラシックエディターを使用している方へは現時点でお役に立てる内容ではありませんが、将来的にブロックエディターを使用する可能性があるという方は参考にされてみてください。

メリット

文章と文章の間にスペースを広く作ることで読みやすくなり、見栄えも良くなります!

その結果、読者はストレス無く気持ちよく文章を読み進めていけるので、あなたが伝えたい事も伝わります。

記事への滞在時間も長くなり、SEO的にも有利になります。

ちなみに僕はレンタルサーバーを「ロリポップ!

独自ドメインは「ムームードメイン

有料テーマはWordPressテーマ 「ACTION(AFFINGER6)」を使用しています。

では解説していきます。

スペーサーを使って行間のスペースを自由に作る

スペーサーとは

多種あるブロックの中の1つで,その呼び名を「スペーサー」といいます。

スペーサーに出来ることは「文章と文章の間、またはブロックとブロックの間に空間=スペースを作る事」です。

では例をあげて実際にどの様になるかを見ていきましょう。

こちらの画面は文章と文章の間にスペーサーを入れて無い場合です。

例1)下図は文章と文章の間の広さ = スペーサーの広さ(スペース幅)を「50PX」にした場合になります。

 PX(ピクセル)とはスペーサーブロックの幅の広さを表す単位になります

例2) 下図はスペーサーの広さを250PXにした場合になります。

50PXと比べるとスペース幅が広くなりました。

「スペーサー」の使い方

では「スペーサー」の使い方を手順を追って解説していきます。

文章の間にカーソルを持っていくと「+」マークが現れます。 「ブロックを追加」することができます。

クリックするとブロックの選択画面が出ます。

「スペーサー」をクリックすることで選択できます。

※  選択画面に「スペーサー」が見当たらない場合は「ブロックの検索」に「スペーサー」と入力して検索すると現れます。

すると下図の様に四角い枠が現れます。  これが「スペーサー」です。

スペーサーの幅を広くしたり、また狭くしたり調節したい場合は「点」をドラックして上下に移動することで出来ます。

下図はスペーサーの幅を「50PX」にした場合です。  「点」の下に現在のPX(ピクセル)数が表示されますので、調節しやすいですね。

下図はスペーサーの幅を「250PX」にした場合です。   

もう1つのスペース幅の調節の仕方

もう1つのスペース幅の調節の仕方を紹介します。

右の設定パネルにある「スペーサー設定」での調節になります。

丸をドラックして移動したり、数値の入力を変更すことで調節できます。

色々と使いながらあなたにあった調節の仕方を選択しましょう!

スペーサーの複製の仕方

作ったスペーサーブロックと同じ物を作る時に便利です。

①  点が縦に3つ並んだマーク(オプション)をクリックします。

②  「複製」をクリックします。

これで簡単に同じ物がつくれました。

まとめ

スペーサーブロックは記事を書くにあたって頻繁に使うブロックです。

記事を読み易くする為にも適切に使っていきましょう。

使っていくうちにスペース幅の感覚がわかって来ますので、手軽に使えると思います。

今回はこれで以上になります。

あなたが良い記事を沢山書けることを願っております。

ありがとうございました。

-ブログ