【WordPress】 記事にspanタグが勝手に挿入される問題

先日作成したサイトで散々苦しめられたWordPressの自動整形について、現在テストサイトを立ち上げていろいろと検証しています。
がしかし、ちょっと厄介な状況になっています。

それはブラウザによって自動整形や表示の挙動が変わる場合があるというものです。

今回はその内の一つ「spanタグが勝手に挿入される」という問題についてです。

スポンサーリンク

どんな問題?

普段使いのブラウザであるFirefoxには広告カットなどのプラグインを導入しているため、WordPressの作業はほぼ素状態のChromeを使っています。

このChromeで記事を作成していると勝手にspanタグが挿入されていることがあり、出来上がったページを最後に全てチェックして手作業で削除していました。
非常に手間のかかる作業です。

なお、この問題の発生環境は、
・windows7(64bit)
・WordPress 3.7.1–ja
・Chrime バージョン 31.0.1650.63 m
です。

まずノーブレークスペース「 」について

ビジュアルモードでの記事作成の際に改行「Enter」を二回連続で行うと、ノーブレークスペース「 」が挿入されます。ノーブレークスペースとは半角空白の特殊文字でこの空白の前後では改行しないという機能を持っています。これを2つの単語間におくことで1つの単語として扱われ、行からはみ出した場合は2つセットで次の行に移動します。
人名や企業名など途中で分割すると失礼に当たる場合に使用します。
これが本来の使い方です。

ただしWordPressでは大きな改行を作るためにこのノーブレークスペースが利用されています。

automatic_formatting_11b

automatic_formatting_12b

この記事を公開すると以下のように表示されます。

automatic_formatting_13b

このソースを確認してみましょう。

automatic_formatting_14b

3つのpタグに囲まれています。
pタグで分割するだけでもスペースを空けた改行が出来ますが、pタグで囲んだノーブレークスペースを追加することでより大きなスペースを作ることができます。

なおこのノーブレークスペースを使わずにShift+Enterを繰り返して大きな改行を作ってもWordPressの自動整形で消されてしまいます。

automatic_formatting_15b

エディタモードを切り替えているうちに自動整形され、1回の改行に置き換わってしまいます。

automatic_formatting_16b

このためスペースにゆとりのあるレイアウトにしようとするとノーブレークスペース「 」を多用することになります。

何をすると起こるのか

ようやく本題ですが、このノーブレークスペース「 」を削除するとどうなるでしょうか?

ビジュアルモードで削除してみましょう。

automatic_formatting_19b

automatic_formatting_20b

なぜか下の段落から1行浮き上がり、スペースの空いた改行が2つに増えてしまいました。
これもこれで問題なのですが、テキストモードで見てみると・・・

automatic_formatting_21b

なぜかspanタグが挿入され、ラインの高さとフォントサイズが指定されています。
このためにstyle.cssでフォント条件を指定してもこの箇所だけ反映されない不具合が発生します。

段落間のスペースの調整を繰り返すとこの不具合が多発します。
レイアウトを調整するたびにspanタグが挿入されていないかを確認しなくてはならず、非常に厄介な問題です。

なおこの現象はFirefoxでは発生しませんでした。

どんな感じになるの?

今回の記事ですが、不用意に改行→削除を繰り返すとこんな感じになります。

automatic_formatting_22c

色のつけている範囲が勝手に追加された余計なタグです。
自動整形の影響でしょうか、中にはstrongタグに統合されているものもありますね。

これを一つ一つ手作業で消していくわけです。
うんざりです。

原因と対策は?

使っているPC特有の問題かと考えてネットブック(Vista+Chrome)でも試しましたが、やはり同じ結果でした。

原因はWordPressとChromeの組み合わせで発生するバグと考えられますが、他の方でも発生しているという報告は見つかりません。
残念ながら原因ははっきりとしません。

現状、作業ブラウザを変更するしか対策が見つかりません。
ヒジョーに弱りました。

実はChomeはもうひとつ厄介な問題を抱えています。
この件は次の記事で書きたいと思います。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA