WordPressで水平線セパレーターを追加する方法（3つの方法）

WordPressでブログ記事を公開したものの、一見問題なさそうでも、スクロールしていくと読みにくいと感じたことはありませんか？ 長文のテキストブロックは、内容が価値あるものであっても、読者を圧倒し、興味を失わせてしまう可能性があります。

コンテンツの流れを良くするために、シンプルな水平線が役立つことがあります。これらの区切り線はテキストを分割し、より整理されて理解しやすくなります。また、セクション間の重要な告知、プロモーション、または移行を自然な形で強調するのに役立ちます。

このチュートリアルでは、WordPressで水平線区切りを追加する3つの簡単な方法を説明します。

このように、最小限の労力で投稿を洗練されたプロフェッショナルな見た目にすることができます。🙌

WordPressで水平線セパレーターを追加する理由

水平線セパレーターはセクションを分割し、コンテンツをスキャンしやすくし、読者のエンゲージメントを維持します。

水平線は、可読性以外にも、重要なポイントに注意を引き、引用を強調し、アイデア間のスムーズな移行を作成するのに役立ちます。

全体として、訪問者は数秒であなたのページに留まるか離れるかを決定します。多くのデバイスでは、ブログ記事は長いテキストの壁のように表示され、読むのが圧倒される可能性があります。

シンプルな水平線でそれが変わります。✅

これはWordPressで横線区切りを追加する方法に関する包括的なガイドなので、目次を使用して使用したい方法を見つけることができます。

準備はいいですか？始めましょう。

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

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

次に、「レイアウト要素」セクションから「セパレーター」ブロックを選択しましょう。

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

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

WordPressブロックエディターで水平線をスタイル設定する

デフォルトでは、水平区切り線は投稿またはページの中央に薄い灰色の線で表示されます。

線をクリックしてブロックを選択することで、その見た目を変更できます。その後、画面の右側に「ブロック」編集パネルが開きます。

線のスタイルを変更するには、「スタイル」の横にある小さな矢印をクリックするだけです。次に、さまざまなオプションが表示されます。

必要に応じて、水平線をこれらのいずれかに変更できます。

• 投稿のコンテンツの全幅をカバーする太い線。
• 投稿の中央に3つの点がpmatrix。

「カラー」設定で水平線の色を変更することもできます。

表示されているオプションのいずれかをクリックするか、「カスタムカラー」リンクを使用して任意のカラーを選択してください。

デフォルトのグレー色に戻したい場合は、色のオプションの下にある「クリア」ボタンをクリックしてください。

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

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

クラシックエディター（プラグインで有効化されることが多い）を使用している場合でも、簡単に水平線を追加できます。

これを行うには、既存の投稿またはページを編集するか、新しい投稿またはページを作成します。ツールバーの上にボタンが1行しか表示されない場合は、右側にある「ツールバーの切り替え」アイコンをクリックしてください。

これにより、水平線オプションを含む2番目のボタン行が開きます。

ここから最初に行うことは、水平線挿入したい新しい行にカーソルを置くことです。

次に、「水平線」アイコンをクリックできます。これは、2行目の左から2番目です。

追加すると、薄い灰色の水平線が表示されます。

これで、投稿全体の幅をカバーします。

HTMLを使用して水平線を直接追加する

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

その場合は、コンテンツにHTMLの<hr>タグを使用するだけで簡単に追加できます。

<hr>

このタグは、クラシックエディターの「テキスト」ビュー内、またはブロックエディターの「カスタムHTML」ブロック内に追加できます。

コードを扱う際に区切りをすばやく追加できる方法です。

方法3：WPFormsで長文フォームを複数ページに分割する

ユーザーにとって圧倒されないように、長いフォームを分割する必要がある場合があります。視覚的な線ではなく、フォームを複数のページに分割できます。ここでは、お気に入りのWordPressお問い合わせフォームビルダーであるWPFormsを使用してこれを行う方法を説明します。

実際、WPFormsは私たちが愛用し、自身で使用しているツールなので、ぜひ検討することをお勧めします。プラグインの詳細については、WPFormsの完全レビューガイドをご覧ください！

まず、WPFormsプラグインをダウンロード、インストール、有効化する必要があります。方法がわからない場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドを確認してください。

次に、WordPressダッシュボードからWPForms » Add Newに移動します。

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

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

テンプレートを選択した後、テンプレートの上にマウスカーソルを移動してクリックするだけでフォームを作成できます。

