WordPressのデフォルトの設定では、Wordなどのソフトのように文頭(行頭)にスペースを入れることはできません。
この記事の内容は、WordPressで作成するWebページの文頭(行頭)を下げるための2つの方法です。
まず、編集画面(ビジュアルエディター)で、スペースキーを使って一字下げてみます。
編集画面を切り替えたり、公開や更新をおこなったりすると、公開状態ではまた元にもどってしまいます。
テキストエディターで見てみると、”p”タグが消えてしまっているのが分かります。
“p”タグを自動で削除してしまうのはWordPressの仕様なので、そこは仕方がありません。
方法1:インデントを使う
テキストエディター(HTMLコード)で、以下のとおりインデントを設定します。
<p style="padding-left: 18px;">1行目</p>
<p style="padding-left: 1em;">2行目</p>
以下のとおりインデント(字下げ)することができました。
エディターメニューからインデントを設定することもできます。
ただし、デフォルトが”40px”なので、調整する際にはテキストエディターでその部分の書き換えが必要。(以下はデフォルト)
方法2:Advanced Editor Toolsを利用する【簡単】
文頭(行頭)スペースを使って、簡単にインデント風の字下げをする方法です。
『Advanced Editor Tools』(旧:TinyMCE Advanced)の設定を使って、文頭(行頭)にスペースを挿入できるようにします。
『設定』から『Advanced Editor Tools』の設定画面を開きます。
『上級者向け設定』にある、『クラシックブロックとクラシックエディター内のパラグラフタグを保持』にチェックマークを入れます。
設定はたったこれだけです。
これで文頭(行頭)にスペースを挿入できるようになっているはずです。
編集画面にもどって確認してみます。
先ほどと同じように入力します。(以下)
この時点でテキストエディターに切り替えると、”p”タグが削除されずに残っていることが分かります。
再度ビジュアルエディターにもどって、スペースキーで字下げをしてみます。
“p”タグ間にスペースが挿入できています。
下のとおり、公開状態でもしっかり字下げできました。
※webでの表示状態(見た目)はインデントを使ったときとまったく同じです。
まとめ
- SEOを意識し、しっかりとつくりたい場合は「方法1」(インデント)。
- Word文書の編集と同じ感覚で気軽に字下げしたい場合は「方法2」(スペースで字下げ)。
サイトによって使い分けるとよいかもしれませんね。