WEB制作会社として、お客様のWEBサイトを30社ほど担当しており、その8割でWordPressを利用しています。
中には熱心にコンテンツを作成しているサイトもあって、管理者の立場上、構成やレイアウトなどの相談を受けることもしばしば。
先日、「改行の度にスペースを付けていたけど、これを自動でできるようにしたい」と相談がありました。
自動というよりもCSSで簡単にできましたが、今度は「任意の場所はスペースを無くしたい」と言われ、そちらも対応しました。
今回は「投稿で一マス空ける方法と、一マス空けない方法」を解説していきます。
WordPressで、全ての段落で最初の一マスをあける（インデントする）方法
段落と改行の違いをまずは理解しよう
WordPressのビジュアルモードで更新している方が多いと思います。
1マス空ける（字下げするとも言います）前に、改行と段落の違いをまずは理解しなければなりません。
基本的に改行は単に行が変わるだけで、段落は文章の内容が変化する場合に使われます。
HTMLで表現するなら、改行は＜br＞で、段落は＜p＞ですね。
ビジュアルモードで改行する場合は「shift+Enter」で改行できますが、段落分けは普通にEnterを押すだけで実行できます。
通常の文章構成であれば、最初の一マスを空けるのは段落分けをするときだけになりますので、＜p＞で構成された段落の最初の一マスに1文字分の空白を付けるようにCSSで指定すればいいだけです。
追加CSSに1文字空ける指定をする
「外観」→「カスタマイズ」→「追加CSS」に以下のCSSを記述してみましょう。
.post p{
text-indent: 1em;
}
投稿ページの＜p＞の指定にもよりますが、この場合はpost pが投稿ページの＜p＞の指定になっているので、「投稿ページのPで指定された部分は1文字分だけインデントしますよ」という指示を出しています。
もちろん、!importantを付けても良いですけど、付けない方が綺麗ですね。何故か反映されない場合は!important宣言をしてみてください。
任意のページだけ一マス空ける場合であれば、この記述を投稿入力ページの下にある「カスタムCSS」などそのページだけに反映させる固有のCSS入力部分に上記の記述をすれば問題ありません。
テキスト入力でHTMLを使った一マス空ける方法
HTMLで一マス空ける方法として有名なのが、「 」です。
しかし、「 」は半角スペースの指定なので空けたい文字数だけ立て続けに入力するとソースが汚くなりSEOの観点からもあまり良くありません。
そもそもwordpressの投稿入力では反映されません。
そこで、登場するのがemです。
1文字だけの空白を空けたい場合は、空ける箇所にテキストモードにして以下の記述を行ってください。
<em> </em>
このemは「emphasis（注目などの意味）」の略で強調を表すタグです。間に文字を入れるとブラウザにもよりますが、斜体で表示されたりします。
このemの間にスペースを入力することによって、スペースが入力された分だけ文字が空くようになります。しかも全角でスペースすれば全角の分のスペースになるという優れもの。
もちろん、ビジュアルモードで入力してもダメなので、ちゃんと右上の「ビジュアル」→「テキスト」に切り替えて、スペースを空ける部分にこれを記述しましょう。
1文字空けるのを解除する方法（インデント・字下げを解除する方法）
任意の投稿だけ字下げを解除したいのであれば、その投稿の編集画面の下にある個別のCSSを入力する空白に以下を入力してください。
.post p {
text-indent: 0em !important;
}
インデントは０ですよという指定で、!important宣言をして最優先させています。
テーマによっては、デフォルトで字下げが設定されている場合もあると思いますので、その場合は「外観」→「カスタマイズ」→「追加CSS」に上記の記述をすればOKです。
また、「引用タグの中身だけ字下げを解除したい」という場合は、少し面倒になってしまいますが、そのページの全体の＜p＞を字下げしない指定にして、引用タグ以外の部分に＜em＞空白＜／em＞を入れれば大丈夫です。
今回は、字下げ（インデント）を指定する方法と解除する方法をご案内しました。
実はこれ、一番正しい方法かと思うのですが、 で対応している人も多く＜em＞を知っていても使われる頻度が少ないため、かなり重要な基礎知識のような気がします。
＜em＞空白＜／em＞であれば、スペースを入力した分だけ空白を作ることができるので、何か凝った文章構成にしたい場合は是非、使って頂きたい方法ですね。