今回は、僭越ながら、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くらいなので、見つけるのが本当に大変だった。
今回、記事を書くに当たり現象を再現しようとしたのだが、できなかった。
そのため、上記例は追加されたダブルクォーテーションの位置が実際とは異なる可能性がある。
だが、半角のダブルクォーテーションの隣であったのは確かである。
原因として考えられること
原因として考えられるのは、コピペ元のコードを、コードブロックではなく、通常の段落ブロック内に直書きしていたことである。
理屈は不明だが、コードはコードブロック内に記載していたほうが安全そうである。
そのため、コピペ元の記事も、コードをコードブロック内に記載するよう、すぐに修正した。
さいごに
学ぶことが山のようにあります。。トホホ
学ぶ都度、記事に残して記事数を増やすことでこのモヤモヤを昇華するぞ！
