Elementorで記事を更新すると、公開画面上に直接打ち込むような感覚で非常に楽ちんです。ところが、テーマによってはbackspaceで行を詰めた際に不要なタグが挿入されるという現象が発生します。挿入されるのは<span>タグで、文字サイズや行間などを再設定する感じです。

このように途中で行を詰めると、テキストエディタでソースコードを見たところ不要なタグが挿入されています。パソコン画面上では影響は少ないのですが、モバイルで見たときに文字サイズが途中で変わっていて気持ちが悪いです。

 このように、Elementorで記事を更新していると、backspaceで行を詰めたときに勝手に<span style~>が挿入されるテーマがあります。その原因の1つを突き止めましたので記録しておきます。

原因① テーマのCSSで文字サイズをem指定している

 まず、1つ目の事例ですが、テーマのCSSで文字サイズをemやrem指定しているときにおこることが分かりました。検証してみましょう。

 このように、スタイルのCSSで文字サイズをrem表示していると、backspaceで行を詰めたときspanタグが挿入されるのです。これが、Google先生などで検索してもなかなかヒットしないんですよね。この解決策を見つけるのに苦労しました。font-sizeの指定を削除しても大丈夫でしたが、文字サイズの指定をしないというのも心配ですよね。直すと下のようになりました。赤いところが改行して、行を詰めたところです。無駄なタグは挿入されていないですよね。これが1つ目の事例です。

 1つ目ということは、これでは解決できない事案もあるということです。紹介しましょう。

原因②:文字サイズを変更するスタイルが追加されている

 2つ目の事例です。このサイトでは、WordPressテーマRUMBLE(TCD058)を使っています。賢威とは違って、文字サイズをpx設定にしただけでは問題が解決しませんでした。確認すると、文字サイズを設定するスタイルが他にもありました。

 このfont-size:100%を削除するとElementorで問題と感じている現象は起こらなくなります。しかし、ここでの設定がサイト全体でどのような影響があるのか、少し検証が必要ですね。以上が、今の時点で分かっている問題発生の状況と解決策です。

[clink url=”https://n-hokkaido.com/21306.html”]