WordPressのインデント設定方法｜スペースで崩れる原因から字下げ・2行目・CSS対応まで解説
はじめに
WordPressで文章の開始位置を右にずらしたいとき、「スペースを何個か入力すればよい」と考える方は少なくありません。しかし、スペースによる位置調整は、パソコンとスマートフォンで見え方が変わったり、画面幅によって改行位置がずれたりする原因になります。
WordPressでインデントを正しく設定するには、目的に応じてブロックエディターの機能やCSSを使い分けることが重要です。
本記事では、WordPressにおけるインデントの種類を整理したうえで、ブロックエディターとクラシックエディターでの設定方法、CSSによる字下げ、2行目以降を下げる「ぶら下げインデント」の作り方を解説します。スペースでインデントすると表示が崩れる理由も紹介するため、記事本文や箇条書きの位置をきれいに整えたい方は参考にしてください。
1. WordPressのインデントとは？字下げの種類と使い分け
WordPressのインデントとは、文章やリストの開始位置を右側へ移動させることです。日本語では「字下げ」と呼ばれることもあります。
ただし、インデントには複数の種類があり、下げる対象や目的によって設定方法が異なります。まずは、代表的なインデントの違いを確認しましょう。
1-1. インデント（字下げ）で文章の開始位置を整える目的
インデントを設定する主な目的は、文章の階層やまとまりを視覚的にわかりやすくすることです。
たとえば、次のような場面で利用されます。
段落の1行目を1文字分下げる
補足説明を本文より右側に配置する
箇条書きの中に下位項目を作る
引用部分を本文と区別する
用語集や参考文献の2行目以降をそろえる
インデントを適切に使うと、文章の構造を読者が把握しやすくなります。一方、必要以上に大きく字下げすると、スマートフォンで文章を表示できる幅が狭くなるため注意が必要です。
1-2. 1行目だけ下げる「字下げ」と段落全体を下げる「左インデント」の違い
文章の1行目だけを下げる設定と、段落全体を右に移動する設定は異なります。
1行目だけを下げる字下げは、一般的な日本語の段落表現に使われます。CSSでは、主にtext-indentプロパティを使用します。
p {text-indent: 1em;}一方、段落全体を右にずらす左インデントでは、margin-leftやpadding-leftを使います。
.indent-block {margin-left: 2em;}text-indentは最初の行だけに影響しますが、margin-leftやpadding-leftは、折り返された2行目以降を含む要素全体に影響します。
1-3. 2行目以降を下げる「ぶら下げインデント」とは
ぶら下げインデントとは、1行目は通常の位置に置き、折り返した2行目以降だけを右に下げる形式です。
次のような文章に適しています。
用語と説明文を並べた文章
参考文献や出典の一覧
注釈や注意事項
項目番号を付けた説明
長いURLを含むリスト
ぶら下げインデントは、左側に余白を作ったうえで、1行目だけを負の値で左に戻すことで実現できます。
.hanging-indent {padding-left: 2em;text-indent: -2em;}この例では、文章全体を2文字分右へ移動し、1行目だけを2文字分左へ戻しています。
1-4. WordPressでインデントを設定する主な方法
WordPressでインデントを設定する方法は、主に次の4つです。
リストブロックの階層を変更する
引用ブロックを利用する
グループブロックの余白を調整する
CSSで位置や字下げ幅を指定する
箇条書きの階層を作るだけなら、リストブロックのインデント機能が簡単です。段落の1行目や2行目以降を細かく調整したい場合は、CSSが適しています。
見た目だけを整える目的で引用ブロックを使うと、文章の意味とHTML構造が一致しなくなる可能性があります。引用ブロックは、原則として実際の引用文に使用しましょう。
2. WordPressのブロックエディターでインデントを設定する方法
WordPressのブロックエディターでは、通常の段落ブロックに一律のインデントボタンが用意されているとは限りません。使用するブロックによって、設定できる内容が異なります。
箇条書きではリストブロック、引用文では引用ブロック、段落全体の位置調整ではグループブロックやCSSを使用します。
2-1. リストブロックのインデントを増やす・減らす手順
箇条書きや番号付きリストの階層を変更する手順は、次のとおりです。
投稿または固定ページの編集画面を開く
「＋」を選択してリストブロックを追加する
箇条書きまたは番号付きリストを入力する
階層を変更したい項目にカーソルを置く
ブロックツールバーの「インデント」または「リスト項目をインデント」を選択する
インデントを増やすと、選択した項目が一つ上の項目に対する下位リストになります。
たとえば、次のような階層です。
WordPressの設定
表示設定
パーマリンク設定
プラグインの設定
インデントを元に戻す場合は、「インデントを戻す」または「リスト項目のインデントを解除」に相当するボタンを選択します。
2-2. ツールバーにインデントボタンが表示されない場合の対処法
インデントボタンが表示されない場合は、現在選択しているブロックを確認してください。
リスト用のインデントボタンは、基本的にリスト項目を選択しているときに表示されます。通常の段落ブロックを選択しても、同じボタンは表示されません。
ボタンが見つからない場合は、次の点を確認します。
リストブロック内にカーソルがあるか
リスト全体ではなく個別のリスト項目を選択しているか
ツールバーの「その他」メニューに格納されていないか
上部ツールバーが有効になっていないか
WordPressやプラグインが古い状態ではないか
使用中のテーマやプラグインが編集画面に影響していないか
画面上部にツールバーを固定する設定が有効な場合、ブロックの近くではなく編集画面上部にボタンが表示されます。
2-3. 引用ブロックを使って文章全体を字下げする方法
引用ブロックを使用すると、多くのテーマでは文章の左側に余白や線が付き、本文より右側に配置されます。
設定手順は次のとおりです。
編集画面で「＋」を選択する
「引用」を検索する
引用ブロックを追加する
引用する文章と必要に応じて出典を入力する
引用ブロックのデザインはテーマによって異なります。左側に線が表示されるテーマもあれば、背景色や上下の余白が付くテーマもあります。
ただし、引用ブロックは他の文章や発言を引用するためのブロックです。単に文章を右へずらしたいだけの場合は、グループブロックの余白設定やCSSを使うほうが適切です。
2-4. グループブロックの余白設定で文章を右にずらす方法
使用中のテーマやWordPressの編集環境によっては、グループブロックの「寸法」や「余白」設定から、内側の文章を右にずらせます。
基本的な手順は次のとおりです。
右にずらしたい段落を選択する
ブロックツールバーのメニューから「グループ化」を選択する
グループブロックを選択する
右側の設定パネルを開く
「スタイル」または「寸法」を選択する
左側のパディングを設定する
左パディングに1emや2em程度を指定すると、グループ内の文章を右へ移動できます。
テーマによっては余白設定が表示されないことがあります。その場合は、グループブロックにCSSクラスを設定し、追加CSSで調整します。
2-5. キーボードのTabキーでインデントできない理由
ブロックエディターでTabキーを押しても、通常の段落を右へ移動できるとは限りません。Tabキーは、編集画面内のボタンや入力欄へフォーカスを移動する操作として使われることがあるためです。
リストブロック内では、Tabキーによって項目の階層を下げられる場合があります。ただし、環境や選択状態によって動作が異なるため、確実に変更したい場合はツールバーのインデントボタンを使用してください。
通常の段落にTabキー相当の空白を入れたい場合でも、スペースの連続入力は避け、CSSのtext-indentやpadding-leftを使用するのが適切です。
3. WordPressのクラシックエディターでインデントを設定する方法
クラシックエディターでは、ビジュアルエディターのツールバーにあるインデントボタンを利用できます。
ただし、インデントボタンを押したときに生成されるHTMLや表示結果は、選択している要素やエディターの設定によって異なることがあります。公開前にプレビュー画面で確認しましょう。
3-1. インデントボタンで段落を字下げする手順
クラシックエディターで段落をインデントする基本的な手順は、次のとおりです。
投稿の編集画面を開く
「ビジュアル」タブを選択する
インデントしたい段落内にカーソルを置く
ツールバーの「インデントを増やす」ボタンを選択する
プレビューで表示を確認する
複数の段落をまとめて変更したい場合は、対象範囲を選択してからインデントボタンを押します。
テーマのCSSによっては、想定より余白が大きくなったり、ほとんど変化が見えなかったりする場合があります。
3-2. インデントを元に戻す手順
設定したインデントを元に戻すには、対象の段落にカーソルを置き、「インデントを減らす」ボタンを選択します。
ボタンを押しても戻らない場合は、テキストエディターでHTMLを確認してください。段落がblockquoteタグで囲まれていたり、要素に直接スタイルが設定されていたりする可能性があります。
HTMLを削除するときは、開始タグと終了タグの対応を崩さないように注意しましょう。
3-3. ビジュアルエディターとテキストエディターの違い
ビジュアルエディターは、公開後の見た目に近い状態で文章を編集する画面です。HTMLの知識がなくても、ツールバーのボタンを使って書式を設定できます。
テキストエディターは、HTMLタグを直接確認・編集する画面です。特定のCSSクラスを設定したい場合や、不要なタグを削除したい場合に利用します。
たとえば、次のようにCSSクラスを付けられます。
<p class="first-line-indent">この段落の1行目を字下げします。</p>ただし、HTMLの構造を誤って変更すると、記事全体のレイアウトが崩れる可能性があります。編集前に内容をコピーしておくと安心です。
3-4. インデントボタンが見つからない場合の確認項目
クラシックエディターのインデントボタンが見つからない場合は、ツールバーが1段しか表示されていない可能性があります。
「ツールバー切り替え」に相当するボタンを押し、2段目のツールバーを表示してください。
あわせて、次の項目も確認しましょう。
「ビジュアル」タブを選択しているか
クラシックエディターが正常に読み込まれているか
ブラウザのキャッシュが影響していないか
エディターを拡張するプラグインが干渉していないか
ユーザープロフィールでビジュアルエディターが無効になっていないか
原因を切り分ける際は、WordPressやプラグインを更新し、キャッシュを削除したうえで再確認します。
4. WordPressでCSSを使って字下げする方法
段落の1行目だけを下げたい場合や、特定の文章だけにインデントを設定したい場合は、CSSを使用すると細かく調整できます。
CSSを追加する前に、サイトのバックアップを作成しておきましょう。また、変更後はパソコンとスマートフォンの両方で表示を確認してください。
4-1. 追加CSSを入力する場所
クラシックテーマでは、管理画面から次の順番で追加CSSを開けることがあります。
「外観」→「カスタマイズ」→「追加CSS」
ブロックテーマでは、「カスタマイズ」が表示されない場合があります。その場合は、テーマの機能、子テーマのCSSファイル、CSS追加機能を備えたプラグインなどを利用します。
テーマファイルを直接編集すると、テーマの更新時に変更内容が消える可能性があります。継続的にCSSを管理する場合は、追加CSSや子テーマを利用するのが安全です。
4-2. 段落の1行目だけを字下げする「text-indent」の書き方
段落の1行目だけを1文字分下げる基本的なCSSは、次のとおりです。
.first-line-indent {text-indent: 1em;}emは、その要素の文字サイズを基準にした単位です。1emを指定すると、おおむね1文字分の字下げになります。
対象の段落には、ブロックエディターの右側にある「高度な設定」から、追加CSSクラスとして次のクラス名を入力します。
first-line-indentクラス名を入力するときは、先頭に.を付けません。CSSを書くときだけ、クラス名の先頭に.を付けます。
4-3. 段落全体を右にずらす「margin-left」と「padding-left」の使い分け
段落全体を右にずらす場合は、margin-leftまたはpadding-leftを使用します。
.indent-margin {margin-left: 2em;}.indent-padding {padding-left: 2em;}margin-leftは要素の外側に余白を作り、要素自体を右へ移動させます。背景色や枠線も含めて右へ移動したい場合に適しています。
padding-leftは要素の内側に余白を作ります。背景色や枠線の位置を維持しながら、内部の文章だけを右へずらしたい場合に向いています。
たとえば、背景色付きの注意ボックス内で文章だけを右へ移動するなら、padding-leftが使いやすいでしょう。
4-4. 特定の文章だけにインデントを適用するCSSクラスの設定方法
特定の段落だけにインデントを設定する場合は、専用のCSSクラスを作成します。
追加CSSに次のコードを入力してください。
.custom-indent {margin-left: 2em;}続いて、ブロックエディターで対象の段落を選択し、右側の設定パネルから「高度な設定」を開きます。「追加CSSクラス」に次のクラス名を入力します。
custom-indent一つのブロックに複数のクラスを設定する場合は、半角スペースで区切ります。
custom-indent another-classCSSクラスを使えば、記事内の必要な場所だけに同じインデント設定を繰り返し適用できます。
4-5. 投稿本文すべてに字下げを適用するCSSの記述例
投稿本文のすべての段落で1行目を字下げしたい場合は、投稿本文を囲むクラスを指定します。
テーマによってHTMLのクラス名は異なりますが、記述例は次のとおりです。
.entry-content p {text-indent: 1em;}ただし、この指定では、投稿本文内のすべてのp要素が対象になります。次のような文章まで字下げされる可能性があります。
ボタンの説明文
吹き出し内の文章
注意ボックス内の文章
リスト内の段落
引用文
プラグインが出力した文章
不要な要素を除外したい場合は、:not()を利用できます。
.entry-content p:not(.no-indent) {text-indent: 1em;}字下げしたくない段落にno-indentクラスを設定すれば、その段落だけ対象から外せます。
また、記事冒頭のリード文には字下げが不要なケースもあります。サイト全体へ適用する前に、複数のページで表示を確認しましょう。
4-6. PCとスマートフォンでインデント幅を変える方法
パソコンでは適切に見えるインデントでも、画面の狭いスマートフォンでは本文の表示幅を圧迫することがあります。
メディアクエリを使うと、画面幅に応じてインデント量を変更できます。
.responsive-indent {margin-left: 3em;}@media screen and (max-width: 767px) {.responsive-indent {margin-left: 1em;}}
この例では、通常は3文字分、画面幅が767px以下の場合は1文字分の左余白を設定しています。
スマートフォンでインデント自体を解除する場合は、次のように指定します。
@media screen and (max-width: 767px) {.responsive-indent {margin-left: 0;}}固定のピクセル値だけに頼らず、emやremなど文字サイズに連動する単位を使うと調整しやすくなります。
5. WordPressで2行目以降をインデントする方法
文章の2行目以降をインデントする場合は、ぶら下げインデントを使用します。
WordPressの標準的な段落ブロックには、2行目以降だけを下げる専用ボタンがないため、CSSで設定するのが一般的です。
5-1. ぶら下げインデントが適している文章
ぶら下げインデントは、先頭の記号や項目名と、その後に続く説明文を区別したい場面に適しています。
たとえば、次のような文章です。
注意：プラグインを更新する前に、サイトのバックアップを作成してください。画面幅が狭くなって文章が折り返されたとき、2行目を「注意：」の下ではなく、説明文の開始位置にそろえると読みやすくなります。
参考文献や用語集など、先頭部分を見出しのように機能させたい場合にも有効です。
5-2. 「padding-left」と負の「text-indent」を使うCSSの記述例
ぶら下げインデントの基本的なCSSは、次のとおりです。
.hanging-indent {padding-left: 2em;text-indent: -2em;}padding-left: 2em;で文章全体を右へ移動し、text-indent: -2em;で1行目だけを左へ戻しています。
対象の段落には、追加CSSクラスとして次のクラス名を入力します。
hanging-indent先頭部分の長さに応じて、2emを3emや4emに変更してください。
.hanging-indent-wide {padding-left: 4em;text-indent: -4em;}負のtext-indentだけを設定すると、1行目がコンテンツ領域の外へはみ出すことがあります。基本的には、同じ幅のpadding-leftと組み合わせて使用します。
5-3. 箇条書きの2行目を先頭文字にそろえる方法
通常のul要素を使用した箇条書きでは、テーマのCSSによってマーカーと文章の折り返し位置が決まります。
箇条書きの2行目を文章の先頭位置にそろえるには、まず標準のリストブロックを使う方法がおすすめです。スペースや「・」を手入力して箇条書きを作ると、折り返し位置をきれいにそろえられません。
リストの位置をCSSで調整する場合は、次のような指定を使用できます。
.entry-content ul {padding-left: 1.5em;}マーカーを文章領域の内側に表示するlist-style-position: inside;もありますが、折り返した2行目がマーカーの位置まで戻り、期待する配置にならないことがあります。
.entry-content ul {list-style-position: outside;padding-left: 1.5em;}一般的には、outsideのまま左パディングを調整したほうが、折り返し位置を整えやすくなります。
5-4. 番号付きリストの折り返し位置を整える方法
番号付きリストでは、項目数が増えて1桁から2桁になると、番号部分の幅が変わります。テーマの設定によっては、文章の開始位置が不ぞろいに見えることがあります。
基本的な調整例は次のとおりです。
.entry-content ol {list-style-position: outside;padding-left: 2em;}番号と文章の間隔をより細かく制御したい場合は、CSSカウンターを使う方法もあります。
.custom-number-list {list-style: none;counter-reset: item;padding-left: 0;}.custom-number-list li {counter-increment: item;position: relative;padding-left: 2.5em;}
.custom-number-list li::before {content: counter(item) ".";position: absolute;left: 0;width: 2em;text-align: right;}
ただし、通常の記事であれば、WordPressの番号付きリストブロックを使用し、padding-leftを調整するだけで十分な場合が多いでしょう。
5-5. 2行目の位置がそろわない場合の調整方法
2行目の位置がそろわない場合は、次の項目を確認します。
先頭の記号や文字数が項目ごとに異なっていないか
全角スペースと半角スペースが混在していないか
テーマのCSSが上書きしていないか
padding-leftと負のtext-indentの値が一致しているかリストに
list-style-position: inside;が設定されていないか段落内に不要な改行タグが入っていないか
ぶら下げインデントでは、次の2つの値を同じにするのが基本です。
.hanging-indent {padding-left: 3em;text-indent: -3em;}先頭部分の幅が項目ごとに大きく異なる場合、text-indentだけでは完全にそろわないことがあります。その場合は、先頭部分と本文を別の要素に分け、CSS GridやFlexboxを使う方法が適しています。
<div class="term-row"><span class="term-label">注意：</span><span class="term-text">更新前にバックアップを作成してください。</span></div>.term-row {display: grid;grid-template-columns: 5em 1fr;}この方法なら、ラベル部分の幅を固定し、説明文の開始位置を統一できます。
6. スペースでインデントすると表示が崩れる原因
WordPressで文章の前にスペースを入力してインデントすると、編集画面では整って見えても、公開ページで位置が変わることがあります。
主な原因は、HTMLでは連続する半角スペースが一つの空白として扱われることです。
たとえば、文章の前に半角スペースを5個入力しても、通常のHTML表示では一つ分にまとめられる可能性があります。
全角スペースや特殊な空白文字を使えば見た目をずらせる場合もありますが、次のような問題が起こります。
パソコンとスマートフォンで位置が変わる
フォントによって空白の幅が異なる
画面幅が狭いと不自然な位置で折り返される
コピーした文章に不要な空白が残る
音声読み上げや検索エンジンに意図が正しく伝わらない
空白の数を変更しなければ位置を調整できない
テーマ変更後にレイアウトが崩れる
を複数入力して位置を調整する方法もおすすめできません。 は改行されない空白であるため、連続して使うとスマートフォンで文章が画面外にはみ出す原因になります。
また、スペースは見た目を一時的にずらしているだけで、文章の構造やインデントの意味をHTMLに与えるものではありません。
目的に応じて、次のように使い分けましょう。
段落の1行目だけ下げる：
text-indent段落全体を下げる：
margin-leftまたはpadding-left2行目以降を下げる：
padding-leftと負のtext-indent箇条書きの階層を作る：リストブロックのインデント機能
引用文を区別する：引用ブロック
複雑な項目を整列する：CSS GridまたはFlexbox
スペースではなく、ブロックの機能やCSSを使うことで、画面サイズが変わっても崩れにくいレイアウトを作れます。
まとめ
WordPressのインデントには、1行目だけを下げる字下げ、段落全体を右へ移動する左インデント、2行目以降を下げるぶら下げインデントがあります。
箇条書きの階層を変更する場合は、ブロックエディターのリストブロックにあるインデント機能を使用します。引用文には引用ブロック、文章全体の位置調整にはグループブロックの余白設定やCSSが適しています。
CSSで設定する場合は、目的に応じてプロパティを使い分けましょう。
/* 1行目だけを下げる */.first-line-indent {text-indent: 1em;}/* 段落全体を下げる */.block-indent {margin-left: 2em;}
/* 2行目以降を下げる */.hanging-indent {padding-left: 2em;text-indent: -2em;}
文章の前に半角スペースや全角スペースを並べる方法は、画面サイズやフォントによって表示が崩れやすいため避けるのが無難です。
インデントを設定したあとは、編集画面だけで判断せず、公開前のプレビューを確認してください。特に、パソコンとスマートフォンの両方で、折り返し位置や本文の表示幅に問題がないか確認することが大切です。