スポンサードリンク

【WordPress】2行目から右に1文字分ずらしたい!「ぶら下げインデント」を設定する方法(備忘録)

「2行目からは右にずれてほしい」という切なる願い

センター試験のリスニングなど、会話文のスクリプトを打ち込んでいると、こんな状態になることがよくあります。

W :There’s a convenience store straight ahead at the second light. Ah sorry, they don’t have a fax machine. But the one a block further up does.

※英文の内容はどうでもいいです。

どうですか?気になりますよね?

2行目以降は、W :の真下ではなく、右にずれて”There’s”の下に来てほしいです。

早い話が、こうしたいということです。

W :There’s a convenience store straight ahead at the second light. Ah sorry, they don’t have a fax machine. But the one a block further up does.

↑ちゃんと空いていますね。

Wordではインデント指定は簡単なのに、WordPressではどうやるのかわからなくて、いろいろ調べるのにかなり時間を使い、先日ようやく分かったので、備忘録としてここに書き留めておきます。

スタイルシートに記述すること(CSS)

/*ぶら下げインデント*/
.indent {
  margin-left: 2em;
  text-indent: -2em;
}

上記を子テーマのスタイルシートの空いているところに記述します。

書かれている内容は、段落全体で右側に2文字移動し(margin-left: 2em)、1行目のみ左に2文字分移動しなさい(text-indent: -2em)、という命令です。

今回は「W :」の2文字分の空間を取りたいので「2em」という指定をしていますが、任意の数字を入れることができるので、空間を取りたい分だけの数値を指定しましょう(小数点以下の指定も可能です)。

あとは、この命令を与えたい文章に、以下の記述を付け足します。

テキストエディタで記述すること(HTML)

<p class=”indent”>本文</p>

上のように、本文の始めの<p>の中に「class=”indent”」という記述を付け足してやると、その段落のみ2行目から右にずれる、いわゆる「ぶら下がり」の状態にさせることができます。

「indent」という文字は、CSSに記入した文字を参照するためのものですので、自分がわかれば任意の文字でかまいません。

CSSの最初の部分「.indent」を「.abc」とすれば、HTMLの記述は「class=”abc”」となるわけですね。

「ぶら下げインデント」の設定の仕方は以上です。

コメント

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