WordPressで空白スペースや改行が消えてしまう
WordPressで文頭の空白が消えてしまう
WordPressで文書レイアウトを整えているとき、
文頭に空白スペースを入れたはずなのに、反映されていないときってたまにありますよね。
「あれれ？入れ忘れたのかな？？」となったことありませんか？
WordPressで文中の空白も消える？
あと「文中に」スペースを入れたなずなのに、
空白が消えることもあれば、消えないこともあったりしますね。
WordPressの挙動は不安定なのでしょうか？
WordPressで改行も消えてしまう！
さらに、行始めと行終わりの「改行」も、自動整形されて消えてしまいます。
マイクロソフトのWordなど、普段使っている文書作成ソフトなら当たり前のようにできることが、どうしてWordPressだとうまくいかないのでしょうか。
これらの理由と対処法を順にみていきましょう
WordPressで空白スペースが消える理由
WordPressのビジュアルモードの錯覚
WordPressのビジュアルモードで記事を書いていると、思わず文書ソフトで記事を作成しているような気になってきますね。
ですがそうではなく、あくまで裏側にあるHTMLに乗せてサイトを構築しているという状況をきっちりと理解しましょう。
ビジュアルモードで入力している文章は、裏側ではHTMLに変換されていることが理解できれば、空白スペースが自動整形される理由がわかってきます。
ホームページはHTMLが基準
ホームページは、本来はHTMLでコードを積み上げて構築していくもの。
言い方を変えると、ホームページは、WordPressでコーディングしているわけではありません。
もう少し紐解いて説明してみますね
HTMLでは空白スペースを多用する
HTMLでコードを書くときは、空白スペースを多用してレイアウトを整える慣習があります。
ただでさえ呪文のようなコードが連なるHTML。
共同開発なども多いですから、誰が見ても見間違えないように色んな配慮がなされています。
その配慮の一つに、ソースの中で空白スペースを多用して「呪文」を見易く整える慣習があるわけです。
馴染みがない方は、そのままこのページを右クリックして「ページのソースを表示」を選択して見てみてください（PCのみ）
WordPressの裏と表（HTMLとブラウザ）
ところが、HTMLを整えるために裏側で多用している空白スペース。
コーディングの配列のためには意味があっても、実際の文脈とは無関係です。
なのに、その空白が実際のブラウザ上でも反映されてしまうと大変です。
文脈とは無関係に、あちこちに無意味な空白が表示されてしまうからです。
これが、空白スペースが自動整形されて「消される」理由です。
では、あえて空白スペースを入れたい場合の対処法を見ていきましょう
WordPressで空白スペースを入れる対処法
プラグインを入れる
プラグインを入れれば簡単に解決します。
よく使われているのは「TinyMCE Advanced」。
しかし、無駄にプラグインを入れるのは、いろんな意味で好ましくないですね。
例えば、
- ワードプレス全体が重くなる
- セキュリティーが甘くなる
- ページの読み込み速度が遅くなる（➡︎検索順位に悪影響）
なので、できれば自力でスキルアップも兼ねて、以下の方法をお試しどうぞ。
「文字実態参照」を使う
ここからがこの記事の本題。
文字実態参照という仕組みを使えば、空白スペースを入れることができます。
とりあえず一旦、「スペースキーで空白を入力する」という当たり前の感覚を忘れてください。
代わりに、
HTMLのコードを記入してスペースを入れる、
という認識に頭のスイッチを入れ替えましょう。
やり方は簡単。
WordPressのテキストモードで、
と入力すれば、その箇所が半角スペースとしてブラウザが認識することになります。
「 」はHTMLのコード。
ブラウザ上で「空白を表現せよ」というコード、つまり指令です。
「 」は「non breaking space」の略。
その略語の「nbsp」を「&」と「;」で囲って表示する、という仕組みです。
その他の記述方法はこちら
- 「 」 = 半角スペース
- 「   」= 「 」よりも狭いスペース
- 「   」= 「 」よりも広いスペース
- 「   」= 「 」の２倍広いスペース
ちなみに今回の話題とは直接関係ありませんが、ビギナーだと「>」や「<」を表現するときにも、うまく表現できないことがあるはずです。
その場合、
- 「<」と入力すれば「<」を表示するコード（Less Thanの頭文字）
- 「>」なら「>」を表示するコード（Greater Thanの頭文字）
同じくいずれも「テキストモード」で記述することがポイント。
そうすれば自由自在に使いまわせます。
<pre> タグを使う
3つ目のやり方。
<pre>タグを使用して空白や改行を操作することができます。
「プレタグ」と発音します。
このタグは「pre formatted」の略語。
<pre>で囲われた箇所のテキストのレイアウトを、そのまま反映して表示することができます。
具体的には、WordPressのテキストモードで、以下のように記述すればOKです。
「<pre>で囲う」の「囲う」にピンとこない方。
- 文頭に<pre>を入れ、
- 文末は</pre>で終える
が、タグで「囲う」ことを意味しています。
WordPressでの改行の仕方
「 」または「<pre>」を使う
改行が思い通りに入いらない時の対応は以下のとおり。
一つ目の方法は、空白スペースの入れ方と全く同じ。
「 」を使っても「<pre>」を使っても同じように改行が反映されます。
<br>タグを使う
二つ目の方法。
- テキストモードで、
- 改行したい箇所で、
- 「<br>」と入力、
そうすれば、そこは改行としてHTMLが認識します。
WordPress空白や改行のまとめ
ビギナーだからこそ、プラグインを入れるよりもHTMLの記述で対応する方が後々のことを考えてもおすすめです。
理由は、少しずつコーディングの世界観が理解できてくるから。
そうすればWordPressの理解が加速度的に上がっていきます。
「ビジュアルモード」ではなく「テキストモード」で使い慣れていくこともポイントですね。
自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！
併せて読みたい