WPBeginner - 初心者向けWordPressチュートリアル

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

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

編集スタッフ | | 読者開示

Shares 89 ChatGPT Perplexity X LinkedIn WhatsApp

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

秘訣は、多くの場合、単純なこと、つまり適切な改行とスペーシングにかかっています。

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

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

WordPressで改行を追加する、いくつかの信頼できる方法を、簡単なショートカットからより高度なフォーマットオプションまでご紹介します。

WordPressで改行を追加する方法

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

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

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

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

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

注意: 開始する前に、行間は使用しているWordPressテーマによって制御されることを知っておくことが重要です。

ブロックエディターでブロック間のスペースを追加する方法、そしてデフォルトの結果に満足できない場合にテーマの行間隔を調整する方法を説明します。

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

ブロック間にダブルラインスペースを追加する方法

キーボードのWindowsではEnterキー、MacではReturnキーを押して改行すると、WordPressはそれを新しい段落として認識します。

これは、自動的に二重の行間が追加されることを意味します。スペーシングの量はテーマによって制御され、このスタイリングはすべての優れたWordPressテーマの標準機能です。

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

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

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

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

1行のスペースを追加する方法

さて、住所のようなものを書いている場合、WordPressサイトでは二重間隔ではなく単一間隔にしたい場合があります。

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

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

これは、同じ段落内で新しい行を開始したいことをWordPressに伝えます。このアクションは、新しい段落で使用される二重スペースではなく、単一行の改行を作成します。

最も簡単な方法：スペーサーブロックの使用

任意の2つのブロック間に余分なスペースを追加するための、コード不要の簡単な方法は、組み込みのスペーサーブロックを使用することです。

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

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

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

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

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

行の高さと間隔の変更

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

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

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

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

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

コードを学ばずにテーマのスタイルを変更したい場合は、CSS Heroのようなプラグインを使用するのが最善の方法です。

CSS Heroを使えば、コードを知らなくてもWordPressサイトのデザインを簡単に変更できます。

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

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

サイドバーの移動やフッターの追加など、テーマに大きな変更を加えたい場合は、ドラッグ＆ドロップページビルダープラグインの方が良い選択肢となります。ページビルダープラグインを使用すると、フォントカラーの変更やWordPressでの改行の追加といった小さな調整も可能になります。

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

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

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

CSSは基本的にMicrosoft Wordの書式設定機能のようなものです。ボタンをクリックする代わりに、プレーンなCSSコードを記述します。初心者が思うほど恐ろしいものではありません。指示に従うだけで、CSSは非常に理解しやすいです。

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

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

カスタムCSSの追加

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

このコードは、WordPressがしばしば.postクラスで識別する投稿のメインコンテンツ領域内のすべての段落要素（p）を対象としています。これにより、記事のみに影響します。

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

上記のCSSルールは、段落コンテンツの行間を1.5emに変更します。emはタイポグラフィの幅の単位です。

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

これは、1行の間隔のみを変更します。

WordPress で段落の間隔を変更したい場合（つまり、二重間隔）、パディングを追加する必要があります。

.post p { 
line-height: 1.5em;
padding-bottom: 15px;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

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

WPCodeプラグインを使用して、サイトにカスタムCSSを追加することもできます。このプラグインを使用すると、サイトにコードを簡単に挿入して管理できます。

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

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

動画チュートリアル

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

WPBeginnerを購読する

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

WPBeginnerで今すぐ人気！

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

究極のWordPressツールキット

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

今すぐダウンロード

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

99 CommentsLeave a Reply

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

    Reply

  3. この情報、本当にありがとうございます！とても役に立ちました。まさに探していたものです。

    Reply

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

    Reply

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

      Reply

      管理者

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

    Reply

    • モバイルの制限により、CSSメソッドを使用する必要がある可能性が高いです。

      Reply

      管理者

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

      Reply

      管理者

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

    Reply

    • You would want to reach out to the support for your specific theme and they should be able to tell you what CSS needs to be added to reduce your line spacing :)

      Reply

      管理者

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

    Reply

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

    Reply

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

    Reply

返信を残す

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

Copyright © 2009 - 2025 WPBeginner LLC. All Rights Reserved. WPBeginner® は登録商標です。

Awesome Motive が管理 | SiteGround による WordPressホスティング

WordPress® の商標は WordPress Foundation の知的財産です。このウェブサイトでの WordPress® およびその名称の使用は、識別目的のみであり、WordPress Foundation による承認を意味するものではありません。WPBeginner は WordPress Foundation によって承認、所有、または提携されていません。

私は…について助けが必要です

人気の検索:

ブログの始め方 WordPress SEO WordPressのパフォーマンス WordPressのエラー WordPressセキュリティ オンラインストアの構築