URL(パーマリンク構造)を見直したためリンク切れの嵐です。ごめんなさい!

Elementorをchromeで更新すると勝手にspanタグが挿入される

この記事は約3分で読めます。

WordPressをElementorで更新する際、backspaceで行を詰めた際、勝手に文字サイズ等が変わる現象が起こることがあります。テキストモードでHTMLを確認すると、spanタグが挿入されています。

さらによく見ると、のようなタグも勝手に挿入されています。ちょっと嫌ですね。

ネット情報では、chromeとの相性のようですがそれだけではないような気がします・・・。そこでいろいろと条件を変えて検証したところ次のようなことがわかりました!

スポンサーリンク

ある条件のCSSを追記している場合

最終的に分かったことですが、CSSの追記である条件が重なった場合に出てくるようです。私のサイトの場合は以下の2例がわかりました。

① backgroundで色を付けるCSSを書いていた場合。

  1. body{
  2. font-family: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
  3. background:#edf3fb;←背景色のCSS これが原因①
  4. color:#171844;
  5. }

CSSのbackgroundを削除すると、<span style=”background-color: initial;”>は出てこなくなりました。

backgroundは背景色をつける命令なので使いたいこともありますよね。ただ、親テーマ・子テーマ両方でも、どちらかでもbackgroundを指定するとbackspaceで記事を詰めたときに、<span>が挿入されてしまうのです。

私は背景に画像を使っていますので、backgroundは削除しました。
背景に画像を使う場合のCSS例

{background: url(images/bg/note.gif) repeat;}

② 段落(p)の文字サイズをemで指定している場合。

  1. .main-conts p{
  2. line-height: 2.2em;
  3. font-size: 1.2em;←文字サイズのCSS これが原因②20pxに
  4. margin-bottom:0px;
  5. }

こちらのほうが影響は大ですね。backspaceをするたびに文字サイズが大きくなるのでかなりイライラします。テーマのデフォルトの文字サイズが小さいと思って、大きくした場合に起こっていたようです。これは、文字サイズをpxで指定したら解決しました。bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。どこかで指定していると、1文字分が1emなので相対的に変化していきます。わりとem(エム)を使っているテーマが多いのでこのトラブルに巻き込まれている方は多いかも知れません。chromeを使っていてそれをやめるというのもまた難しいですよね。それならCSSを書き換えたほうが楽だと思います。

▶ スポンサードリンク

CSSの修正でchromeでもスッキリ!

chrome以外のブラウザの場合、CSSを修正しなくてもうまくいきました。でも、使い慣れたブラウザというものがありますので、chromeを使う場合はCSSを修正すると解決できます。今回はbackgroundと文字サイズの件でしたが、他にも挿入されるタグがあるかもしれませんね。その場合もまずはCSSをチェックしてみてください。Elementorとの相性ではありますが一定の条件でしか起きない現象のようですので、解決されるには時間がかかるかもしれません。いかがでしょうか?

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