「２行目からは右にずれてほしい」という切なる願い
センター試験のリスニングなど、会話文のスクリプトを打ち込んでいると、こんな状態になることがよくあります。
Ｗ : 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行目以降は、Ｗ : の真下ではなく、右にずれて”There’s”の下に来てほしいです。
早い話が、こうしたいということです。
Ｗ : 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)、という命令です。
今回は「Ｗ : 」の2文字分の空間を取りたいので「2em」という指定をしていますが、任意の数字を入れることができるので、空間を取りたい分だけの数値を指定しましょう（小数点以下の指定も可能です）。
あとは、この命令を与えたい文章に、以下の記述を付け足します。
テキストエディタで記述すること(HTML)
<p class=”indent”>本文</p>
上のように、本文の始めの<p>の中に「class=”indent”」という記述を付け足してやると、その段落のみ2行目から右にずれる、いわゆる「ぶら下がり」の状態にさせることができます。
「indent」という文字は、CSSに記入した文字を参照するためのものですので、自分がわかれば任意の文字でかまいません。
CSSの最初の部分「.indent」を「.abc」とすれば、HTMLの記述は「class=”abc”」となるわけですね。
「ぶら下げインデント」の設定の仕方は以上です。
コメント