WordPressインデントのやり方完全ガイド｜2行目・HTMLをまとめて整理

文章を書いていて「Wordみたいに段落の頭を1文字下げたいのに、WordPressだとやり方がよく分からない…」と感じたことはないでしょうか。

この記事では、そんなモヤモヤをスッキリさせるために、WordPressでできるインデントの基本と、2行目だけそろえる方法、HTMLを使った細かい調整のコツをまとめていきます。

WordPressでインデントのやり方をざっくり整理しよう

そもそもインデントとは？基本用語を整理

インデントという言葉はよく聞きますが、意味を説明してと言われると意外とあいまいになりがちです。WordPressで設定するときに迷わないように、よく出てくる用語を先に整理しておきます。

用語	意味	具体例
インデント	行頭を少し右にずらすこと	小説の1行目を1文字下げる
ぶら下げインデント	2行目以降だけ右にずれる形	記号＋本文で2行目以降が記号の位置でそろう
段落（パラグラフ）	ひとかたまりの文章	pタグ1つ分の文章
1em	その文字サイズ1文字分の幅	日本語の全角1文字ぶんくらいの感覚

インデントはざっくり言うと「行頭につく小さな余白」のことです。CSSでは、text-indentやmargin-left、padding-leftといったプロパティを組み合わせて、この余白を調整していきます。

WordPressでインデントがややこしく感じる理由

「Wordならボタン1つでできるのに、WordPressだと毎回調べてしまう…」という声をよく聞きます。私も最初は同じことを思っていました。

ややこしく感じる大きな理由は、次のようなものです。

つまり、WordPressのインデントは「筋トレのようにひたすらスペースを打つ問題」ではなく、「CSSとHTMLのルールを押さえて整える問題」に近いです。このあと、できるだけコピペで使える形で、具体的なやり方を見ていきます。

WordPressでインデントを付ける3つの基本パターン

ブロックエディタだけでインデントするやり方

まずは、コードを書くのが苦手な方向けに、ブロックエディタの操作だけでインデントを作る方法から紹介します。グループブロックや段落ブロックの余白設定を使えば、「なんとなくここだけ右に寄せたい」を簡単に実現できます。

大まかな流れは次のとおりです。

• インデントしたい段落ブロックを選ぶ
• 必要に応じて、段落ブロックをグループブロックで囲む
• 画面右側の「ブロック」設定で、「余白」や「パディング」の左側だけ値を入れる

イメージとしては、「段落の左側にだけ余白を足して、段落全体を少し右に押し出す」感じです。厳密に1文字分を狙うというより、「見た目が読みやすくなる位置」に感覚で合わせていく使い方になります。

エディタ操作・CSS・HTMLのそれぞれの特徴を、ざっくり比較しておきます。

方法	難易度	向いている人	デメリット
ブロックエディタの余白設定	かんたん	コードに苦手意識がある人	記事ごとの微調整が必要になりやすい
CSSでまとめて指定	ふつう	サイト全体の見た目を整えたい人	設定を誤ると予想外の場所までインデントされることがある
HTMLで個別指定	やや難しい	特定の段落だけ見た目を変えたい人	編集のたびにタグを意識する必要がある

CSSで段落全体のインデントを自動化する方法

サイト全体で、読み物っぽくすべての段落を1文字下げたい場合は、CSSでインデントをまとめて指定してしまうのがいちばん効率的です。毎回インデントを入れなくて済むので、書くことに集中できます。

よく使う書き方は、次のようなイメージです。

• 本文全体に効かせる場合：
  p { text-indent: 1em; }
• 記事本文だけに効かせたい場合：
  .entry-content p { text-indent: 1em; }

1emという指定が、「そのときの文字サイズ1文字分くらい」の意味です。日本語だと、全角1文字ぶんの幅を取るイメージになります。

記述する場所は、WordPress管理画面の「外観」メニューから「カスタマイズ」→「追加CSS」を開き、そこに追記するのが安全です。テーマのファイルを直接編集するよりも、トラブルを避けやすくなります。

CSSで段落のインデントを自動化するメリットは、次のようなものです。

• どの記事でも、同じルールで統一されたインデントになる
• スペース連打などによるズレを防げる
• あとでデザインを変えたくなったとき、CSSを書き換えるだけで一括で直せる

一方で、見出しやサイドバーの文章までインデントされてしまうこともあるので、どのセレクタに指定するかはよく確認しましょう。テーマごとにHTMLの構造が違うので、ブラウザの開発者ツールなどで軽くチェックしておくと安心です。

HTMLでピンポイントにインデントするやり方（WordPressでHTMLを使う場合）

「記事全体ではなく、この段落だけインデントしたい」「注意書きだけ少し右に寄せたい」というケースもよくあります。こういったピンポイントな調整には、HTMLとCSSを組み合わせる方法が向いています。

基本的な考え方は、インデントさせたい段落に専用のクラスを付けるか、その場だけstyle属性で指定するかのどちらかです。

たとえば、クラスで管理したい場合は、次のように分けて考えます。

