最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressで改行を追加する方法(新しい行の間隔)

一部のウェブサイトはコンテンツが完璧に配置されていてスキャンしやすいのに、他のウェブサイトは窮屈で読みにくいと感じたことはありませんか?

その秘訣は、単純なこと、つまり、新しい行とスペースを効果的に使用することにあります。

WordPressのエディターで改行を追加したのに、公開ページに表示されないという経験はありませんか?あなたは決して一人ではありません。WordPressは、GoogleドキュメントやMicrosoft Wordのようなワープロソフトとは少し異なる方法でスペースを処理します。

しかし、仕組みを理解すれば、コンテンツの外観を完全に制御できるようになります。

WordPressで改行を追加する信頼性の高い方法をいくつかご紹介します。簡単なキーボードショートカットから、より高度な書式設定オプションまで。

最も簡単な改行方法から始めましょう。

WordPressで改行を追加する方法

💡 クイックアンサー:WordPressで改行を追加する方法

お急ぎですか?この記事で説明する5つの方法を以下に示します。

  • ダブルラインスペース(新しい段落)を追加する: Enter/Returnキーを押すと、段落間に自動的にダブルスペースが設定されます。
  • シングルラインスペース(同じ段落内)を追加する: Shift + Enter/Returnキーを使用すると、同じ段落内で新しい行を開始できます。
  • スペーサーブロックを使用する(視覚的な制御): スペーサーブロックをドラッグアンドドロップすると、コードなしで正確な垂直スペースを設定できます。
  • プラグインを使用する(コードなしのスタイリング): ビジュアルCSSエディタープラグインを使用して、行間隔やその他のスタイルを簡単に変更できます。
  • カスタムCSSを追加する(高度な制御): カスタマイザーにCSSコードを記述して、行間隔と段落間隔を微調整します。

WordPressで改行を追加する理由(新しい行の間隔)

一見すると、改行は些細なフォーマットの選択肢のように思えるかもしれませんが、コンテンツのパフォーマンスに大きな影響を与える可能性があります。

可読性の向上からユーザーエクスペリエンスの向上まで、適切なスペースを追加することで、ページはすっきりとプロフェッショナルに見えます。なぜそれが重要なのかは次のとおりです。

  • 読みやすさの向上:長文を区切り、スキャンしやすくします。
  • モバイルフレンドリー: コンテンツを小さい画面でも見やすく保ちます。
  • 貼り付けたテキストを修正: 他のソースからの書式設定をきれいにします。
  • 注意を引く: ヒントやCTAを目立たせるのに役立ちます。

要するに、改行は訪問者と検索エンジンの両方にとって、コンテンツを読みやすく、より魅力的なものにします。

注意: 新しい行や段落をどこに追加するかは制御できますが、段落内の行間(行の高さ)と段落間の正確なスペースは、WordPressテーマによって設定されることがよくあります。

さまざまな方法で新しい行やスペースを追加する方法、そして必要に応じてテーマのデフォルトのスペース設定を微調整する方法を説明します。

それを踏まえて、WordPressで簡単に改行を追加する方法を見ていきましょう。

WordPressで改行を追加する方法(簡単な方法)

WordPressでは、キーボードを使用して簡単に改行を追加できます。ダブルラインスペース(新しい段落)を作成するには、Enterキー(Macの場合はReturn)を押すだけです。

同じ段落内でシングルラインスペースを作成するには、Shift + Enter(Macの場合はShift + Return)を押します。これらは、ブロックエディターでスペースを制御する最も簡単な方法です。

新しい段落を追加する方法(デフォルトのスペース)

キーボードのEnterキー(Windows)またはReturnキー(Mac)を押すと、「ハードリターン」または新しい段落区切りと呼ばれるものが作成されます。

WordPressは新しい段落を作成します。デフォルトでは、テーマが段落間に垂直スペースを追加し、思考を分離してコンテンツを読みやすくします。

このスペースの正確な量は、テーマのデザインによって制御されます。

WordPressで二重行間を追加する方法

コンテンツエディタに移動し、行の後にEnterキーまたはReturnキーを押してから、次の行に何かを入力してください。

単純にそうすることで、テーマのスタイリングに基づいて、段落間の明確な区別が見られるはずです。

WordPressで段落を作成するために二重改行を追加

シングルラインスペースを追加する方法(ソフトリターン / 段落内の改行)

住所や詩のようなものを書き、新しい段落を開始せずにシングルスペースの改行が必要な場合は、「ソフトリターン」を使用する必要があります。

