2行目からの文字の先頭を揃えたい【WordPress】(ぶら下げインデント)

WordPress
スポンサーリンク

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

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

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

CSSの記述

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

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

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

1文字分(1em)にしてるのは、先頭に全角記号(1文字分)を使っているからです。(※値は任意)

HTMLの記述

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

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

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

スポンサーリンク

AddQuicktagを使って即座に呼び出し

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

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

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

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

1字ぶら下げ
<p class="indent">ここに文字を入力
</p>

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

そのようなときは、「ラベル名」を再入力、「チェック」も付けて、
設定を保存」をもう一度クリック。

大抵の場合はこれで設定がきちんと保存できるはずです。

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

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

タイトルとURLをコピーしました