WordPressで文章が崩れる謎～見えないコードの話～
お客様とのやりとりの中で、「なるほどなぁ」と思う瞬間がよくあります。今回は、WordPressで文章を編集している時によく起こる「不思議な現象」についてのお話です。
専門的になりすぎないよう、できるだけ分かりやすく説明してみたいと思います。
よくあるこんな困りごと
お客様から、こんなご相談をいただくことがあります。
「WordPressで文章を書いていたんですが、途中で太字にしたり、色を変えたりしているうちに、なんだか文字の表示がおかしくなってしまって…」
「ただ改行したいだけなのに、行間が空きすぎて段落みたいになってしまうんです」
「文字を追加したり削除したりしていたら、変なところで改行されたり、装飾がずれたりして困っています」
こういうこと、経験ありませんか？
実は見えないコードが原因
この現象、実はウェブサイト特有のものなんです。原因は「見えないコード」にあります。
文字の裏側に隠れているもの
私たちが画面で見ている文字は、実は単なる文字だけではありません。その裏側に「この文字は太字にする」「この部分は赤色にする」「ここで改行する」といった指示を書いたコードが隠れているんです。
例えば、画面上では「こんにちは」と普通に見えていても、裏側では「<span style=”font-weight:bold;”>こんにちは</span>」みたいなコードになっています。（これは簡略化した例ですが）
編集中に何が起こっているか
文章を書いている時、私たちは普通に文字を見て編集していますよね。でも、その裏側では見えないコードも一緒に動いています。
文字を追加したり、削除したり、装飾を変えたりしていると、この見えないコードが複雑に絡み合ってしまうことがあるんです。
料理に例えると分かりやすいかも
ちょっと料理で例えてみます。
文章を書くのは、材料を並べること。装飾を施すのは、調味料をかけることだと思ってください。
最初にきれいに材料を並べて、その後で調味料をかければうまくいきます。でも、途中で材料を足したり、順番を入れ替えたり、調味料をかけたり外したりを繰り返すと、どこに何がかかっているのか分からなくなってしまいますよね。
WordPressでも同じようなことが起こっているんです。
なぜこんなことが起こるの？
コードの範囲がずれてしまう
装飾のコードには「ここからここまで」という範囲があります。文字を追加したり削除したりすると、この範囲が意図しない形でずれてしまうことがあります。
例えば、「こんにちは」という文字全体を太字にしていたとします。その「こ」と「ん」の間に新しい文字を入れたら、コードが混乱して変な表示になってしまう、ということが起こるんです。
改行コードが増殖する
改行にも実は種類があって、「段落の改行」と「ただの改行」があります。Enterキーだけ押すと段落の改行、Shift+Enterだと単純な改行になります。
編集を繰り返しているうちに、この改行コードが意図せず増えてしまったり、間違った種類の改行が入ってしまったりすることがあります。だから、ただ改行したいだけなのに、変に行間が空いてしまうんです。
解決方法は「リセット」
こういう状態になってしまった時、一番確実な解決方法があります。
一度クリーンにする
おかしくなってしまった部分の文字をいったん全部削除して、装飾も全部取り払います。つまり、まっさらな状態に戻すんです。
その後、改めて文字をきちんと入力し直して、最後に装飾を施す。この順番でやれば、コードもきれいに整理されて、表示も正常に戻ります。
具体的な手順
- おかしくなっている部分の文字を選択して削除
- その部分に、装飾なしで文字を入力
- 改行も必要なところだけ、きちんと入れる
- 最後に、太字や色などの装飾を施す
この順番を守るだけで、かなりの問題が解決します。
予防するためのコツ
最初から順番を意識する
文章を書く時は、まず文字だけをしっかり入力してから、後で装飾する。この順番を守ると、コードが混乱しにくくなります。
こまめに保存して確認
編集途中でも、こまめに保存してプレビューで確認する習慣をつけると、おかしくなった時にすぐ気づけます。
あまり複雑な装飾は避ける
色を変えて、太字にして、さらに背景色もつけて…と装飾が複雑になるほど、コードも複雑になります。シンプルな装飾を心がけると、トラブルも減ります。
ウェブの世界はコードでできている
今回のお話で伝えたかったのは、「ウェブサイトの文字は、見た目だけじゃなくて、裏側にコードがある」ということです。
普段は意識しなくても問題ありませんが、こういうトラブルが起きた時は、「ああ、裏側でコードが絡まってるんだな」と思い出してください。そうすれば、「一度リセットしてやり直そう」という解決法にたどり着けます。
困った時は色々頑張るよりも「リセット」
試行錯誤をするのが必要な場合もありますが、ごちゃごちゃになっている場合は一度スタートに戻ってみることも大事です。
ウェブの世界って、こういう見えない仕組みがたくさんあるんですね。知っておくと、トラブルの時に慌てずに済みます。
もし「どうしても直らない！」という時は、遠慮なくご相談ください。裏側のコードを直接見て、きれいに整理させていただきます。
見えないコードと仲良く付き合っていきましょう (^^)
