ブログにLINEのやり取りを載せたいけれど、アイコンを自作のイラストに変えたいと思ったことはありませんか？
でも「コードをいじるなんて絶対ムリ！」と諦めている方へ。実は、AI（Gemini）に「相手のアイコンURL」と「スクショ」をセットで丸投げするだけで解決します。
今回は、一文字もコードを書き換えることなく、WordPressに理想のチャット画面を表示させる最短ルートを解説します。
ステップ1：Geminiに渡す材料を揃える
まずは、Geminiに丸投げするための材料を準備します。URLはiPhoneのメモ帳などにコピーしておきましょう。
- ✅ 再現したいLINEのスクリーンショット（写真アプリにあればOK！）
- ✅ 相手のアイコンURL（WordPressのメディアからコピー）
Geminiへ画像をアップロードして指示を送ります。
ステップ2：Geminiに魔法の文章を送る
画像をアップしたら、下のボックス内の文章をそのままコピーして貼り付けて送ってください。
▼ そのままコピーしてURLだけ書き換えてね
添付したLINEスクショの内容を、WordPress（Cocoon）で再現したいです。
以下のアイコンURLをあらかじめコード内に組み込んで、私がURLの書き換え作業をしなくて済む完成済みの状態で、カスタムHTML用のコードを1つだけ作成してください。
相手のアイコンURL：[ここにURLを貼る]
会話の内容や時間、既読表示、音声通話の履歴も、スクショそっくりに再現してください。背景はLINE風の青色（#7494c0）でお願いします。
以下のアイコンURLをあらかじめコード内に組み込んで、私がURLの書き換え作業をしなくて済む完成済みの状態で、カスタムHTML用のコードを1つだけ作成してください。
相手のアイコンURL：[ここにURLを貼る]
会話の内容や時間、既読表示、音声通話の履歴も、スクショそっくりに再現してください。背景はLINE風の青色（#7494c0）でお願いします。
送ると、GeminiがURLも会話もすべて埋め込まれたコードを回答してくれます。
ステップ3：1回だけコピペして完了！
Geminiが作ったコードの右上にあるコピーボタンを押したら、WordPressの編集画面へ戻ります。
「＋」ボタンからカスタムHTMLブロックを追加し、そこに貼り付けるだけ！
これだけで、URLの書き換え作業すら一切なしで、自作アイコンが並ぶ理想のチャット画面が完成します。
✨ この方法のメリット
- コードの中を一行も触らなくていいから、ミスが起きない
- スマホのスクショを加工するより文字がクッキリ綺麗に見える
- 間違えてもAIに「直して」と言えば新しい完成品がすぐもらえる
⚠️ アイコン表示に関するご注意
このプロンプトは、実際のLINEを忠実に再現するため、仕様上自分側のアイコンは表示されません。
「自分側のアイコンも表示させて、対談形式にしたい！」という方はこちら
コードが書けないのは、もう諦める理由にはなりません。
Geminiを最強のパートナーにして、ブログをもっと自由に楽しみましょう！
コメント