WEBページでも字下げしようか?

先日たまたま、WEBページ(しかもWordpress上)に載せた小説の字下げが出来ないという相談を受けました。

ふだんKDPのような縦書き電子書籍ベースで活動していると、やっぱり小説の体裁は出来る限り紙の本に近いものにしたいと思いますよね。

僕も、Wordpressでこのブログを始めた時は、記事の文章も字下げしたいと思っていたし、特に小説だったら、やっぱり段落の始まりは字下げしないと落ち着かないものです。

でも、Wordpressで文章を書いていると、行頭に入れたスペースは勝手に削除されてしまうのですよね。書いている時はちゃんと字下げされて見えていても、保存する時にシステム側が勝手に削除してしまいます。

その時僕はいくつかの方法を試してみたのですが、Wordpress上に元から用意されている書式設定では、字下げをすることはできませんでした。

Wordpressの書式設定ボタン
WordPressの書式設定ボタン

この中に《インデントを追加》という機能があるのですが、これは見ての通り、段落全体を右に下げるものです。
(まさに、この段落がそうです)。

はい、もう皆さんは気がついてくださいましたね。そうです。今回の記事は段落の始めにちゃんと字下げされていますよね(よね? 自信なさげに……)。

これは、Wordpressの《css編集》機能でちょっとだけ書式をカスタマイズして実現しました。どうしてこれを思いついたかって? 答えを言えば簡単です。電子書籍のフォーマットはepub。そして、epubの中には《xhtml》というファイルが格納されています。これ、WEBページを作成するHTMLを拡張したものですから、中身はほとんど一緒なのです。epubの書式もWEBページと同様にcssを用いていますので、「これを流用したら、もしかして出来ちゃうんじゃなかろうか?」と思ってやってみたら、バッチリ出来たというわけなのです。

管理画面内、こちらのメニューから開きます
管理画面内、こちらのメニューから開きます

 

《CSSスタイルエディター》内で記述するのはこれだけ
《CSSスタイルエディター》内で記述するのはこれだけ

 

そして本文は、このようにPタグを指定して、記載します。

スクリーンショット 2016-07-23 20.30.23

この方法、別にWordpressに限ったことではありません。WEBページはHTMLとcssで作るのが基本ですから(あくまでも基本ですが)、いろいろなところで使える簡単なテクニックかと思います。

ただしこの方法は、あくまでもPタグで区切る。つまり、段落を変更する必要があります。そうすると、字下げをした時には必ず空行が一行出来てしまいますので、短い文章で頻繁に字下げしたいような場合には、残念ながら向かないでしょう。

もし、ブログやご自分のWEBサイトなどで字下げをしたくなったら、試してみてはいかがでしょうか?

では、本日はこれまで!

この記事がいつか、誰かの役に立ちますように!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>