次に、「フィールドを追加」タブの左側にある「Fancy Fields」セクションまでスクロールダウンします。

次に、「フィールドを追加」タブの左側にある「Fancy Fields」セクションまでスクロールダウンします。

フォームが2つの部分に分割されていることがわかります。WPFormsは自動的に「次へ」ボタンも追加しました。

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

ページ区切りフィールドをクリックして編集してください。

完了したら、右上にある「保存」ボタンをクリックしてフォームを保存できます。

次に、フォームをウェブサイトに追加します。

開始するには、「保存」ボタンのすぐ隣にある「埋め込み」ボタンをクリックしてください。これにより、新しい投稿またはページを作成するか、既存の投稿またはページを編集するためのプロンプトウィンドウが開きます。

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

次に、利用可能なページから選択し、「開始する！」をクリックします。

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

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

見つけたら、クリックしてブロックをページに追加します。

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

作成したフォームをドロップダウンリストから選択してください。

それが完了したら、投稿またはページを公開できます。それだけです！

さて、投稿またはページにアクセスすると、フォームが機能していることがわかります。

ボーナス 投稿やページで使用できる区切り線

水平線以外にも、WordPressブロックエディターには、コンテンツを整理しレイアウトを改善するのに役立つ他の便利なブロックが用意されています。いくつか優れた代替案を見てみましょう。

スペーサーブロック

「スペーサー」ブロックを使用すると、ブロック間に空白を追加できます。

たとえば、リードマグネットの前に投稿の最後にわずかな間隔を設けたい場合は、「スペーサー」を使用できます。

ブロックエディターで投稿を作成しているときの表示は次のとおりです。

スペーサーの高さをコンテンツエリアに合わせて調整できます。

そして、スペーサーがサイトに表示される様子は次のとおりです。

モアブロック

テーマがメインのブログページで抜粋ではなく完全な投稿を表示する場合、「続きを読む」リンクを追加すると、その時点で投稿が切り取られます。

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

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

そして、訪問者にとってサイトに表示される可能性のある方法は次のとおりです。

詳細については、WordPressで続きを読むブロックを適切に使用する方法および抜粋を簡単にカスタマイズする方法に関するガイドをご覧ください。

改ページブロック

「ページ区切り」は、長いブログ投稿を複数のページに分割します（ページネーションと呼ばれる手法です）。

ブロック自体にはエディターでのスタイリングオプションがないため、その外観はWordPressテーマによって制御されます。投稿を作成しているときの表示は次のとおりです。投稿を作成:

次に、「改ページ」はページ番号を使用し、読者がどのページに移動したいかを選択できるようにします。

WordPressサイトでの表示は次のようになります。WordPressサイト:

詳細については、WordPressの投稿を複数ページに分割する方法ガイドを参照してください。

目標に応じて、これらはすべてWordPressで水平線を追加する際の優れた代替手段となり得ます。

WordPressで水平線を追加することに関するよくある質問

水平線用のHTMLタグは何ですか？

水平線を表すHTMLタグは<hr>で、「horizontal rule」の略です。コードエディターにこのタグを追加することで、標準的な線区切りを挿入できます。

WordPressで水平線のカスタマイズ方法は？

WordPressブロックエディターには、線のスタイルと色を変更できる組み込み設定があります。厚さを調整したり、ユニークなデザインを作成したりするなど、より高度なカスタマイズには、通常カスタムCSSを使用します。

区切り線として画像を使用できますか？

もちろんです。カスタム画像を行区切りとして使用すると、コンテンツにユニークでブランド化されたタッチを追加できます。さらにクリエイティブな制御を行うには、SeedProdのようなページビルダープラグインを使用すると、コードなしでカスタムセクション区切り線をデザインできます。

学習を続ける: WordPressの投稿とページを管理するためのヒント

このチュートリアルがお役に立ち、WordPressで水平線区切りを追加する方法を学べたことを願っています。

投稿やページにさらに多くのデザインやレイアウト要素を追加したい場合は、以下の記事をご覧ください。

• おすすめのドラッグ＆ドロップWordPressページビルダー
• WordPressでカスタムシェイプディバイダーを作成する方法
• WordPressで最終更新投稿のリストを表示する方法
• WordPressでブログ投稿にカスタム投稿ステータスを追加する方法
• WordPressでカスタム投稿タイプを作成する方法
• WordPressでページまたは投稿をパスワードで保護する方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。