一部のウェブサイトはコンテンツが完璧に配置されていてスキャンしやすいのに、他のウェブサイトは窮屈で読みにくいと感じたことはありませんか？
その秘訣は、単純なこと、つまり、新しい行とスペースを効果的に使用することにあります。
WordPressのエディターで改行を追加したのに、公開ページに表示されないという経験はありませんか？あなたは決して一人ではありません。WordPressは、GoogleドキュメントやMicrosoft Wordのようなワープロソフトとは少し異なる方法でスペースを処理します。
しかし、仕組みを理解すれば、コンテンツの外観を完全に制御できるようになります。
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は新しい段落を作成します。デフォルトでは、テーマが段落間に垂直スペースを追加し、思考を分離してコンテンツを読みやすくします。
このスペースの正確な量は、テーマのデザインによって制御されます。
コンテンツエディタに移動し、行の後にEnterキーまたはReturnキーを押してから、次の行に何かを入力してください。
単純にそうすることで、テーマのスタイリングに基づいて、段落間の明確な区別が見られるはずです。
シングルラインスペースを追加する方法（ソフトリターン / 段落内の改行）
住所や詩のようなものを書き、新しい段落を開始せずにシングルスペースの改行が必要な場合は、「ソフトリターン」を使用する必要があります。
この場合、WindowsではSHIFT + ENTERキー、MacではSHIFT + RETURNキーを押す必要があります。
これにより、WordPressは新しい行を開始したいが、同じ段落の一部として維持したいことを認識します。
この操作により、「ソフトリターン」または単一の改行（HTMLの<br>タグを使用）が作成され、新しい段落で得られる余分な垂直スペースはなくなります。
これは、過剰な二重改行が含まれている可能性のある他のソースから貼り付けられたテキストをクリーンアップするための便利な方法です。余分な段落区切りを削除し、必要に応じてShift + Enterで単一の改行を再挿入するだけです。
WordPressにおける単一改行と二重改行：簡単な比較
| 改行の種類 | キーボードショートカット | WordPressの解釈 | 視覚的な結果 | 最適なユースケース |
|---|---|---|---|---|
| 二重改行（新しい段落/ハードリターン） | Enter（Windows）/Return（Mac） | 新しい段落を開始し、テーマのデフォルトの段落間隔を適用します。 | テキストブロック間に目に見えるギャップを追加します。 | ✔異なるアイデアの区切り ✔新しい段落の開始 ✔全体的な可読性の向上 |
| 単一改行（新しい行/ソフトリターン） | Shift + Enter（Windows）/Shift + Return（Mac） | 余分な段落間隔を追加せずに、*同じ段落内の*新しい行を開始します。 | 前の行のすぐ下に、最小限の垂直スペースで新しい行を作成します。 | ✔住所 ✔詩 ✔内部改行が必要なリスト項目 ✔まとまった短いフレーズ |
これらの違いを理解することで、コンテンツのレイアウトと可読性を正確に制御できるようになります。
スペーサーブロックでカスタム垂直スペースを追加する
2つのブロック間に余分なスペースを追加するための、シンプルでコーディング不要な方法として、組み込みのスペーサーブロックを使用することは、非常に直感的な方法です。エディタ内で直接、正確な視覚的制御を提供します。
エディターで「ブロックを追加」ボタンをクリックして新しいブロックを追加し、「スペーサー」を検索するだけです。追加すると、ページに新しい空のスペースが表示されます。
スペーサーをクリックして、青いハンドルを上下にドラッグして高さを調整できます。
これにより、エディター内で垂直方向のスペーシングを正確に制御できます。
デフォルトの行の高さと段落間隔の調整
エディタで適切な行間を設定しても、テーマに意図したとおりに表示されない場合があります。
修正方法は2つあります。
- プラグインを使用する（簡単な方法）
- CSSコードで手動で（より高度）
まずは簡単な方法を見てみましょう。
プラグインを使用して行間を追加する
コードを学ぶことなくテーマにスタイル変更を加えたい場合は、CSS Heroのようなプラグインを使用することが、そのための優れた方法です。これは、このプラグインが100,000以上のウェブサイトで信頼されており、直感的なビジュアルエディタを備えているためです。
CSS Heroは、初心者やコーダー以外の方のために特別に設計されており、数回のクリックでWordPressサイトのデザインを視覚的に変更できます。これは、4.8/5の平均評価で高く評価されている機能です。
詳細については、完全なCSS Heroレビューをご覧ください。
サイドバーの移動やフッターの追加など、テーマに対するより広範な構造変更については、ドラッグアンドドロップページビルダープラグインは、より包括的な視覚的制御と専用ツールを提供します。これにより、これらのタスクにより適したオプションとなります。
プラグインを使いたくない、またはこの変更だけを行いたいですか？その場合、手動でCSSコードを追加する方法が最適かもしれません。
CSSコードで段落のスペーシングを手動で変更する
プラグインなしで手動で改行を追加するには、テーマにCSSを追加する必要があります。
CSS（Cascading Style Sheets）は、Webブラウザにウェブサイトのコンテンツをどのように表示するかを指示する言語です。
Microsoft Wordのようにボタンをクリックするのではなく、スタイリングのための指示セットと考えてください。それほど恐ろしいものではなく、基本を理解すれば非常に簡単に理解できます。
テーマにカスタムCSSを追加するには、外観 » カスタマイズページにアクセスする必要があります。これにより、WordPressテーマカスタマイザーが起動し、左側の列にある「追加CSS」タブをクリックする必要があります。
これらのメニューオプションが表示されない場合は、ブロックテーマを使用している可能性があります。WordPress管理画面でテーマカスタマイザーが表示されない問題を修正する方法に関する記事をご覧ください。
カスタムCSSボックスに、次のCSSコードを追加する必要があります。
.post p{line-height: 1.5em;}このルールは、各段落内の行間のスペースを増やし、コンテンツを読みやすくします。
このコードは、テーマがブログコンテンツに.postを使用していることを前提としています。追加しても何も変更されない場合は、.postを.entry-contentに置き換えてみてください。
テーマがどちらを使用しているかわからない場合は、ブログ投稿を開き、テキスト内を右クリックして「検証」を選択することで確認できます。次に、メインコンテンツのラッパークラス（.postや.entry-contentなど）を探します。
この 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を追加する方法に関するガイドをご覧ください。
説明を読むのが好きでない場合は、ビデオチュートリアルをご覧ください。
動画チュートリアル
視覚的なチュートリアルについては、以下のビデオチュートリアルをご覧ください。コンテンツに単一行および二重行の間隔を追加するための、私たちが議論したすべての方法をカバーしています。
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チャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
ラルフ
これは古いクリエイターの頃は大きな問題でした。どのように表示されるかわからず、数行ごとにプレビューを押す必要がありましたが、Gutenbergを使えばずっと簡単になり、Shift+Enterを使うことを学びました。無意識のうちに自動的に行っています。なぜかわかりませんが、一部のウェブサイトではShift+Enterが許可されず、Enterのみ、またはその逆で、「なぜ機能しないんだ！」となります！
ディーパック・サハニ
素晴らしいビデオと投稿で私の疑問が解決しました。
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
ジェニファー
この情報、本当にありがとうございます！とても役に立ちました。まさに探していたものです。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
コリーン・コフラン
詩の単一スペース行のシフトエンターのやり方をようやく理解しましたが、投稿が公開されてフォロワーにメールで送信されると、フォーマットが失われ、すべての行がくっついてしまいます。どうすれば修正できますか？
WPBeginnerサポート
その問題の修正のためのスタイリングについては、通知を送信するために使用されているツールに確認する必要があります。
管理者
Luiz
ありがとうございます！とても役に立ちました！
WPBeginnerサポート
どういたしまして
管理者
ロビン
とても参考になりました！ありがとうございます！！
WPBeginnerサポート
どういたしまして
管理者
Dhirendra
画像の間隔を狭めるオプションはありますか…
WPBeginnerサポート
具体的な画像によりますが、ギャップの原因を見つけるための出発点として、以下のガイドをご覧ください。
https://014.leahstevensyj.workers.dev/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
ヤン・ヴァン・デン・フート
説明ありがとうございます。ただ一つ質問があります。スマートフォンで同じことをするにはどうすればよいですか？外出中にブログを編集しており、ラップトップが利用できません。Shift + Enterを試しましたが、うまくいきませんでした
WPBeginnerサポート
モバイルの制限により、CSSメソッドを使用する必要がある可能性が高いです。
管理者
ヴァル
本当にありがとうございます。大変助かりました。スペースのことで悩んでいました！
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
スティーブン
ありがとうございます、大変参考になりました。
WPBeginnerサポート
当社の記事がお役に立てて嬉しいです
管理者
Douglas Daniel
CSSを変更するにはプレミアムプランの購入が必要だと言われています。もうお手上げですか？
WPBeginnerサポート
WordPress.comをご利用で、このチュートリアルはWordPress.orgサイト向けのものと思われます。
https://014.leahstevensyj.workers.dev/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
残念ながら、コンテンツの行間を単一にするにはShift+Enterなどの他のオプションに限定されます。
管理者
SOO
ありがとうございます！参考になりました！！
WPBeginnerサポート
どういたしまして、私たちの記事がお役に立てて嬉しいです
管理者
レベッカ
私の場合はうまくいきませんでした。うまくいかない理由は何でしょうか？
WPBeginnerサポート
ページビルダープラグインを使用している場合、単一/二重の行間隔の異なる方法がある場合があります。それ以外の場合は、プラグイン/テーマの競合である可能性があり、プラグインを無効にするか、テーマを切り替えて確認する必要があります。
管理者
ティム・G
通常の段落行の間隔を狭めたいです。IMHO、デフォルトでは白すぎるスペースがあります。また、段落の最後に全行ではなく半行を追加したいです。WordPressではデフォルトでダブルキャリッジリターンの同等処理が行われるようで、これはかなり20世紀的で、Wordができることをエミュレートしていません。何かアイデアはありますか？
WPBeginnerサポート
お使いの特定のテーマについてはサポートに連絡することをお勧めします。行間を狭めるためにどのCSSを追加する必要があるか教えてくれるはずです
管理者
ソーファー・アフマド
本当にありがとう
とても参考になります
WPBeginnerサポート
私たちのガイドがお役に立てて嬉しいです
管理者
Sumeet
ありがとう、探していたものでした。助かりました…
WPBeginnerサポート
記事がお役に立てて嬉しいです
管理者
ジェン
神のご加護がありますように！CSSを投稿してくれて本当に感謝しています！これで間隔を変更できるなんて誰が知っていたでしょうか！ずっとこのようなものを探していました！本当にありがとうございます！
WPBeginnerサポート
この記事がお役に立てて嬉しいです
管理者
キャシー
「Shift」+「Enter」の方法を使用していますが、それを行うとフォントサイズを変更できません。回避策はありますか？
WPBeginnerサポート
こんにちは、キャシーさん。
WordPressでフォントサイズを変更する方法に関するガイドをご覧ください。
管理者
ローラ・ステイプルズ
素晴らしいビデオです。コンテンツ、ペース、スピーカーのトーンが気に入りました。ありがとうございます！
クナル・カンデルワル
この提案をありがとうございます。こんなに簡単だとは知りませんでした