WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

文字や文章をコピペすると前後に半角スペースが入る謎?の原因、実際どうなるのか?入らないようにする方法

公開日:2021(令和3)年8月30日/最終更新日:

,
WordPressに関する情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressのブロックエディタで文中の文字や文章をコピーペーストしていて、最近気づいたペースト側の前後に半角スペースが入ってしまう現象。普段あまり文章のコピーなどしないので、全く気になっていなかったが、どうやらこれはWordPressが、とか、バージョンがという問題ではなく、コピーペースト時のOSの仕様らしいということが分かりました。

対応としては、いろいろなページでも紹介されている通り、ペースト時に右クリックして「プレーンテキストとして貼り付け」を選択するか、その機能のキーボードショートカットである「Ctrl+Shift+V」で半角スペースが前後に入ることは亡くなります。

ただ、「これってそのままにしておくとHTML上はどうなるの?」「表示はどうなるの?」というのが気になったので実際にコピペして調べてみました。

半角スペースが入った場合と入らない場合の検証

文字列の例として「あいうえおかきくけこ」として、この「あいうえお」をコピーする。

それを普通にそのまま貼り付ける(右クリック→貼り付け、またはCtrl+V)と

文字や文章をコピペすると前後に半角スペースが入る謎?の原因、実際どうなるのか?入らないようにする方法|Knowledge Base

とエディタ上では半角スペース(赤色部分)が前後に入る(便宜上画像にしてます)

これをソース表示して確認すると、

<p> あいうえおかきくけこ </p>

とHTMLソース上でもきちんと?半角スペースが入っているのが確認できました。

次に「プレーンテキストとして貼り付け」を使って貼り付けると

文字や文章をコピペすると前後に半角スペースが入る謎?の原因、実際どうなるのか?入らないようにする方法|Knowledge Base

と前後に半角スペースは入らない(便宜上画像にしてます)。こちらもソースで確認すると

<p>あいうえおかきくけこ</p>

となり、HTML上でも半角スペースがないのが確認できました。

ここまでは前述した通り、パソコン(OS)の仕様なので、半角スペースがイヤなら都度「プレーンテキストとして貼り付け」していくしかないようです。

Windowsの場合は半角スペース、Macの場合は文字コードタグが入るようです。さらに、WordPressのエディタでないもの(テキストエディタなど)からの貼り付けでは現象が起きませんからやっぱりGutenbergの問題?とも思えるものの、判然としません

この不具合については、Twitterで言及されていました。リンク先ページを見るとやはりWordPress側の問題のようです(でもググると他のアプリケーションでも出てる事例があるようでやはり判然とはしません..)


さて、ここからが不思議というか問題。

このページをプレビューして分かりやすく画像にしたのが以下。

文字や文章をコピペすると前後に半角スペースが入る謎?の原因、実際どうなるのか?入らないようにする方法|Knowledge Base

スペースが表現されているかを見やすく赤枠で囲ってみたら、HTML上では確かにスペースがある/なしなのにどちらもスペースなしになってる・・・何となく不思議な感じですね。

こちらもWordPress云々ではなく、こちらはウェブブラウザの仕様によるもので、実に2つの異なる仕組みによってこうした現象が出るようです。

ただこれも条件があって、文頭の半角スペースは無視(エスケープ)されるという仕組みになっていて、文章途中に入った半角スペースはそのまま出力も表示もされるので、文中にコピペする場合には注意が必要です。

文頭の半角スペースをそのまま表示されるようにするには?

前述したように半角スペースがエスケープ(見た目に表示されない)されるのはブラウザの仕様なのでどうしようもない?で確実に空白を入れる方法を調べたところ、半角スペースの代わりに「&nbsp;」という特殊文字を使うことでエスケープされなくなるようです。

そこで以下の検証をしてみました。

WordPressのブロックエディタで段落ブロックを追加し、普通に

あいうえおかきくけこ

と書くところを

&nbsp;あいうえおかきくけこ&nbsp;

と書けば表示上でも半角スペースが入るのか?実際やってみたのが以下(段落ブロックへ挿入)

&nbsp;あいうえおかきくけこ&nbsp;

うーーん特殊文字がそのまま表示されてしまいますね。これを回避してきちんとスペースを入れるなら、段落ブロックではなくカスタムHTMLブロック使うしかないのか?でやってみたのが以下(ちょっと分かりにくいので「&nbsp;」を3つ入れてます。

    あいうえおかきくけこ 

きちんと寄りました。あまり使う機会はないけど、見た目も半角スペース入れるならこの方法しかないようです。

QA AnalyticsQA Analytics

これが文章として検索エンジン等でどう扱われるのかは不明

こうなると、文中に半角スペースが途中に入った文章はHTML上も表示上も半角スペースが入りますし、文頭に入ってしまった半角スペースもHTML上では半角スペースが入るので、半角スペースが入ることで一連の文章としてではなく、「前の文章 単語 後ろの文章」と認識され、正確に判断されないのでは?と懸念されるところですが、こればかりは検索エンジンがどう認識するか次第なので何とも言えません。

ただやはり正確に認識してもらいたいですから、できれば半角スペースが入らないようにしておくことは大切なのかも知れませんね。