WordPressで、段落ブロックなどに入力した半角スペースを含む文字列の半角スペースが消える場合の対象方法について解説します。
問題
まず、今回の問題について説明します。
※半角スペースは「▲」で記載しています。
段落ブロックなどに、半角スペースを含む文字列を入力し、プレビューで確認すると半角スペースが消える（反映されない）
編集画面：▲▲a▲b▲c▲
プレビュー：a▲b▲c
主に文字列前後の半角スペースが消えることが多いです。
対処方法
２つあるので、どちらかで問題が解消されるか試してみて下さい。
①整形済みテキストブロックを使用する
整形済みテキストブロックを使用することで回避出来ます。
画像のように「整形済みテキスト」をクリックすることで使用できます。
下記が整形済みテキストブロックです。
整形済みテキストでは、半角スペースも正しく表示されます。
これで、半角スペースも消えなくなりますが、整形済みテキストは使用したくないって場合もあると思います。
その場合は、「②HTMLのコードを編集する」を試してみてください。
②HTMLのコードを編集する
HTML編集モードで文字実体参照として記述することで回避出来ます。
文字実体参照を詳しく知りたい方は以下の記事をご覧ください。
今回は、記事に半角スペースを含めたいので、「 」を使用します。
では、段落ブロックに半角スペースを表示する例を見ていきましょう。
まず、下記のように段落ブロックを作成し、適当な文字列を入力します。
（テストで使用する段落ブロックの背景は水色にしています。）
半角スペース 入力テスト
次に、HTML編集モードに切り替えます。
画像のように、段落ブロックを選択すると表示されるメニューからオプション（縦に黒点が３つ並んでいるボタン）をクリックします。
そこから、「HTMLとして編集」をクリックします。
下記のように表示されると、HTML編集モードに切り替わっています。
HTML編集モードで、記事を修正していきます。
今回は、文字列「半角スペース 入力テスト」の前後に半角スペースを追加します。
下記の赤字のように「 」を追記します。
<p class="has-watery-blue-background-color has-background"> 半角スペース 入力テスト </p>
追記後、段落ブロックを選択し、オプション（縦に黒点が３つ並んでいるボタン）をクリックします。
そこから、「ビジュアル編集」をクリックし、段落ブロックの見た目を元に戻しておきます。
下記のように表示されれば、ビジュアル編集モードに戻っています。
この時点で、文字列前後に半角スペースが入っています。
見やすくするためにアンダーラインを引いておきました。
プレビュー画面でも確認し、問題無ければ作業は完了です。
半角スペース 入力テスト
記事は以上です。この問題、知ってれば簡単に対策出来ますが、知らなければハマるタイプですね。
同事象で困っている方がいましたら、本記事の対処方法を試してみて下さい。
コメント