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

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

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

区切り線は、文字のつまり過ぎの回避、スマホでスクロールしたときに一定のリズムを作るのに有効的です。

Table of Contents

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

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

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

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

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

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

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

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

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

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

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

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

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

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

区切り線を使う場合は、色は統一して、使う場所を決めるようにしましょう。

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

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

有益情報も流しているのでツイッターもぜひフォローお願いします。
Follow @LaptopreneurTN

参考になったらシェアお願いします！

プラグインライティング