• CSS側に、.indent { text-indent: 1em; } と書く
• 本文側では、<p class=”indent”>ここに文章</p> のように使う

一方、「この1か所だけで完結させたい」という場合は、次のようにHTMLだけで書くこともできます。

• <p style=”text-indent:1em;”>この段落だけインデント</p>

よく使うHTMLとCSSの組み合わせを、整理しておきます。

やりたいこと	HTMLの例	CSSの例
1文字ぶんのインデント	<p class=”indent”>文章</p>	.indent { text-indent: 1em; }
2文字ぶんのインデント	<p class=”indent2″>文章</p>	.indent2 { text-indent: 2em; }
注意書きだけ右に寄せる	<p class=”note”>※注意書き</p>	.note { padding-left: 1em; }

クラスにまとめておくと、あとからデザインを少し変えたいときも楽にメンテナンスできます。細かい調整が必要な部分は、こういった「インデント用のクラス」をいくつか用意しておくと、記事を書くときのストレスがかなり減ります。

2行目インデント（ぶら下げインデント）の基本

ぶら下げインデントの仕組みを理解しよう

ぶら下げインデントは見た目がシンプルなので、なんとなくCSSを書いてもそれっぽくはなります。ただ、仕組みを知っておくと、微調整がぐっと楽になるので、考え方だけ先に押さえておきましょう。

基本の動きは次の2つを組み合わせたものです。

• 段落全体を右にずらす（margin-left または padding-left）
• 1行目だけ左に戻す（text-indentをマイナス方向に指定する）

たとえば、こんなCSSを書いたとします。

• .hanging { margin-left: 1em; text-indent: -1em; }

これを、

• <p class=”hanging”>※ここに長めの注意書きが入ります。2行目以降が記号の位置でそろいます。</p>

のように使うと、1行目の先頭には「※」が来て、2行目以降はその文字の位置で行頭がそろいます。説明文が少し長くても、視線のスタート地点が同じになるので、とても読みやすくなります。

よく使うパターンを、少し整理してみます。

パターン	CSSの例	特徴
margin＋text-indent	margin-left:1em; text-indent:-1em;	全体を1em右に、1行目だけ1em左に戻す
padding＋text-indent	padding-left:1em; text-indent:-1em;	内側の余白で調整するパターン
インデント幅大きめ	margin-left:2em; text-indent:-2em;	記号＋2桁の番号など、少し幅が必要なときに使う

まずは1emで試して、見た目を確認しながら数字を少しずつ増減させていくと、自分のサイトのデザインに合った幅が見つかりやすくなります。

注意書きや脚注に2行目インデントを使う具体例

私が実務でよく使うのは、「※」や「補足」といった注意書きに2行目インデントを使うケースです。長めの説明文でも、2行目以降がきれいにそろうので、パッと見で読みやすくなります。

イメージとしては、次のような表示になります。

※この設定は、記事全体のデザインに影響する可能性があります。変更前にバックアップを取っておくと安心です。

実際には次のような場面で活躍します。

• 用語とその説明を並べるとき（例：インデント：行頭を下げること）
• 箇条書きにはしないけれど、少し読みやすくしたい長めの注意書き
• 商品ページなどで、細かい条件や補足をまとめて書きたいとき

すべての段落に使うわけではありませんが、「ここはしっかり読んでほしい」という部分で使うと、読み手の目線をうまく誘導できます。WordPressの記事編集画面でも、インデント用のクラスを1つ持っておくと、ちょっとした注意書きが一段と読みやすくなります。

シーン別に見る、WordPressインデントのおすすめ設定

小説風・読み物記事で、すべての段落を1文字下げたいとき

ストーリー仕立ての記事や、物語調のブログでは、行頭を1文字下げるだけで雰囲気がぐっと変わります。こういったタイプのコンテンツは、CSSで段落全体をインデントしてしまうのが楽です。

流れとしては、次のようなイメージです。

• 管理画面で「外観」→「カスタマイズ」→「追加CSS」を開く
• .entry-content p { text-indent: 1em; } のように記述する
• プレビューで、本文の段落だけが1文字下がっているか確認する

ポイントは、「どこまでを本文とみなすか」をテーマの構造に合わせて考えることです。pだけに指定すると、サイドバーやフッターまでインデントされてしまうことがあるので、.entry-content p のように範囲をしぼった方が安全な場面も多いです。

解説記事やハウツー記事で、注意書きや補足だけ見やすくしたいとき

解説系の記事では、「ここは注意してほしい」「ここだけは読んでほしい」という一文が、どうしても出てきます。そこを目立たせるのに向いているのが、2行目インデントを使ったぶら下げインデントです。

おすすめの手順は、次のような感じです。

• ぶら下げインデント用のクラス（例：.hanging）をCSSに登録する
• 注意書きにしたい段落にだけ、class=”hanging” を付ける
• 必要に応じて、太字や色、アイコン（※、！など）も一緒に指定する

これだけで、「注意書きらしい見た目」が簡単に作れます。文字数が多くても頭がそろうので、読み飛ばされにくくなるのも大きなメリットです。

