Simplicity2で本文のみ段落の頭を字下げする方法

段落冒頭の字下げ(インデント)について

小説や雑誌など、特に紙に印刷されている本では、本文の段落の頭ごとに一文字字下げされるのが作法とされています。これは、「…」(三点リーダー)を使うときには二つ続けて使うこととか、「!」(エクスクラメーションマーク)のあとには全角空白を入れることといったお作法と同じレベルのものです。

一方、インターネット上でウェブのコンテンツを見てみると、有名サイトでも上記のお作法を守っているところは多くありません。ウェブの場合はパソコンやスマホでの見た目や読みやすさが優先されるのでしょうか。ただ、比較的コンテンツ重視の、小説を載せているようなサイトでは、紙の本と同じ作法を守っているところが多いように思えます。

このサイトの方針

このブログでは、曲がりなりにも小説家志望の人間が文章を書いているので、できるだけ紙の本と同じ体裁は整えてみようと思っています。最初はそれ以外にも、フォントを明朝体にしてみようかとか、縦書きにしたりしてみようとか、いろいろ試行錯誤もしてみましたが、結局、フォントや書式についてはパソコンやスマホで読みやすいものにする、という結論に落ち着きました。

Simplicity2で「本文のみ」字下げをする方法

さて、通常ブログで段落の冒頭を字下げするには、CSSで以下の記述をすれば良いです。

p {
    text-indent: 1em;
}

しかし、これだとこのブログで利用しているSimplicity2では本文のみならず見出しやブログのパーツまでが全部インデントしてしまいます。そこで、Chromeのデベロッパーツールで本文部分の要素を確認してみると、本文部分には「#the-content.entry-content」という名前が割り振られていることが分かります。そこで、以下のようにCSSを記述すると、本文のみ字下げさせることができました。

#the-content.entry-content p {
    text-indent: 1em;
}

あ、そうそう、もちろん、CSSは子テーマの方に記述しましょう。また、Windows版のChromeでは、一度キャッシュを削除してから再読み込みをしないとCSSの変更が反映されませんでしたので、念のためお伝えしておきます。