最近、このブログのすべての記事本文の文頭(行頭)を1字下げてみた。
文頭を1字下げる(スペースを入れる)ことで、文章の視認性が良くなり、どこから読めばいいのか、今どこを読んでいるのかが、個人的感想ではあるのだが、以前よりもわかりやすくなった。
記事を書く度に手動でスペースを入れるのも面倒なので、追加CSSにより、すべての記事の文頭を自動的に下げるように設定したが、一部のアイコンボックスや吹き出しボックス内の文章にまで、字下げが適用されてしまった。
試行錯誤した結果、それらのボックスには字下げを適用せずに、記事の本文にのみ字下げを適用することができたので、この記事では、ボックス内には適用せずに、本文にのみ字下げを適用する追加CSSの設定を紹介する。
はじめに
- ブログ本文は文頭(行頭)を字下げすると読みやすくなる。
- しかし、text-indentをそのまま設定すると吹き出しや装飾ボックスまで字下げされてしまう。
- この記事では、本文だけを字下げし、それ以外では除外するCSSを紹介。
起こる問題
例えば、
.entry-content p { text-indent: 1em;}だけを設定すると、
- 本文
- 吹き出し
- アイコンボックス
- アラートボックス
- 白抜きボックス
本文以外の文章まで字下げされてしまう。
解決方法
「追加CSS」に以下を貼り付ける。
.entry-content p:not(.has-box-style) {
text-indent: 1em;
}
.is-style-information-box p,
.is-style-question-box p,
.is-style-alert-box p,
.is-style-memo-box p {
text-indent: 0;
}
.entry-content .wp-block-cocoon-blocks-icon-box p,
.entry-content .speech-balloon p,
.entry-content .speech-wrap p,
.entry-content .blank-box p,
.entry-content p.has-box-style {
text-indent: 0;
}このCSSで除外されるもの
| ブロック | 字下げ |
| 本文 | ◯ |
| 吹き出し | ✕ |
| アイコンボックス | ✕ |
| 情報ボックス | ✕ |
| アラートボックス | ✕ |
| メモボックス | ✕ |
| 白抜きボックス | ✕ |
CSSの解説
本文だけ字下げ
.entry-content p:not(.has-box-style)has-box-styleが付いていない通常の本文だけを対象にしている。
アイコンボックスを除外
.wp-block-cocoon-blocks-icon-boxCocoonのアイコンボックス全体を対象にしている。
吹き出しを除外
.speech-balloon
.speech-wrap吹き出しの文章には字下げを適用しない。
まとめ
このCSSを使うことで、
- 本文だけ読みやすく字下げ
- 吹き出しや装飾ボックス内の文章は字下げを行わずレイアウトを崩さない
という見た目にできる。
