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