自分アイコンも表示！WordPressで理想のLINE対談を再現する最短ルート【初心者向け】

「LINEのやり取りをブログに載せたいけれど、自分側のアイコンも表示させて、もっと対談っぽく分かりやすくしたい！」と思ったことはありませんか？

実はAI（Gemini）を使えば、コードの知識がなくても「スクショ」と「アイコンURL」を丸投げするだけで、自分専用のカスタムチャット画面が完成します。

今回は、さらに進化した「自分アイコン表示版」を、一文字もコードを書かずに作る最短ルートを解説します！

今回の攻略ステップ

🔹 ステップ1：Geminiに渡す材料を揃える
🔹 ステップ2：Geminiに「魔法の文章」を送る
🔹 ステップ3：1回だけコピペして完了！

ステップ1：Geminiに渡す材料を揃える
ステップ2：Geminiに「魔法の文章」を送る
ステップ3：1回だけコピペして完了！
1. 🎨 圧倒的な違いをチェック！

ステップ1：Geminiに渡す材料を揃える

まずは、材料を準備してメモ帳などにコピーしておきましょう。これだけで勝負の9割は決まります！

📸 再現したいLINEのスクリーンショット
👤 相手のアイコンURL（メディアライブラリから取得）
👤 自分のアイコンURL（メディアライブラリから取得）

ステップ2：Geminiに「魔法の文章」を送る

準備した画像とURLをセットにして、Geminiに以下のプロンプトをそのままコピペして送ってください。

コピペ専用プロンプト

 添付したLINEスクショの内容を、WordPress（Cocoon）で再現したいです。

 以下のアイコンURLをあらかじめコード内に組み込んで、私がURLの書き換え作業をしなくて済む完成済みの状態で、カスタムHTML用のコードを1つだけ作成してください。
今回はLINEの仕様とは異なりますが、右側の自分の発言横にも私のアイコンを表示させてください。

 相手のアイコンURL：[ここにURLを貼る]
 自分のアイコンURL：[ここにURLを貼る]

 会話の内容や時間、既読表示、音声通話の履歴も、スクショそっくりに再現してください。背景はLINE風の青色（#7494c0）でお願いします。