文頭にスペースを入れる方法(インデント)【WordPress】

WordPress

WordPressのデフォルトの設定では、Wordなどのソフトのように文頭(行頭)にスペースを入れることはできません。

この記事の内容は、WordPressで作成するWebページの文頭(行頭)を下げるための2つの方法です。

まず、編集画面(ビジュアルエディター)で、スペースキーを使って一字下げてみます。

編集画面を切り替えたり、公開や更新をおこなったりすると、公開状態ではまた元にもどってしまいます。

テキストエディターで見てみると、”p”タグが消えてしまっているのが分かります。

“p”タグを自動で削除してしまうのはWordPressの仕様なので、そこは仕方がありません。

方法1:インデントを使う

テキストエディター(HTMLコード)で、以下のとおりインデントを設定します。

<p style="padding-left: 18px;">1行目</p>
<p style="padding-left: 1em;">2行目</p>
“18px”は「18pxのフォントサイズ分」、”1em”は「1文字分」を表します。
どちらを使っても構わないと思います。
(※”em”を使うと、サイト全体のフォントサイズを変更する際に、影響を受けません。)

以下のとおりインデント(字下げ)することができました。

エディターメニューからインデントを設定することもできます。

ただし、デフォルトが”40px”なので、調整する際にはテキストエディターでその部分は書き換えが必要。(以下はデフォルト)

方法2:TinyMCE Advancedを利用する【簡単】

文頭(行頭)スペースを使って、簡単にインデント風の字下げをする方法です。

『TinyMCE Advanced』の設定を使って、文頭(行頭)にスペースを挿入できるようにします。

『設定』から『TinyMCE Advanced』の設定画面を開きます。

『上級者向け設定』にある、『クラシックブロックとクラシックエディター内のパラグラフタグを保持』にチェックマークを入れます。

設定はたったこれだけです。

これで文頭(行頭)にスペースを挿入できるようになっているはずです。

編集画面にもどって確認してみます。

先ほどと同じように入力します。(以下)

この時点でテキストエディターに切り替えると、”p”タグが削除されずに残っていることが分かります。

再度ビジュアルエディターにもどって、スペースキーで字下げをしてみます。

“p”タグ間にスペースが挿入できています。

下のとおり、公開状態でもしっかり字下げできました。

※webでの表示状態(見た目)はインデントを使ったときとまったく同じです。

TinyMCE Advancedの設定画面に説明書きがあるとおり、予想外の不具合が発生する可能性があります。
インデントよりも簡単な方法ですが、常用する前に表示状態等の挙動をしっかり確認しておくことが必要です。

まとめ

SEOを意識し、しっかりとつくりたいなら「方法1」(インデント)。

気軽に字下げしたい場合は「方法2」(スペースで字下げ)。

タイトルとURLをコピーしました