【はてなブログ】見たまま編集でドラッグ＆ドロップをすると、文字フォントが勝手に変わる！

はてなブログの見たまま編集は要注意

パソコンから自分のはてなブログ記事を読んでいたら、なぜか本文の一部の文字だけフォントが変わっていることに気が付きました！

どうやらパソコンから見たまま編集をした時に、ドラッグ＆ドロップで文書を移動したのが原因のようです。

今回は、はてなブログ記事の一部のフォントが勝手に変わってしまった原因と解決策を考えました！

はてなブログに投稿した自分の記事の中に、なぜか一部だけフォントが違う箇所を発見しました！　自分でフォントを変更した覚えはありません。

フォントが違って見えるのは、パソコンから見た時だけで、スマートフォン（iPhone）から見た時は、フォントは全て同じに見えました。

普段私はパソコンから記事を投稿するものの、投稿後はスマホから記事の確認をすることが多いので、フォントが変わっていたことに気付くのが遅れました……。

これは大事件です！　フォントが変になっている記事が他にもあるかもしれません。アクセスしてくれる人の多くはスマホからですが、パソコンから見た時にフォントが不揃いだとおかしいです。

勝手にフォントが変わってしまう原因が何か突き止めました！

はてなブログの記事編集画面でドラッグ＆ドロップをするとフォントが変更される

フォントが勝手に変わっていた原因は、パソコンから見たままモード編集で記事を書く時に、「ドラッグ＆ドロップ」をしていたからでした！

※「ドラッグ＆ドロップ」とは、移動させたい文書を選択し、左ボタンを押したまま目的の場所まで移動させ、左ボタンを離すパソコンの操作（私には聞きなれないワードでした）

私は普段から、見たままモード編集画面で、入力した文書を「切り取り＆貼り付け」たり、「ドラッグ＆ドロップ」をして、文書を移動させて記事を編集していました。

どうやら、はてなブログの見たままモード編集で「ドラッグ＆ドロップ」をすると、移動した文書のフォントなど（サイズや色も？）が変更されるようです。

「ドラッグ＆ドロップ」した時に一体何が起きているのか、検証してみました！

はてなブログの見たまま編集画面で文書をドラッグアンドドロップで移動させてみる

パソコンから、はてなブログの見たまま編集モードで「ドラッグ＆ドロップ」の検証をします。

▼下の行「おやすみなさい」を一番上に、ドラッグ＆ドロップの方法で移動させてみました。

はてなブログの見たまま編集モードで文章をマウスでドラッグ＆ドロップ移動する

一見、問題なく文書を移動出来たように見えますが、HTML編集画面を見ると、大変なことになっていました……！

はてなブログの見たまま編集モードで文字を移動後にHTML編集を確認する

HTML編集から文書を確認すると、見たまま編集でドラッグ＆ドロップした「おやすみなさい」の前後に変な文字が大量発生していました！

初心者の私から見ても、明らかにおかしいです。

はてなブログの見たまま編集モードでドラッグ＆ドロップ移動したときのプレビュー

プレビューを確認すると、見たまま編集でドラッグ＆ドロップした「おやすみなさい」のフォントが変わっていました！

はてなブログ記事の一部のフォントが勝手に変わっていた理由は、見たまま編集時のドラッグ＆ドロップだったことが判明しました。

もし見たまま編集画面でドラッグ＆ドロップをやってしまったかもしれない時は、記事を投稿する前には、パソコンからプレビューを確認すれば、フォントの変化に気が付けます。

ただし、パソコンで編集した記事（下書き）を、スマホからプレビューで確認する時は要注意です！

下記のように、スマホのどこからはてなブログを確認するかによって、フォントの変化に気付けない場合があります。

スマホ用のはてなブログ：編集画面のフォントが変わっている
スマホのPC版はてなブログ（デスクトップ用サイト）：編集画面とプレビュー画面のどちらもフォントが変わっていない
スマホアプリ（はてなブログ）：編集画面とプレビュー画面のどちらも、文字サイズが変わっていた（フォントの変化は分かりにくい）。パソコンでドラッグ＆ドロップした文字のサイズが、編集画面だと他より小さくなり、プレビューだと他より大きくなっていた