ブログの編集画面と実際の表示が違う原因は、裏に潜む「HTMLの呪文」？iPhoneやiPad…Apple製品のコピペに隠された謎を、AIお掃除執事の活躍とともにお届けします♪


ブログの編集画面と、実際の投稿された画面が全然違う事が度々あります。

皆様も当ブログを読んでいて、なんでここ、こんなに空いてるんだろう？
なんでここ、くっついてるの？と、疑問に思われた事があるかもしれません。

謎の空間と長い呪文（HTMLコード）

HTMLの編集画面はほとんど開かない私ですが、今回はあまりにもプレビューがおかしく
意を決して「ソース編集」を覗いてみることに…


そこで誕生したニューキャラ（AI）

その名も『クリーニングバトラー』🧹

「るるさん専属執事です！✌️✨」

説明させて頂きますと…自ら名乗ったんですよ。
私が「私の執事になって」と言ったわけではありません(///∇///)ゞ…悪しからず（笑）

めちゃめちゃ明るくて、たまに毒舌です。
「チョキ！✌️」も突然言い出して…何？可愛いんだけど…ピース？


私はブログ記事を書く際、テキストをiPhoneで書いて
画像をiPadで貼り付けて編集して、又iPhoneに戻って調整したり、何度も行ったり来たり…

かつ、テキストを一旦iPhoneのメモ帳（リッチテキスト）で推敲して、アプリ画面に貼り付けたり…

どうも、それが悪かったようです。


iPad やスマホで文字をコピペしたり編集すると、システムが裏側で「文字飾りの命令（スタイルタグ）」を付けてしまうそう。

長〜い呪文の中に「行の間隔（ine-height）を広げなさい！」とか
「文字のサイズを調整しなさい！」という命令が含まれています。

編集画面では改行しただけの行間が、プレビューすると、不自然な空白が出来ていました。

通常画面では改行しかしていないのに…
裏側のHTMLコードを見てみると「改行」や「段落」の大渋滞が起きていました。

<br/></p><p><br/></p><p><p>……なんじゃこれー！？

検索バーに残るメタデータ

なぜ？Safariの検索バーでも「呪文」が残る理由

（※ 今回はiPhoneやiPadなど、Apple製品限定のお話です。他ユーザーの皆さま、すみません…）

Safariの検索バーや、メッセージの入力欄に文字を貼り付けると
見た目は装飾が消えたシンプルな文字（プレーンテキスト）になります。


ですが、実際はiPhoneのシステム上、検索バーやメッセージに入力されたら文字は
IOSの「標準フォント（UICTFontTextStyleBody）」という高度な情報で管理されているのです。

画面上は見えなくても、裏側ではフォントの種類や文字の大きさといった「メタデータ（裏のコード）」が文字に付いたままになっています。

だから、ブログの編集画面に貼り付けると、その隠れていた情報が
一緒にブログ側へとくっ付いてきてしまうという仕組み。

その他にも、画像（<img>）の前後は、最初から1行隙間が開く仕様や
段落の（<p>）タグの前後も「余白ができる」仕様…

諸々、ブログアプリ側のシステムも複合して、やけに間延びした空間が出来てしまいました。

（※「段落（Paragraph）」の意味。文章のひとかたまり（段落）を定義するタグ。
<p>と</p>で囲まれたテキストは一つのまとまりとして扱われます。）

普通にスマホのブログアプリを使い、ベタ打ちで記事を書いていれば
こんな長〜〜い、呪文の様なコードが紛れ込むことはなかったと思います。ε-(´∀｀;)

バトラーの知恵袋

⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ 

【呪文つきの文字】（メモ帳などからコピー）

      ▼
【Geminiアプリのチャット欄に貼り付ける】
★ここでバトラーがお掃除🧹
余計なコードは消滅して「純粋な文字」に！

      ▼
【綺麗になった文字をもう一度コピーしてブログへ】
★綺麗なペーストが完了！

⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ ⋱⋰ 

私にはちんぷんかんぷんで難解なものは、Geminiにそのまま渡すと一瞬でキレイなコードに。

お掃除執事のおかげで、HTMLコードをすっきりさせる事ができました。🧹✨

---

▼ AI関連のカテゴリ作りました。




⭐︎ クリックして頂けますと嬉しいです♪

 

タグ ：

#ブログ

#HTML

#メタデータ

#AI

#ソース編集