表やリストとインデントの組み合わせ方

インデントは、単体で使うよりも、見出しや表、リストなどと組み合わせることで、より効いてきます。ここでは、よくあるシーンと、インデントの使い方の組み合わせ例をまとめます。

シーン	おすすめの組み合わせ	インデントのポイント
長文の解説記事	段落の1文字下げ＋小見出し	読み物としてのリズムを整え、読み疲れを防ぐ
注意事項が多いページ	ぶら下げインデント＋太字＋色	重要な箇所をひと目で分かるようにする
料金やサービス比較	表＋インデントなし	表の中はできるだけフラットにそろえる
用語集・FAQ	ぶら下げインデント＋見出し風テキスト	QとA、用語と説明の境目をはっきりさせる

なんでもかんでもインデントを付けるのではなく、「どこを目立たせたいか」「どこをスッキリ見せたいか」を決めてから、使う場所をしぼるのがコツです。そのうえで、HTMLとCSSで必要なところだけ調整していくと、全体のバランスが崩れにくくなります。

インデントでやりがちなNGと、WordPressでのトラブル対策

スペース連打で無理やりインデントしてしまう

一番多いのが、スペースキーや全角スペースを連打して、インデントっぽく見せてしまうやり方です。パソコンでは一見そろっているように見えても、スマホの幅やフォントサイズが変わった途端にぐちゃっと崩れることがあります。

スペース連打に頼るのが良くない理由は、次のような点です。

見た目の余白は、スペースではなくCSSとHTMLに任せた方が安定します。インデント用のクラスやstyleを一度作ってしまえば、以後はそれを呼び出すだけで、どの端末でも同じように表示されやすくなります。

テーマやスマホでレイアウトが崩れる

もう1つよくあるのが、「パソコンではきれいなのに、スマホで見ると段落の頭が変な位置に見える」というパターンです。これはCSSの指定と、テーマ側のレスポンシブ設定がぶつかっている場合が多いです。

よくあるトラブルと見直したいポイントを、表にまとめてみます。

トラブル	よくある原因	見直すポイント
スマホだけ行頭の位置がおかしい	px固定でインデントを指定している	emや%など、可変の単位に変えてみる
見出しまでインデントされてしまう	セレクタが広すぎる（pだけに指定しているなど）	.entry-content p のように、本文に絞る
表の中のテキストだけズレる	表内のpタグにもインデントのCSSが効いている	表用のクラスを分けるか、表内だけ別ルールにする

インデント幅をpxで固定してしまうと、フォントサイズや表示幅が変わったときに、思っていた位置からズレやすくなります。基本的には1emや2emを起点に考えて、必要に応じて少し広げる、という感覚で調整すると、どの端末でもバランスが取りやすくなります。

よくある質問（WordPressのインデント編）

Q1. 文章全体をインデントしたいとき、WordPressで一番かんたんなやり方は？

A. もっとも手軽なのは、ブロックエディタの余白設定を使う方法です。段落ブロックやグループブロックを選択して、右側の設定から「パディング」や「余白」の左側だけ数値を入れれば、コードを書かなくてもインデントを作れます。

ただ、記事ごとに毎回設定する必要があるので、「ブログ全体で同じインデントにしたい」という場合は、CSSで段落全体のインデントを指定してしまう方が結果的に楽です。

Q2. 2行目だけインデントを変えたいのですが、HTMLが苦手でもできますか？

A. パターンを1つ覚えてしまえば、それほど難しくありません。たとえばCSSに .hanging { margin-left:1em; text-indent:-1em; } と書き、注意書きの段落だけに <p class=”hanging”>…</p> と付ければ、ぶら下げインデントが作れます。

クラス名と数字の部分だけ自分の好みの幅に調整していけば、同じ要領でいくつかパターンを増やしていくこともできます。

Q3. HTMLのstyle属性で直接インデントを書いても大丈夫ですか？

A. まずは1か所だけ試したい、という段階であれば、style属性を使っても問題ありません。たとえば <p style=”text-indent:1em;”>この段落だけインデント</p> のように書けば、その段落だけ行頭が1文字ぶん下がります。

ただ、記事が増えてくると「どこに何を書いたか」が分かりづらくなりがちです。最終的には、インデント用のクラスを作ってCSSにまとめておき、本文側ではclass属性で呼び出す形にしておくと、管理がかなり楽になります。

まとめ｜今日からできる最初の一歩

大事なポイントを整理しておきます。

今日からできる最初の一歩としては、まず自分のサイトの「追加CSS」に、インデント用のシンプルなクラスを1つだけ登録してみてください。たとえば、.indent { text-indent:1em; } や .hanging { margin-left:1em; text-indent:-1em; } のような基本パターンです。

そのうえで、実際の記事の1〜2か所にだけ試しに適用し、パソコンとスマホの両方で見た目をチェックしてみましょう。少しずつ調整を重ねていけば、自分のサイトにぴったり合ったインデントのやり方が見つかっていきます。