一部のウェブサイトはコンテンツが完璧に配置されていてスキャンしやすいのに、他のウェブサイトは窮屈で読みにくいと感じたことはありませんか？
秘訣は、多くの場合、単純なこと、つまり適切な改行とスペーシングにかかっています。
WordPressのエディターで改行を追加したのに、公開ページに表示されないという経験はありませんか？あなたは決して一人ではありません。WordPressは、GoogleドキュメントやMicrosoft Wordのようなワープロソフトとは少し異なる方法でスペースを処理します。
しかし、仕組みを理解すれば、コンテンツの外観を完全に制御できるようになります。
WordPressで改行を追加する、いくつかの信頼できる方法を、簡単なショートカットからより高度なフォーマットオプションまでご紹介します。
WordPressで改行を追加する理由（新しい行の間隔）
一見すると、改行は些細なフォーマットの選択肢のように思えるかもしれませんが、コンテンツのパフォーマンスに大きな影響を与える可能性があります。
可読性の向上からユーザーエクスペリエンスの向上まで、適切なスペースを追加することで、ページはすっきりとプロフェッショナルに見えます。なぜそれが重要なのかは次のとおりです。
- 読みやすさの向上：長文を区切り、スキャンしやすくします。
- モバイルフレンドリー: 小さい画面でもコンテンツをクリアに保ちます。
- 貼り付けたテキストを修正： 他のソースからの書式設定をきれいにします。
- 注意を引く: ヒントやCTAを目立たせます。
要するに、改行は訪問者と検索エンジンの両方にとって、コンテンツを読みやすく、より魅力的なものにします。
注意: 開始する前に、行間は使用しているWordPressテーマによって制御されることを知っておくことが重要です。
ブロックエディターでブロック間のスペースを追加する方法、そしてデフォルトの結果に満足できない場合にテーマの行間隔を調整する方法を説明します。
それを踏まえて、WordPressで簡単に改行を追加する方法を見ていきましょう。
- ブロック間にダブルラインスペースを追加する方法
- 1行のスペースを追加する方法
- 最も簡単な方法：スペーサーブロックの使用
- Modifying the Line Height and Spacing
- 動画チュートリアル
ブロック間にダブルラインスペースを追加する方法
キーボードのWindowsではEnterキー、MacではReturnキーを押して改行すると、WordPressはそれを新しい段落として認識します。
これは、自動的に二重の行間が追加されることを意味します。スペーシングの量はテーマによって制御され、このスタイリングはすべての優れたWordPressテーマの標準機能です。
コンテンツエディタに移動し、行の後にEnterキーまたはReturnキーを押してから、次の行に何かを入力してください。
単純にそうすることで、テーマのスタイリングに基づいて、段落間の明確な区別が見られるはずです。
1行のスペースを追加する方法
さて、住所のようなものを書いている場合、WordPressサイトでは二重間隔ではなく単一間隔にしたい場合があります。
この場合、WindowsではSHIFT + ENTERキー、MacではSHIFT + RETURNキーを押す必要があります。
これは、同じ段落内で新しい行を開始したいことをWordPressに伝えます。このアクションは、新しい段落で使用される二重スペースではなく、単一行の改行を作成します。
最も簡単な方法：スペーサーブロックの使用
任意の2つのブロック間に余分なスペースを追加するための、コード不要の簡単な方法は、組み込みのスペーサーブロックを使用することです。
エディターで「ブロックを追加」ボタンをクリックして新しいブロックを追加し、「スペーサー」を検索するだけです。追加すると、ページに新しい空のスペースが表示されます。
スペーサーをクリックして、青いハンドルを上下にドラッグして高さを調整できます。
これにより、エディター内で垂直方向のスペーシングを正確に制御できます。
行の高さと間隔の変更
エディタで適切な行間を設定しても、テーマに意図したとおりに表示されない場合があります。
修正方法は2つあります。
- プラグインを使用する（簡単な方法）
- CSSコードで手動（より高度）
まずは簡単な方法を見てみましょう。
プラグインを使用して行間を追加する
コードを学ばずにテーマのスタイルを変更したい場合は、CSS Heroのようなプラグインを使用するのが最善の方法です。
CSS Heroを使えば、コードを知らなくてもWordPressサイトのデザインを簡単に変更できます。
詳細については、当社の完全なCSS Heroレビューをご覧ください。
サイドバーの移動やフッターの追加など、テーマに大きな変更を加えたい場合は、ドラッグ＆ドロップページビルダープラグインの方が良い選択肢となります。ページビルダープラグインを使用すると、フォントカラーの変更やWordPressでの改行の追加といった小さな調整も可能になります。
プラグインを使いたくない、またはこの変更だけを行いたいですか？その場合、手動でCSSコードを追加する方法が最適かもしれません。
CSSコードで段落のスペーシングを手動で変更する
プラグインなしで手動で行を改行するには、テーマに CSS を追加する必要があります。
CSSは基本的にMicrosoft Wordの書式設定機能のようなものです。ボタンをクリックする代わりに、プレーンなCSSコードを記述します。初心者が思うほど恐ろしいものではありません。指示に従うだけで、CSSは非常に理解しやすいです。
テーマにカスタムCSSを追加するには、外観 » カスタマイズ ページにアクセスする必要があります。これにより、WordPressテーマカスタマイザーが起動します。ここで、左側の列にある「追加CSS」タブをクリックする必要があります。
これらのメニューオプションが表示されない場合は、ブロックテーマを使用している可能性があります。WordPress管理画面でテーマカスタマイザーが表示されない問題を解決する方法に関する記事をご覧ください。WordPress管理画面でテーマカスタマイザーが表示されない問題を解決する方法。
カスタムCSSボックスに、次のCSSコードを追加する必要があります。
このコードは、WordPressがしばしば.postクラスで識別する投稿のメインコンテンツ領域内のすべての段落要素（p）を対象としています。これにより、記事のみに影響します。
.post p{line-height: 1.5em;}上記のCSSルールは、段落コンテンツの行間を1.5emに変更します。emはタイポグラフィの幅の単位です。
これは、1行の間隔のみを変更します。
WordPress で段落の間隔を変更したい場合（つまり、二重間隔）、パディングを追加する必要があります。
.post p {
line-height: 1.5em;
padding-bottom: 15px;
}
このCSSコードの数値を自由に調整してください。padding-bottomの値を変更すると、段落間のスペースが変更されます。
WPCodeプラグインを使用して、サイトにカスタムCSSを追加することもできます。このプラグインを使用すると、サイトにコードを簡単に挿入して管理できます。
詳細については、WordPressサイトにカスタムCSSを追加する方法に関するガイドをご覧ください。
説明を読むのが好きでない場合は、ビデオチュートリアルをご覧ください。
動画チュートリアル
視覚的なチュートリアルについては、以下のビデオチュートリアルをご覧ください。コンテンツに単一行および二重行の間隔を追加するための、私たちが議論したすべての方法をカバーしています。
この記事がWordPressで改行を追加するのに役立ったことを願っています。また、WordPressブロックパターンの使用方法に関するガイドや、Gutenberg対応のWordPressテーマのリストもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
phil rooksby
追加CSSがありません。段落の間隔を変更しようとしましたが、何も機能せず、ひどい見た目になっています。助けてください！！！
ノーム
ご協力ありがとうございます。色々な場所を探していましたが、プラグインでやりたかったのです。とても簡単にできました。重ねて、本当にありがとうございます。
マリア
こんにちは！段落間に簡単なスペーシングを設けたいのですが、Enterキーを押しても（ダブルスペースのため）、下書きをプレビューしても何も変わりません（すべて1つの段落のままです）。どなたか助けていただけますか？
ラシュミ
こんにちは
行の高さと間隔を変更したいのですが、テーマのCSSファイルに「エディター」アイコン（外観 » エディター）がありません。
どうすればよいでしょうか？
お返事ありがとうございます！
ハンナ
Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy!
Christine
ありがとうございます！ずっと簡単になりました！
ドナ
ありがとうございます、ありがとうございます、ありがとうございます！
別のHTMLエディターで、単一間隔の方法がわかりませんでした。
You saved the day!
ジェラード
素晴らしい、そして永遠の救世主です。
クライアントサイトの1つでスペーシングに苦労していましたが、指先でほぼ正確な答えを見つけられたことに本当に驚きました。今では永久購読者になります。
Elandre
WordPressのヒントをたくさんありがとうございます。このサイトは、私が抱えていたほとんどの苦労を乗り越えるのに大いに役立ちました。
LR
Pilcrowテーマを使用していますが、段落間のダブルスペースをどのように設定すればよいのか全くわかりません。投稿によっては発生する場合としない場合があります。HTMLファイルを見ても、投稿のpタグやパディングは見当たりません。投稿がどのように表示されるかの最終結果しか見えず、その時にダブルスペースが機能しなかったことがわかります。後から編集して修正することはできますか？最後に、外観からエディターメニューへ移動するように指示されていますが、そのオプションがありません。
外観の下には、テーマ、カスタマイズ、ウィジェット、メニュー、ヘッダー、背景、AMP、テーマオプション、モバイルというオプションがあります。
助けてください。
WPBeginnerサポート
LRさん、こんにちは。
CSSは、[外観] -> [カスタマイズ]にアクセスし、カスタマイザーの[追加CSS]タブをクリックすることで追加できます。WordPressでカスタムCSSを追加する方法については、こちらのガイドをご覧ください。
テーマの問題だとお考えの場合は、一時的にデフォルトのWordPressテーマに切り替えてみてください。問題が解消された場合は、テーマ開発者にサポートを依頼できます。
管理者
デレク・カミングス
私のテーマは壊れています。つまり、デフォルトでダブルスペースがありません。言い換えれば、テーマはShift+Enterモードで固定されています。したがって、次のコードに関連して：
.post p { line-height: 1.5em; padding-bottom: 15px; }
15px は通常のデフォルトの二重間隔ですか？デフォルトでは何ピクセルであるべきですか？また、このコードをどこに配置しても関係ありませんか？ありがとう！
フェミ
Shift + Enterのヒントをありがとうございます。長年知りませんでした。行き詰まったときはいつもあなたのサイトに助けられています。
Lyn
こんにちは：テーマ全体のCSSを変更するのではなく、1つのページでカスタムラインスペーシング（例えば1.5em）を取得するにはどうすればよいですか？他の2人も同じことを尋ねていますが、少なくとも私が見つけた範囲では返信がありません。ありがとうございます！
デニース・B
pの余白をゼロに設定しました。CSSでは、p {margins: 0; } のようになります。
Los Hundlos
wysywig tinye mceエディタでWordPressの行間が大きく開くのを避けるためにShift+Enterを使用します。うまくいきました!!!!素晴らしい！
キャット
単にテキストを追加し、テキストの色を白に変更する（背景が白の場合）のはどうでしょうか？これにより、行間をより簡単に作成およびカスタマイズできるようになります（もちろん、背景がフォントカラーと一致しないものの写真である場合を除きます）。
Tim
本当にありがとうございます！命の恩人です！
マイケル・リッチ
WPBeginnerスタッフ様、こんにちは。
別の質問があります。Visual Composerを使用しており、ホームページのセクション見出しの間に多くの「Separator with Text」区切り線を追加しました。これらのテキスト見出しを、そのセクションへのリンクにもしたいと考えています。
しかし、リンクを追加するたびに、区切り線にあったセクション識別テキストが失われ、「TITLE」というデフォルトのテキストに置き換わってしまいます。
リンクにするために、この括弧内にリンクコードを追加しています：
[vc_text_separator title=”1950年代の車”]
頭を掻きむしりすぎて、ハゲていると思います。どんな助けでも一生の感謝を得られますよ！！！
ありがとうございます、
マイク
アンソニー・クーパー
WordPressの「Divi」テーマを使用していますが、大きなスペースを作成するためにEnterキー（またはShift + Enterキー）を2回押しても無視されることがわかりました。これを回避するには、Enterキーを1回押し、行に文字を入力します（何でも構いません）。それをハイライトして文字のフォントカラーを白に変更し、もう一度Enterキーを押します。これにより、テーマを編集することなく、目的の行間が得られます。行の余分なスペースについても同様です。必要なだけ文字を入力し、それらをハイライトしてフォントカラーを白に変更し、目的のフォントカラーで続行します。
Julie
素晴らしいヒントです！本当にありがとうございます。たくさんの頭痛の種と手間を省いてくれました、アンソニー！
ロビン・ブリンカー
一部の検索エンジンは、このような「隠された」テキストをスパムとして扱う可能性があることに注意してください。
エレン
これは本当に役立ちました、ありがとう！
クリスティ
THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces.
クリスティ
P.S. ~ ハハ！私のコロンと括弧がスマイリーになるなんて知りませんでした。笑
リンダ・ポール
ああ、そうです！長年悩まされていた問題（強制的な1行スペースの段落）を解決するのに役立ちました！
WPBeginnerサポート
Glad you found it helpful
管理者
デビッド・M・エバーソールSr.
私はWP Beginnerの購読者です。
私のサイトで製品にエンジニアリングデータを入力することについて質問がありました。テーブルのスペーシングがページ上で大きすぎるように見えました。WordPressのサポートを検索しましたが、シングルラインスペーシングの質問に対するぶっきらぼうな回答しか見つかりませんでした。
あなたが最初に質問に答えてくれて、それは明らかに正解でした。ありがとうございます。
敬具
Dave
WPBeginnerサポート
Glad you found it helpful
管理者
Mark
Androidではどうですか？最新のアップデートで強制的にダブルスペース（新しい段落）になりました。詩を書く人にはあまり良くありません。シングルスペースに戻す方法はありますか？
シェリル
Omega Themeを使用していますが、Ctrl+Enterが機能しません。他に何かできることはありますか？CSSファイルにpost.pが見つかりません。
ベッキー
とても参考になりました、ありがとうございます！
Adnan Khan
新しいWordPressユーザーにとって、この非常に役立つヒントをありがとうございます。
ティナ・グライスナー
「シフト」と「エンター」で1行の間隔を空ける方法を教えていただき、ありがとうございます。長年この方法を知りたかったのですが、解決策を見つけることができませんでした。
イアン
こんにちは。
これは私にはうまくいきましたが、CSSは私のページでは何も効果がありません…
Will
私も同じことが起こりました。挿入する更新されたコードはありますか？
A. Lougheed
あらゆる場所で答えを探しています…テキストエディタに
を追加すると、ビジュアルエディタで削除されます。気が狂いそうです。wpbeginnerには推奨事項がありますか？
これを止めるためにプラグインを追加すべきですか？
何年も前にプラグインを試しましたが、すべての投稿をやり直して再フォーマットする必要がありました。
チュートリアルやアドバイスへのリンクがあれば大歓迎です！
WPBeginnerサポート
Actually it is also removed from your comment.
WordPressの投稿に特殊文字を追加する方法のガイドをご覧ください。
管理者
ジェシカ
投稿を1つだけ調整するためのコードは何ですか？
バラドワジ
ありがとうございます。参考になりました。
Samadarshi
Thank you for such wonderful articles
I was completely lost when I started wordpress but now I have a pretty basic idea
Thank u
ニール・アンフレッド
ありがとうございます！これで投稿をより簡潔にできました。ただし、各投稿の最初の段落は除く。なぜか行間が2倍になっているようです。CSSを編集に追加して、行間を詰めることができるコードスニペットはありますか？
ニール・アンフレッド
ありがとうございます！スニペット（.post p{line-height: 1.5em;}）を編集CSSに追加したことで、テキストが格段に読みやすくなりました。さて、私の問題はこうです。各WordPress投稿の最初の段落は、他の段落よりも行間がずっと広く、この行間コードの影響を受けていません。編集CSSに追加できる別のスニペットで、これらの最初の行の行間を詰めることはできますか？
ティファニー
本当にありがとうございます。あなたのサイトは素晴らしいです。とても助かりました。購読しました!!素晴らしい仕事を続けてください!!
WPBeginnerサポート
温かいお言葉ありがとうございます。お役に立てて嬉しいです。
管理者
ジョー・シモンズ
ありがとうございます！私も「shift+enter」のことは知りませんでした。
Debby
Shift + Enterです。こんなに簡単なことだったなんて！ありがとうございます、ありがとうございます、ありがとうございます！
ガモ・ナナ
SHIFT + Enter で単一行間隔を設定してくれてありがとう
ボブ・M.
この知恵（Shift+Enter）にも感謝したいと思います！
JE
チュートリアルありがとうございます。しかし、段落の行間を調整するにはどうすればよいですか？3単語のタイトルがあり、中央揃えで3行に積み重ねられています。すべての行のフォントサイズが異なるため、行間が不均一です。テキストエディタツールやプラグインで簡単に調整する方法を探していました。
何かアイデアはありますか？
サイード・バルキ
Ctrl + Fを押すと表示されるブラウザの検索ボックスを使用しました
Mx
.post p を検索ボックスで見つけました。その検索ボックスの見つけ方を教えていただけますか？ありがとう4
ジュン・ハン
これはとても役に立ちます。
ありがとうございます。
http://www.digitalgrog.com.au/
それは今まで私の悩みの種でした..ありがとう、これでちゃんとスペースを空けられます..ちなみにホストのリストを作りました、チェックしてみてください
http://www.digitalgrog.com.au/australian/comparison-on-blog-web-hosting-for-australians/
カレン・サーフィー・マム
すごい！！私もずっとこれをどうやるか知りたかったんです！！！知ってみるととても簡単ですね…ありがとう xxx
Widdershins
Oiiiiiiiiiiii!!! I’ve been trying to find out how to do that for yonks!!!!
Thankyouthankyouthankyou
fastow2012
「.post pタグが見つからない場合は、単純に作成してください。」
どこに？CSSファイルにどこでもコピー＆ペーストすればいいのですか？
WPBeginnerスタッフ
できればcssファイルの末尾に。
Mx
すみませんが、どこに配置するのかまだ理解できません。もっと詳しく説明していただけますか？ありがとう
ジェームズ
これをどうやるのかずっと不思議に思っていました。トレーニングをありがとうございます。
Valerie
私は「初心者」というほどではありませんが、知識に抜けがあり、あなたはまさにこのライターとWordユーザーにとってWPに関する最もフラストレーションのたまることの1つを解決してくれました…これを、そしてあなたの素晴らしい情報すべてに感謝します…あなたの投稿とあなたのサイトから素晴らしいことを学び続けています。感謝と乾杯を！
kelly
almost four years of blogging and finally!
so awesome, thanks!!