WordPressで水平線区切りの追加方法（3つの方法）

WordPressの投稿やページに水平線を追加することは、読みやすさを向上させる効果的な方法です。これらの行は、長い投稿を管理しやすいセクションに分割し、コンテンツの魅力を維持するのに役立ちます。

横方向の区切りは、重要なお知らせやキャンペーンに注目を集めるのにも最適です。ページの異なる部分を明確に区切り、読者がフォローしやすくなります。

このガイドでは、WordPressで水平線の区切りを追加する3つの簡単な方法を説明します。また、水平線区切りの代替案もいくつかご紹介します。

なぜWordPressで水平線区切りが必要なのか？

訪問者があなたのページから離れるかどうかを判断するのにかかる時間はわずか数秒です。端末によっては、ブラウザーはあなたのブログ投稿を長いテキストの壁として表示するかもしれません。

たとえ価値の詰まったブログ投稿であっても、コンテンツが読みにくければ多くの読者は離れてしまう。

水平線の区切りを加えるだけで、コンテンツを読ませることができるかもしれない。

水平線区切りは、読みやすさを向上させ、最終的にブログ投稿やページにおけるユーザーエンゲージメントを高めるのに役立ちます。さらに、重要なポイントを強調することができるため、コンテンツ内の重要な引用や推移を強調するのに役立ちます。

WordPressで水平線の区切り線を追加する方法について包括的に解説していますので、目次から使いたい方法を探してみてください：

準備はいいか？さあ、始めよう。

方法1：WordPressのブロックエディターで水平線を追加する

WordPressのブロックエディターを使って水平線を追加するには、「+」アイコンをクリックして、線を入れたい場所に新しいブロックを追加します。

次に、「レイアウト要素」から「区切り」ブロックを選択しよう。

検索バーを使えば簡単に見つけることができる。

追加されると、コンテンツエリアに水平線の区切りが表示されます。

WordPressブロックエディターで水平線をスタイリングする

初期設定では、水平区切りは投稿やページの中央を横切る薄いグレーの線です。

その行をクリックしてブロックを選択すれば、見え方を変えることができる。すると、画面の右側に「ブロック」編集パネルが開きます。

線のスタイルを変更するには、スタイルの隣にある小さな矢印をクリックします。すると、さまざまなオプションが表示されます。

必要であれば、水平線をこれらのいずれかに変更することができる：

• 投稿コンテンツの全幅をカバーする幅広のライン。
• 投稿の中央に3つの点が表示されます。

また、「色」設定で水平線の色を変更することもできます。表示されるオプションのいずれかをクリックするか、「カスタムカラー」リンクを使用して任意の色を選択するだけです。

初期設定のグレーに戻したい場合は、カラーオプションの下にある「クリア」ボタンをクリックするだけです。

ここでは、水平線は青で、「ワイド」スタイルを使用している。

方法2：WordPressクラシックエディターで水平線を追加する。

まだクラシックエディターを使っている人も、基本的な水平線を加えることができるので心配はいらない。

そのためには、既存の投稿やページを編集するか、新規投稿を作成するだけです。投稿エディターの上のツールバーにボタンが一列しかない場合は、右側のツールバートグルアイコンをクリックしてください：

これで、水平線オプションを含む2列目のボタンが開きます。

水平線を引きたい段落の間に改行を入れます。水平線」アイコンをクリックします。行目の左から2番目のアイコンです：

追加されると、薄いグレーの水平線が表示されます。

このように投稿の幅全体をカバーします：

HTMLを使って手動で水平線の区切りを追加する

まれに、WordPressのコンテンツに水平線の区切りを手動で追加する必要がある場合があります。

その場合は、コンテンツにhr HTMLタグを使用すればよい：

<hr>

これで投稿コンテンツに水平線区切りが追加されます。

方法 3: WPForms を使って WordPress フォームに改ページを追加する

投稿やページではなく、WordPressのお問い合わせフォームに改行を入れたい場合はどうすればいいでしょうか？それも可能です！

これにはWPFormsを使います。

まず、WPFormsプラグインをダウンロード、インストール、有効化する必要があります。もし本当に〜してもよいですか？それなら、WordPressプラグインのインストール方法のステップバイステップガイドをチェックしてください。

