HTMLコードを段落ブロックのテキスト内からコピペするとなぜか全角のダブルクォーテーションが自動的に追加され、コードが機能しないことがあるので注意

ブログ育成
記事内に広告が含まれています。

今回は、僭越ながら、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くらいなので、見つけるのが本当に大変だった。

今回、記事を書くに当たり現象を再現しようとしたのだが、できなかった。

そのため、上記例は追加されたダブルクォーテーションの位置が実際とは異なる可能性がある。

だが、半角のダブルクォーテーションの隣であったのは確かである。

原因として考えられること


原因として考えられるのは、コピペ元のコードを、コードブロックではなく、通常の段落ブロック内に直書きしていたことである。

理屈は不明だが、コードはコードブロック内に記載していたほうが安全そうである。

そのため、コピペ元の記事も、コードをコードブロック内に記載するよう、すぐに修正した。

さいごに


もものすけ
もものすけ

学ぶことが山のようにあります。。トホホ



学ぶ都度、記事に残して記事数を増やすことでこのモヤモヤを昇華するぞ!