HTMLコードを段落ブロックでコピペすると、全角クォーテーションが追加されることがあるため、コードブロックからコピペする方が安心である。
HTMLコードを段落ブロックのテキスト内からコピペした際に、なぜか全角のダブルクォーテーションが自動的に追加され、コードが機能しないことがあった。
自分の記事内に書いたHTMLコードを別記事にコピペした【WordPress操作】
もものすけはHTMLコードの仕組みに全く！詳しくないのだが、ブログの細かい部分の見た目を自分好みに調整出来て便利なので、様々なサイトを参考に使用させて頂いている。
例えば、別記事「Amazonアソシエイトリンクを4つきれいに並べる方法を試行錯誤した話」では、AmazonアソシエイトリンクやGoogleマップといった画像をセンタリングするコードについてご紹介した。
新しい記事で
センタリングしたい
画像があるから
自分の記事から
コードをコピペしよっ♪
センタリングが効いていない【HTML表示崩れ】
作成したコードはこちらである。
<div style="text-align:center">
</div>
プレビューして確認したところ、なぜか画像のセンタリングが効いておらず、左寄せになってしまっていた。
コピペしたHTMLコードに全角クォーテーションが追加されていた【不具合の原因】
画像の表示は問題ない
機能していないのは
センタリングのコードだけ・・
コードをよく見てみよう！
その結果、下記のように、コピペしたHTMLコードに全角のダブルクォーテーションが余分に追加されていた。
（※イメージです※）
<div style="”text-align:center”">
</div>
実際はカスタムHTMLブロック内に記載しているコードから見つけ出した。
フォントサイズが上記の1/10くらいなので、見つけるのが本当に大変だった。
今回、記事を書くに当たり現象を再現しようとしたのだが、なぜかできなかった。
だが、勝手に追加されたダブルクォーテーションは、もともと存在した半角のダブルクォーテーションの隣だったのは確かである。
原因として考えられること【段落ブロック vs コードブロック】
原因として考えられるのは、コピペ元記事ではコードを、コードブロックではなく、通常の段落ブロック内に直書きしていたことである。
理屈は不明だが、コードはコードブロック内に記載していたほうが安全そうである。
そのため、コピペ元の記事をすぐに修正した。
さいごに【初心者向けの対策まとめ】
学ぶことが山のようにあります・・
トホホ
学ぶ都度、記事にして記事数を増やしてモヤモヤを昇華するぞ！