次に、WordPressダッシュボードからWPForms ” 新規追加に進みます。

次の画面では、フォームの名前を入力し、テンプレートを選びます。

このチュートリアルでは、「見積依頼フォーム」テンプレートを使用します。

テンプレートを選んだら、マウスカーソルをテンプレートの上に置いてボタンをクリックするだけで、フォームを作成することができます。

次に、左側の「Add Fields」タブを「Fancy Fields」セクションまでスクロールしてみよう。

次に、「改ページ」をフォームの好きな場所にドラッグ＆ドロップします。ここでは「リクエスト」ボックスの直前に置いています。

フォームが2つの部分に分かれているのがわかるでしょう。WPFormsは自動的に’Next’ボタンも追加しました。

必要であれば「次へ」のラベルを変更することもできますし、ユーザーがフォームの2ページ目に移動するための「前へ」ボタンを追加することもできます。

ページ区切りフィールドをクリックするだけで編集できます。

入力が終わったら、右上の「保存」ボタンをクリックしてフォームを保存します。

さて、いよいよサイトにフォームを追加します。

保存」ボタンの右隣にある「埋め込み」ボタンをクリックしてください。プロンプトウィンドウが開き、新規投稿やページの作成、既存の投稿の編集ができます。

このチュートリアルでは、「既存のページを選択する」オプションを選択します。

次のステップは、利用可能なページから選んで『Let’s Go!

WordPressのコンテンツエディターにリダイレクトされます。

ここから’+’アイコンをクリックして投稿やページに新しいブロックを追加し、’WPForms’ブロックを見つけるだけです。検索バーを使うか、’ウィジェット’セクションから探すことができます。

見つけたら、クリックしてブロックをページに追加してください。

フォームを選択するオプションが表示されます。

作成したフォームをドロップダウンリストから選択します。

それができたら、投稿やページを公開することができます。それですべてです！

これで、投稿やページにアクセスすると、フォームが動作しているのを見ることができる。

ボーナスのヒント投稿やページで使えるその他の区切り文字

WordPress初期設定のブロックエディターでは、投稿やページに複数のタイプの区切り文字を追加することができます。

水平線区切り以外に、「レイアウト要素」ブロックセットのオプションには、「区切り」、「その他」リンク、「改ページ」ブロックがある。

スペーサー・ブロック

Spacer’ブロックを使うと、ブロックとブロックの間に余白を追加することができます。例えば、特別オファーの前に投稿の最後に少し隙間を空けたい場合、’Spacer’を使用することができます。

ブロックエディターで投稿を作成しているときの様子です：

コンテンツエリアに合わせてスペーサーの高さをカスタマイズできます。

そして、スペーサーがあなたのサイトでどのように表示されるかは以下の通りだ：

モア・ブロック

もしあなたのテーマが抜粋ではなく、ブログのメインページに投稿の全文を表示している場合、「もっと見る」リンクを追加すると、その時点で投稿が切れてしまいます。

これは、訪問者が続きを読むためにクリックする必要があります。

上の画像は、コンテンツエディターで表示されるものです。

そして以下は、あなたのサイトで訪問者にどのように表示されるかを示している：

さらに詳しくは、moreブロックの正しい使い方や、WordPressで抜粋を簡単にカスタマイズする方法のガイドをご覧ください。

改ページブロック

Page Break」は、長いブログ投稿を複数のページに分割することができますが、カスタマイズはできません。投稿を作成するときの見た目はこんな感じです：

そして、「改ページ」はページ番号を使い、読者がどのページに行きたいかを選択できるようにする。

あなたのサイトでの外観は以下の通りです：

あなたの目的によっては、WordPressで水平線を追加する代わりに、これらのいずれかを使用することもできます。

このチュートリアルで、WordPressで水平線の区切り線を追加する方法を学んでいただけたら幸いです。投稿日やページにもっとデザインやレイアウトの要素を追加したい場合は、ドラッグ＆ドロップで使えるWordPressページビルダーについての 投稿や、WordPressでカスタムシェイプの区切りを作成する方法についてのブログ投稿をご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.