シングルスペースプレビュー

この場合、WindowsではSHIFT + ENTERキー、MacではSHIFT + RETURNキーを押す必要があります。

これにより、WordPressは新しい行を開始したいが、同じ段落の一部として維持したいことを認識します。

この操作により、「ソフトリターン」または単一の改行(HTMLの<br>タグを使用)が作成され、新しい段落で得られる余分な垂直スペースはなくなります。

これは、過剰な二重改行が含まれている可能性のある他のソースから貼り付けられたテキストをクリーンアップするための便利な方法です。余分な段落区切りを削除し、必要に応じてShift + Enterで単一の改行を再挿入するだけです。

WordPressにおける単一改行と二重改行:簡単な比較
改行の種類キーボードショートカットWordPressの解釈視覚的な結果最適なユースケース
二重改行(新しい段落/ハードリターン)Enter(Windows)/Return(Mac)新しい段落を開始し、テーマのデフォルトの段落間隔を適用します。テキストブロック間に目に見えるギャップを追加します。✔異なるアイデアの区切り
✔新しい段落の開始
✔全体的な可読性の向上
単一改行(新しい行/ソフトリターン)Shift + Enter(Windows)/Shift + Return(Mac)余分な段落間隔を追加せずに、*同じ段落内の*新しい行を開始します。前の行のすぐ下に、最小限の垂直スペースで新しい行を作成します。✔住所
✔詩
✔内部改行が必要なリスト項目
✔まとまった短いフレーズ

これらの違いを理解することで、コンテンツのレイアウトと可読性を正確に制御できるようになります。

スペーサーブロックでカスタム垂直スペースを追加する

2つのブロック間に余分なスペースを追加するための、シンプルでコーディング不要な方法として、組み込みのスペーサーブロックを使用することは、非常に直感的な方法です。エディタ内で直接、正確な視覚的制御を提供します。

エディターで「ブロックを追加」ボタンをクリックして新しいブロックを追加し、「スペーサー」を検索するだけです。追加すると、ページに新しい空のスペースが表示されます。

WordPressにスペーサーブロックを追加する

スペーサーをクリックして、青いハンドルを上下にドラッグして高さを調整できます。

これにより、エディター内で垂直方向のスペーシングを正確に制御できます。

ブロックエディターでのスペーサーの動作

デフォルトの行の高さと段落間隔の調整

エディタで適切な行間を設定しても、テーマに意図したとおりに表示されない場合があります。

修正方法は2つあります。

  1. プラグインを使用する(簡単な方法)
  2. CSSコードで手動で(より高度)

まずは簡単な方法を見てみましょう。

プラグインを使用して行間を追加する

コードを学ぶことなくテーマにスタイル変更を加えたい場合は、CSS Heroのようなプラグインを使用することが、そのための優れた方法です。これは、このプラグインが100,000以上のウェブサイトで信頼されており、直感的なビジュアルエディタを備えているためです。

CSS Heroは、初心者やコーダー以外の方のために特別に設計されており、数回のクリックでWordPressサイトのデザインを視覚的に変更できます。これは、4.8/5の平均評価で高く評価されている機能です。

CSS HeroでWordPressの段落間隔を追加する

詳細については、完全なCSS Heroレビューをご覧ください。

サイドバーの移動やフッターの追加など、テーマに対するより広範な構造変更については、ドラッグアンドドロップページビルダープラグインは、より包括的な視覚的制御と専用ツールを提供します。これにより、これらのタスクにより適したオプションとなります。

プラグインを使いたくない、またはこの変更だけを行いたいですか?その場合、手動でCSSコードを追加する方法が最適かもしれません。

CSSコードで段落のスペーシングを手動で変更する

プラグインなしで手動で改行を追加するには、テーマにCSSを追加する必要があります。

CSS(Cascading Style Sheets)は、Webブラウザにウェブサイトのコンテンツをどのように表示するかを指示する言語です。

Microsoft Wordのようにボタンをクリックするのではなく、スタイリングのための指示セットと考えてください。それほど恐ろしいものではなく、基本を理解すれば非常に簡単に理解できます。

テーマにカスタムCSSを追加するには、外観 » カスタマイズページにアクセスする必要があります。これにより、WordPressテーマカスタマイザーが起動し、左側の列にある「追加CSS」タブをクリックする必要があります。

これらのメニューオプションが表示されない場合は、ブロックテーマを使用している可能性があります。WordPress管理画面でテーマカスタマイザーが表示されない問題を修正する方法に関する記事をご覧ください。

