先日Wordpressのテキストエディタでブログ記事を書いている最中に何度か下書き保存してプレビューを見ていたのですが、何度目かのプレビューでいきなりある箇所から下の文字の色が勝手に変わり、フォントサイズも巨大化してしまいました。


タグの閉じ忘れというわけでもなく、ネットで検索してみるものの似たようなケースは見当たらず・・・というわけで、同じような症状に困ってる人の役に立てばと思い今回そうなった経緯と解決法をご紹介します!

スポンサーリンク



プレビューを見たらいきなり文字色が変わってフォントサイズが巨大化してた!

今回のトラブルは以下の記事を編集中に発生しました。


お客さんの命を守るため、飲食店のスタッフがすべき食物アレルギー対策4つ。

トラブル発生前の状況

トラブル発生前のコードとプレビューは以下の通り。


<コード>



<プレビュー>



特に目立っておかしなところはありませんよね。

トラブル発生時の状況

その後、黄色い枠の下の

「ただし、特定原材料でも準特定原材料でも酒類(みりん、料理酒を含む)はアレルギー表示が免除されます!

オレンジリキュールやりんご酒にもアレルギー表示はないので要注意!!!」

という箇所を「赤太文字+大文字」にしようと思い以下のコードを入力したところ、そこだけでなくそれ以降の本文すべてが「赤太文字+大文字」になってしまったのです!!


<コード>



<プレビュー①>



<プレビュー②>



本来黒文字である部分が赤太文字になっており、文字の大きさも巨大化しているのがわかります。


ちなみに元々の文字装飾により受けた影響が異なり、どうやら元々太文字にしていた部分は色は変わらずフォントサイズが大きくなっているだけのようです。


黒文字     → 赤太文字+大文字
黒太文字    → 黒太文字+大文字
赤太文字    → 赤太文字+大文字
オレンジ太文字 → オレンジ太文字+大文字


Before・Afterを見比べてみるとわかります↓


<Before>



<After>



また、ノート(黄色い枠)の中の文字は挙動がまた異なり、「黒文字 → 赤太文字+大文字」ではなく「黒文字 → 黒太文字+大文字」となっていました。


<Before>



<After>

賢威のサポートフォーラムで質問してみた

私の使っている「賢威」というWordpressテーマは購入者向けにサポートページがあるのでそこで質問してみることに。


サポート担当者の方からの回答では「装飾タグの閉じ忘れではないか?装飾タグを閉じないとその装飾が下部にも適用されてしまう」とのことでした。


が、当該部分の装飾タグは上の画像のように</span></span>できちんと閉じているので、今回の場合閉じ忘れが原因ではないはずなんです。

トラブル解決のために試してみたこと

賢威のサポートに聞いても原因がわからず、ネットで検索しても同じようなトラブルの情報は見つかりませんでした。あとは自分で色々試すしかないので実験開始。

1.当該箇所の文字装飾を外す

そもそも今回のトラブルである「赤文字+大文字が当該箇所以降すべてに適用されてしまう」というのは「赤文字+大文字」の装飾を付けたことで発生しました。


それならこの装飾の組み合わせが悪いのかも?と思い、一旦装飾を2つとも外して元の「黒文字+標準フォントサイズ」の状態に戻してみました。


<コード>



<プレビュー>



するとプレビューでも元通り、当該箇所以降が「赤文字+大文字」になる症状も出なくなりました。しかしやはりこの箇所は強調したいので何かしら文字装飾を付けたいのが本音。

2.当該箇所の文字装飾を変える

文字装飾を「赤文字のみ」にする

次に、当該箇所の文字装飾を「赤文字のみ」にしてみました。「赤文字+大文字」だとそれ以降の文字装飾に影響を及ぼしましたが、もしかしたら赤文字のみならいけるかもしれないと思って。


<コード>



<プレビュー>



う〜ん・・・「赤文字のみ」にしたら当該箇所以降がやはり赤文字になってしまいますね。大文字にはならないけど。

文字装飾を「大文字のみ」にする

ダメ元で当該箇所の文字装飾を「大文字のみ」にするのも試してみました。


<コード>



<プレビュー>



まぁ予想通りではありましたが、「大文字のみ」にしたら当該箇所以降も大文字になってしまいました。

3.当該箇所の改行を削除

以上の実験より、「当該箇所に何らかの文字装飾を付けるとそれ以降の本文全体にその文字装飾が適用されてしまう」ということがわかりました。


となると他にいじれるのは改行ぐらい。元々のコードではスペースで改行していたのでそれを削除してみました。


<コード>



<プレビュー>



改行を削除したらそれ以降の文字装飾に影響は出なくなりました!

4.当該箇所の改行をスペースではなく改行タグで行う

しかし、やはり改行は入れたいんですよね。


というわけで、改行をスペースではなく改行タグを挿入して行うことに。


<コード>



<プレビュー>



おぉ!これこれこれです!私が求めていたものは!当該箇所が「赤文字+大文字+改行あり」になっており、それ以降の文字装飾にも影響なし!


まるまる

「改行をスペースではなく改行タグの挿入で行う」ということだけで解決してしまいましたw

まとめ:文字装飾が当該箇所以降にも適用されてしまった原因と解決法

今回の場合、文字装飾が当該箇所以降にも適用された原因はスペースで改行したことでした。申し訳ありませんが、なぜそれが原因となったのかという詳しいことはわかりません。(どなたかご存じだったら教えていただけるとうれしいです!)


解決法としては以下の2つが効果的でした。


  • 改行を削除する
  • スペースではなく改行タグを入れて改行する


すべてのケースに当てはまるかどうかはわかりませんが、装飾タグの閉じ忘れがないのに当該箇所以降の文字装飾が変わってしまい困っている方は是非試してみてくださいね!