WordPressテーマSANGOの質問

インライン(span)装飾の周囲に空白ができる

アバター
鈴木友紀

いつも大変お世話になっております。

今回お聞きしたいのは、パソコンで自分のサイトを見た際に、

・ラインマーカーで線を引いたところ
・文字の色を変えたところ
・太文字にしたところ

これらの後ろの部分に「数文字分の空白」ができてしまう原因です。

スマートフォンで見ると、そのようなことはありません。
プラグインを全て停止しましたが変わりませんでした。

初心者なので詳しいことがわかっておらず、とても初歩的なミスだったら申し訳ありませんが、教えていただけると幸いです。

SANGO
質問板アーカイブ
コメントへの回答
サルワカくん
サルワカくん
2019/10/07

お世話になっております。
可能性として考えられるのは
①ブラウザのバグ(古いブラウザを使っている場合もこのような問題が生じるかもしれません)
②ブラウザの拡張機能の影響(アドブロックなどはすべて停止したうえでご確認ください)
③「spanタグ」と「周辺の文字」の間にスペースや改行があること
などでしょうか。

可能であれば、
・問題が生じているウェブページのURL(コメントのウェブサイト欄に入力すれば公開されません)
・問題が生じる環境(例:Windows、Chrome使用、など)
・Gutenbergエディター、クラシックエディターどちらを使用しているか
を教えていただけますか?

①②についてはご自身で確認してみると良いと思います。
③についてご自身で検証される場合、以下の手順を踏むと良いと思います。
(1)プラグインをすべて停止
(2)エディターでHTMLを表示し、スペースができてしまう部分の周辺に改行があるかを確認
(たとえばテキスト<span class="~">テキスト</span> テキストとなっている場合、spanの閉じタグの後ろに半角スペースができてしまっており、これが空白の原因です)
(3)投稿を新規作成し、てきとうな文章に太字などの装飾を行い、HTMLを開いたときに、空白が挿し込まれているかどうかを確認
特に空白や改行が見当たらない場合、
HTMLの出力時に空白が挿し込まれてしまっている、
もしくはいずれかのプラグインがエディター執筆時に悪さをしている
可能性があります。
よろしくお願いします。