【WordPress】２行目からの文の先頭を揃えたい（ぶら下げインデント）

文頭に、リスト記号ではなく普通の記号などを使った場合、通常は２行め以降の文字の先頭は揃いません。（記号も文字として認識されるため。）

ワードなどのソフトなら、ルーラー上のインデントマーカー（ぶら下げインデント）を使えば、２行め以降の文字も簡単に揃えられますが、WordPressでは使えません。

ネットで調べてみたところ、CSSとHTMLを使ってぶら下げインデントと同様の表示状態をつくる方法があったので、それをメモとして残すことにしました。

INDEX

CSSの記述

スタイルシート(style.css)に以下のコードを記述します。

「外観」＞「テーマエディター」＞「スタイルシート(style.css)」

/*ぶら下げインデント*/
.indent{
margin-left: 1em; /*全体を１文字分右へ*/
text-indent: -1em; /*１行めだけ１文字分左へ*/
}

上の例では先頭に全角記号（１文字分）を使っているので、「1em」に設定しています。
（※値は任意）

投稿の編集画面（テキストエディター）で、以下のタグを入力します。

<p class="indent">ここに文字を入力</p>

あとは、「ここに文字を入力」の部分を任意で書き換えれば、ぶら下げインデントが適用された文が完成します。

cssに今回記述したインデントを使用する機会が多い場合は、「AddQuicktag」というWordPressプラグインで、タグを登録しておきます。

「プラグイン」＞「新規追加」＞「プラグインの検索」

「有効化」できたら、「設定」から「AddQuicktag」の管理画面を開きます。

「ボタン名」には自分でわかりやすい名前、「開始タグ」と「終了タグ」もそれぞれ入力し、最後に右端にチェックを付けて、「変更を保存」をクリックします。

１字ぶら下げ

<p class="indent">ここに文字を入力

</p>

「AddQuicktag」では、設定の保存が一度で反映されない場合があります。
（下の場合は、「ラベル名」と「チェック」が反映されていない状態。）

そのようなときは、「ラベル名」を再入力、「チェック」も付けて、「設定を保存」をもう一度クリック。たいていの場合はこれで設定がきちんと保存できるはずです。

あとは、投稿の編集画面（クラシックエディタの場合）を開き、「ビジュアルエディタ」にしておきます。

ツールバーに「Quicktags」という項目が追加されているはずなので、そこから先ほど設定した「１字ぶら下げ」を選択すると、タグを呼び出してくれます。（おわり）