Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで水平線区切りの追加方法(5つの方法)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressで投稿やページに水平線を追加したいですか?

水平線の区切りは、長い投稿を小さなセクションに分割したり、特別なお知らせやプロモーションを強調したり、ページの異なる部分を明確に区切ったりするのに最適な方法です。

この投稿では、WordPressで水平線の区切りを簡単に追加する方法を紹介します。

How to add a horizontal line in WordPress

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

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

多くの読者は、たとえブログ記事に多くの価値が詰まっていたとしても、コンテンツが読みにくそうであれば離脱してしまうだろう。

水平線区切りを追加するだけで、コンテンツが読まれるようになり、読みやすさが向上し、最終的にブログ投稿やページへのユーザーエンゲージメントが高まる可能性があります。

それ以外にも、水平線区切りは重要なポイントを強調することができます。例えば、コンテンツ内の重要な引用や推移を強調するのに役立ちます。

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

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

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

Adding a new block where you want your horizontal line

次に、レイアウト要素セクションから区切りブロックを選択します。

検索バーを使って検索することもできる。

Find and add the Separator block

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

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

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

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

Click on the Separator block to select it and edit the settings

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

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

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

注: WordPressテーマによっては、幅の広い行と初期設定の行の両方が投稿の幅全体をカバーします。

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

Change the color of the horizontal line

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

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

A horizontal line that's been modified to be wide and blue

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

クラシックエディターを使用している場合は、基本的な水平線を追加することができます。そのためには、既存の投稿やページを編集するか、新しい投稿やページを作成するだけです。

投稿エディターの上のツールバーにボタンが1列しかない場合は、右側のツールバートグルのアイコンをクリックしてください:

Click the Toolbar Toggle button to see the second row of icons

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

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

The horizontal line button in the classic WordPress editor

水平線は薄いグレーになります。

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

A horizontal rule created using the classic editor

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

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

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

<hr>

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

投稿やページで使えるその他の区切り文字

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

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

スペーサー・ブロック

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

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

The Spacer block in the block editor

スペーサーの高さはカスタマイズできる。

スペーサーのサイトでの外観は以下の通り:

How the spacer block appears in a page or post

モア・ブロック

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

訪問者はクリックして詳細を読むことができる。

The More block in the post editor

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

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

The Read More block in a post on the site

抜粋については、WordPressで抜粋を簡単にカスタマイズする方法のガイドで詳しく説明しています。

改ページブロック

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

The page break block shown in the block editor

そして、これがあなたのサイトでのページ区切りの外観です。

ページ番号を使い、読者がどのページに行きたいかを選択できるようにしていることに注目してほしい。

The page break as it appears on a site

WordPressで水平線を追加する代わりに、あなたが何をしたいかに応じて、これらのいずれかが良い選択肢になる可能性があります。

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

投稿やページではなく、WordPressのお問い合わせフォームに区切りを入れたい場合はどうすればいいでしょうか?それも可能です。ここではWPFormsを使います。

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

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

Creating a new form using WPForms

フォームの名前を入力し、テンプレートを選択します。今回は‘見積依頼フォーム‘テンプレートを使用します。

マウスカーソルをテンプレートに合わせ、ボタンをクリックしてフォームを作成します。

Creating a quote form in WPForms

次に、左側のAdd FieldsタブをFancy Fieldsセクションまでスクロールします。

ページ区切りをフォームの好きな場所にドラッグ&ドロップします。ここでは、リクエストボックスの直前に配置しています。

Adding a page break in WPForms

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

必要であれば「次へ」のラベルを変更できますし、フォームの2ページ目に進むための「前へ」ボタンを追加することもできます。編集するには改ページフィールドをクリックするだけです。

Editing the page break field in WPForms

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

これでサイトにフォームを追加できます。

まず、新しい投稿やページを作成するか、既存の投稿やページを編集する必要があります。

(+)をクリックして投稿やページに新規ブロックを追加し、WPFormsブロックを探します。検索バーを使うか、ウィジェットのセクションで探すことができます。ブロックをページに追加します。

Adding the WPForms block to your page or post

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

ドロップダウンリストから選択してください。

Choose your form from the dropdown list

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

次に、サイト上でフォームがどのように見えるかを確認します。

The form with a page break on the website

このチュートリアルで、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

5件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      For that you would want to create columns and then you would use css to add the border property to the columns.

      管理者

    • WPBeginner Support says

      It would depend on how they are being used but for the most part they should not have a major effect.

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。