【リズムを作る】wordpressで簡単に区切り線と空白行を入れる方法

wordpressで記事を書くときに、区切り線や空白行を有効に利用することが文章にリズムを作り、読みやすさの向上になります。

WordPressでは基本機能で簡単に区切り線と空白行を入れられるので解説したいと思います。

WordPressで区切り線と空白行を入れる方法

クラシックエディタやHTMLの場合は<hr>タグとCSSを利用することで区切り線を作り事ができ、空白行は<div>を利用することで作ったりしていました。

しかし、ブロックエディタ(Gutenberg)になってから区切り線と空白行を入れるのがめちゃくちゃ簡単になりました😃

ブロックエディタの基本機能を使う

・区切り

区切りを選択すると下のような線を入れることができます。

---

色やドット線などを選択することができます。
このサイトでは、H2の間にはドット型の区切りを入れたり、H3では下のような細い線を区切りとして入れていたりします。

・スペーサー

スペーサーを選択すると下のような空白を入れることができます。↓

↑は100pxの高さの空白が入っています。
改行をたくさんしてスペースを空けるというのはちょっとスマートではないので、間を空けたい場合はスペーサーを利用しましょう！！

文字が詰まりすぎている場合や画像下に文字を入力した場合、読み始めのテンポが悪かったりする場合、少しスペーサーを入れてあげると読み始めやすいですよ。

プラグインを利用してもっとオシャレに♪

スペーサー(空白行)は空白なので装飾しようがありませんが、区切り線の場合はもう少しだけオシャレにすることができます。

おすすめプラグインは以下の２つです。

• Kadence Blocks – Gutenberg Blocks for Page Builder Features
• Stackable – Gutenberg Blocks

Kadence Blocksの場合

ひとつの例ですがストライプ型のような区切り線を入れることができます。

こちらはダッシュを右寄せにした例です。

Stackableの場合

線ももちろんできますし、アスタリスクや●での区切り線が可能です。

上下左右のマージンの細かい設定なども可能です。

まとめ：上手に使って見やすい記事に！

話題が変わる時に必ず使うとか、サイト内で統一が取れていると記事を巡回して読んでくれるユーザーにとって読みやすいサイトになりますね。

むやみやたらに使うことは注意しましょう！読む側のテンポを意識してくださいね。