カスタムCSSの追加

カスタムCSSボックスに、次のCSSコードを追加する必要があります。

.post p{line-height: 1.5em;}

このルールは、各段落内の行間のスペースを増やし、コンテンツを読みやすくします。

このコードは、テーマがブログコンテンツに.postを使用していることを前提としています。追加しても何も変更されない場合は、.post.entry-contentに置き換えてみてください。

テーマがどちらを使用しているかわからない場合は、ブログ投稿を開き、テキスト内を右クリックして「検証」を選択することで確認できます。次に、メインコンテンツのラッパークラス(.post.entry-contentなど)を探します。

行の高さを増やすためのカスタムCSSの追加

この line-height プロパティは、段落間のスペースではなく、各段落内のテキスト行間の垂直スペースのみを調整することに注意してください。

WordPressで段落間の垂直スペースを増やしたい場合は、通常、段落要素に padding-bottom を追加します。

.post p { 
line-height: 1.5em;
padding-bottom: 15px;
} 

このCSSコードの数値を自由に調整してください。 padding-bottom の値を変更すると、段落間のスペースが変更されます。

WPCodeプラグインを使用して、サイトにカスタムCSSを追加することもできます。150万以上のウェブサイトで使用されており、WordPress.orgでコードの挿入を非常に簡単にするために4.9/5つ星評価を獲得しています。

詳細については、WordPressサイトにカスタムCSSを追加する方法に関するガイドをご覧ください。

説明を読むのが好きでない場合は、ビデオチュートリアルをご覧ください。

動画チュートリアル

視覚的なチュートリアルについては、以下のビデオチュートリアルをご覧ください。コンテンツに単一行および二重行の間隔を追加するための、私たちが議論したすべての方法をカバーしています。

WPBeginnerを購読する

WordPressでの改行追加に関するよくある質問

WordPressで改行を追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressで1.15の行間隔を設定するにはどうすればよいですか?

1.15の行間隔は、子テーマにカスタムCSSを追加するか、WPCodeのようなコードスニペットプラグインを使用することで設定できます。たとえば、調整したいテキスト要素にline-height: 1.15;を使用します。

これにより、WordPressにはデフォルトでこのオプションが含まれていないため、正確な制御が可能になります。

1.5と1.15の行間隔は同じですか?

いいえ、1.5と1.15の間隔は異なります。1.5の行の高さは行間に多くのスペースを作成しますが、1.15はテキストをよりタイトでコンパクトに保ちます。

WordPressでカスタム行間隔を追加するにはどうすればよいですか?

CSSまたはブロックエディターの設定を使用してカスタム行間隔を追加できます。ほとんどの場合、テーマカスタマイザーまたはCSSプラグインにline-height値を追加するのが最も簡単な方法です。

WordPressの区切り線と改行の違いは何ですか?

区切り線はセクション間に表示される線またはスペースを追加しますが、改行は追加の視覚要素を追加せずに単にテキストを次の行に移動します。

WordPressのタイトルで不要な改行を修正するにはどうすればよいですか?

WordPressの投稿またはページのタイトルが、不格好な方法で複数行に折り返されることがあります。これは通常、テーマとタイトル領域の利用可能なスペースによって異なります。

ほとんどの場合、WordPressはレイアウトに合わせて長いタイトルを自動的に折り返します。ただし、より多くの制御が必要な場合は、CSSを使用して調整できます。

たとえば、次を追加することでタイトルの改行を防ぐことができます。

.entry-title {  white-space: nowrap;}

これにより、タイトルは1行に維持されますが、注意してください。非常に長いタイトルは小さい画面ではオーバーフローする可能性があります。通常は、タイトルを短くするか、テーマのタイポグラフィ設定を調整する方が、1行に強制するよりも良い方法です。

この記事がWordPressで改行を追加するのに役立ったことを願っています。また、WordPressブロックパターンの使用方法に関するガイドや、おすすめのGutenbergフレンドリーなWordPressテーマのリストもご覧ください。

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

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

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

読者とのインタラクション

