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

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

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

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

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

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

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

可読性だけでなく、横線は重要なポイントに注意を引いたり、引用を強調したり、アイデア間のスムーズな移行を作成したりするのにも役立ちます。

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

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

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

• Method 1: Adding a Horizontal Line in the WordPress Block Editor
• Method 2: Adding a Horizontal Line in the WordPress Classic Editor
• 方法3：WPFormsで長文フォームを複数ページに分割する
• Bonus Separators You Can Use in Your Posts and Pages
  • スペーサーブロック
  • モアブロック
  • 改ページブロック
• 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 »新規追加に移動できます。

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

このチュートリアルでは、「問い合わせフォーム」テンプレートを使用します。

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

次に、「フィールドを追加」タブの左側にある「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でもフォローできます。