• メニュー
  • メニュー
wordpress 区切り線 空白行

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

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

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

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


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

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

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

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

Wordpressで区切り線・空白行を入れる方法

・区切り

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


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


・スペーサー

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

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

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


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

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

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

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

Kadence Blocksの場合

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

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


Stackableの場合

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

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



まとめ:上手に使って見やすい記事に!

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

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

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


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


参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です