99件のコメント返信する

  1. これは古いクリエイターの頃は大きな問題でした。どのように表示されるかわからず、数行ごとにプレビューを押す必要がありましたが、Gutenbergを使えばずっと簡単になり、Shift+Enterを使うことを学びました。無意識のうちに自動的に行っています。なぜかわかりませんが、一部のウェブサイトではShift+Enterが許可されず、Enterのみ、またはその逆で、「なぜ機能しないんだ!」となります!

  2. 詩の単一スペース行のシフトエンターのやり方をようやく理解しましたが、投稿が公開されてフォロワーにメールで送信されると、フォーマットが失われ、すべての行がくっついてしまいます。どうすれば修正できますか?

    • その問題の修正のためのスタイリングについては、通知を送信するために使用されているツールに確認する必要があります。

      管理者

  3. 説明ありがとうございます。ただ一つ質問があります。スマートフォンで同じことをするにはどうすればよいですか?外出中にブログを編集しており、ラップトップが利用できません。Shift + Enterを試しましたが、うまくいきませんでした

    • ページビルダープラグインを使用している場合、単一/二重の行間隔の異なる方法がある場合があります。それ以外の場合は、プラグイン/テーマの競合である可能性があり、プラグインを無効にするか、テーマを切り替えて確認する必要があります。

      管理者

  4. 通常の段落行の間隔を狭めたいです。IMHO、デフォルトでは白すぎるスペースがあります。また、段落の最後に全行ではなく半行を追加したいです。WordPressではデフォルトでダブルキャリッジリターンの同等処理が行われるようで、これはかなり20世紀的で、Wordができることをエミュレートしていません。何かアイデアはありますか?

    • お使いの特定のテーマについてはサポートに連絡することをお勧めします。行間を狭めるためにどのCSSを追加する必要があるか教えてくれるはずです:)

      管理者

  5. 神のご加護がありますように!CSSを投稿してくれて本当に感謝しています!これで間隔を変更できるなんて誰が知っていたでしょうか!ずっとこのようなものを探していました!本当にありがとうございます!

  6. 「Shift」+「Enter」の方法を使用していますが、それを行うとフォントサイズを変更できません。回避策はありますか?

  7. 素晴らしいビデオです。コンテンツ、ペース、スピーカーのトーンが気に入りました。ありがとうございます!

  8. 追加CSSがありません。段落の間隔を変更しようとしましたが、何も機能せず、ひどい見た目になっています。助けてください!!!

  9. ご協力ありがとうございます。色々な場所を探していましたが、プラグインでやりたかったのです。とても簡単にできました。重ねて、本当にありがとうございます。

  10. こんにちは!段落間に簡単なスペーシングを設けたいのですが、Enterキーを押しても(ダブルスペースのため)、下書きをプレビューしても何も変わりません(すべて1つの段落のままです)。どなたか助けていただけますか?

  11. こんにちは
    行の高さと間隔を変更したいのですが、テーマのCSSファイルに「エディター」アイコン(外観 » エディター)がありません。
    どうすればよいでしょうか?
    お返事ありがとうございます!

  12. すごい。こんなに簡単だとは知りませんでした。本当にありがとうございます!このダブルスペースには気が狂いそうでした!:D

  13. ありがとうございます、ありがとうございます、ありがとうございます!

    別のHTMLエディターで、単一間隔の方法がわかりませんでした。

    これで助かりました!:)

  14. 素晴らしい、そして永遠の救世主です。

    クライアントサイトの1つでスペーシングに苦労していましたが、指先でほぼ正確な答えを見つけられたことに本当に驚きました。今では永久購読者になります。

  15. WordPressのヒントをたくさんありがとうございます。このサイトは、私が抱えていたほとんどの苦労を乗り越えるのに大いに役立ちました。

  16. Pilcrowテーマを使用していますが、段落間のダブルスペースをどのように設定すればよいのか全くわかりません。投稿によっては発生する場合としない場合があります。HTMLファイルを見ても、投稿のpタグやパディングは見当たりません。投稿がどのように表示されるかの最終結果しか見えず、その時にダブルスペースが機能しなかったことがわかります。後から編集して修正することはできますか?最後に、外観からエディターメニューへ移動するように指示されていますが、そのオプションがありません。
    外観の下には、テーマ、カスタマイズ、ウィジェット、メニュー、ヘッダー、背景、AMP、テーマオプション、モバイルというオプションがあります。
    助けてください。

    • LRさん、こんにちは。

      外観 → カスタマイズにアクセスし、カスタマイザーの追加CSSタブをクリックすることでCSSを追加できます。WordPressにカスタムCSSを追加する方法に関するガイドをご覧ください。

      テーマの問題だとお考えの場合は、一時的にデフォルトのWordPressテーマに切り替えてみてください。問題が解消された場合は、テーマ開発者にサポートを依頼できます。

      管理者

  17. 私のテーマは壊れています。つまり、デフォルトでダブルスペースがありません。言い換えれば、テーマはShift+Enterモードで固定されています。したがって、次のコードに関連して:

    .post p { line-height: 1.5em; padding-bottom: 15px; }

    15px は通常のデフォルトの二重間隔ですか?デフォルトでは何ピクセルであるべきですか?また、このコードをどこに配置しても関係ありませんか?ありがとう!

  18. Shift + Enterのヒントをありがとうございます。長年知りませんでした。行き詰まったときはいつもあなたのサイトに助けられています。

  19. こんにちは:テーマ全体のCSSを変更するのではなく、1つのページでカスタムラインスペーシング(例えば1.5em)を取得するにはどうすればよいですか?他の2人も同じことを尋ねていますが、少なくとも私が見つけた範囲では返信がありません。ありがとうございます!

  20. wysywig tinye mceエディタでWordPressの行間が大きく開くのを避けるためにShift+Enterを使用します。うまくいきました!!!!素晴らしい!

  21. 単にテキストを追加し、テキストの色を白に変更する(背景が白の場合)のはどうでしょうか?これにより、行間をより簡単に作成およびカスタマイズできるようになります(もちろん、背景がフォントカラーと一致しないものの写真である場合を除きます)。

  22. WPBeginnerスタッフ様、こんにちは。

    別の質問があります。Visual Composerを使用しており、ホームページのセクション見出しの間に多くの「Separator with Text」区切り線を追加しました。これらのテキスト見出しを、そのセクションへのリンクにもしたいと考えています。
    しかし、リンクを追加するたびに、区切り線にあったセクション識別テキストが失われ、「TITLE」というデフォルトのテキストに置き換わってしまいます。

    リンクにするために、この括弧内にリンクコードを追加しています:
    [vc_text_separator title=”1950年代の車”]

    頭を掻きむしりすぎて、ハゲていると思います。どんな助けでも一生の感謝を得られますよ!!!

    ありがとうございます、
    マイク

  23. WordPressの「Divi」テーマを使用していますが、大きなスペースを作成するためにEnterキー(またはShift + Enterキー)を2回押しても無視されることがわかりました。これを回避するには、Enterキーを1回押し、行に文字を入力します(何でも構いません)。それをハイライトして文字のフォントカラーを白に変更し、もう一度Enterキーを押します。これにより、テーマを編集することなく、目的の行間が得られます。行の余分なスペースについても同様です。必要なだけ文字を入力し、それらをハイライトしてフォントカラーを白に変更し、目的のフォントカラーで続行します。

      • 一部の検索エンジンは、このような「隠された」テキストをスパムとして扱う可能性があることに注意してください。

  24. ありがとうございます!! 大好きです!このサイトを見つけられて本当に嬉しいです!壁に頭を打ち付けるところでした。絵文字の挿入方法を知っていたら、この投稿はハートと笑顔の顔でいっぱいになっていたでしょう。:-)

  25. ああ、そうです!長年悩まされていた問題(強制的な1行スペースの段落)を解決するのに役立ちました!

  26. 私はWP Beginnerの購読者です。
    私のサイトで製品にエンジニアリングデータを入力することについて質問がありました。テーブルのスペーシングがページ上で大きすぎるように見えました。WordPressのサポートを検索しましたが、シングルラインスペーシングの質問に対するぶっきらぼうな回答しか見つかりませんでした。

    あなたが最初に質問に答えてくれて、それは明らかに正解でした。ありがとうございます。

    敬具

    Dave

  27. Androidではどうですか?最新のアップデートで強制的にダブルスペース(新しい段落)になりました。詩を書く人にはあまり良くありません。シングルスペースに戻す方法はありますか?

  28. Omega Themeを使用していますが、Ctrl+Enterが機能しません。他に何かできることはありますか?CSSファイルにpost.pが見つかりません。

  29. 「シフト」と「エンター」で1行の間隔を空ける方法を教えていただき、ありがとうございます。長年この方法を知りたかったのですが、解決策を見つけることができませんでした。

  30. あらゆる場所で答えを探しています…テキストエディタに
    を追加すると、ビジュアルエディタで削除されます。気が狂いそうです。wpbeginnerには推奨事項がありますか?

    これを止めるためにプラグインを追加すべきですか?

    何年も前にプラグインを試しましたが、すべての投稿をやり直して再フォーマットする必要がありました。

    チュートリアルやアドバイスへのリンクがあれば大歓迎です!

返信する

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