Archives

「もうスクショは卒業！Geminiと作る『LINE風チャット画面』再現ガイド【WordPress初心者・主婦向け】」

manaoの素材箱
Screenshot

AIにおまかせ！LINE風画面の作り方

「スマホのスクショをそのまま載せると文字がボヤける…」「会話を打ち直すのが面倒！」
そんな悩みは、Gemini（AI）に丸投げしちゃいましょう♪

元のスクショ1.元のスクショを用意
完成後の画面2.AIがコード化して完成！

STEP 1 下のコードをコピーしてください

<style>
  .line-container { background-color: #7494c0; padding: 20px; border-radius: 10px; }
  .line-talk { display: flex; flex-direction: column; gap: 15px; }
  .chat-box { display: flex; align-items: flex-start; }
  .chat-box.left { flex-direction: row; }
  .chat-box.right { flex-direction: row-reverse; }
  .icon img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #ddd; }
  .chat-content { max-width: 70%; margin: 0 10px; }
  .bubble { padding: 8px 12px; border-radius: 15px; font-size: 14px; line-height: 1.4; position: relative; word-wrap: break-word; }
  .left .bubble { background-color: #ffffff; color: #000; border-top-left-radius: 2px; }
  .right .bubble { background-color: #85e249; color: #000; border-top-right-radius: 2px; }
  .meta { display: flex; flex-direction: column; justify-content: flex-end; font-size: 10px; color: #fff; margin: 0 5px; min-width: 45px; }
  .right .meta { align-items: flex-end; }
</style>

<div class="line-container">
  <div class="line-talk">
    <!-- ここにGeminiがメッセージを生成します -->
  </div>
</div>

STEP 2 Geminiにこう伝えてね！

「このコードをベースにして、添付したスクショの内容を再現して！アイコンは自分のURL（〇〇）と相手のURL（△△）を使ってね」

あとは、Geminiが出してくれたコードをWordPressの「カスタムHTML」に貼るだけで、可愛いLINE画面が完成です✨

知っておくと便利！アイコン準備のコツ

アイコンもAIで作っちゃおう！

「自分や相手のアイコン画像がない…」という時もAIにおまかせ！Geminiなどの画像生成AIにこう頼んでみてください♪

「LINEのアイコンに使いたいので、丸く切り抜いても可愛い、ゆるふわな女の子（または動物など）のイラストを描いて！」

❤ 1回でうまくいかなくても大丈夫。「もっとピンクっぽく」「もう少し大人っぽく」と何度か壁打ち（やり取り）すれば、お気に入りの1枚が出来上がります✨

画像URLはどこにあるの？

WordPressにアップロードした画像のURLをコピーする方法です。

  • 1. WordPress管理画面の「メディア」→「ライブラリ」を開く
  • 2. 使いたいアイコン画像をクリック！
  • 3. 右側に出てくる詳細画面の「ファイルのURLをクリップボードにコピー」ボタンを押す
コピーした https://～ から始まる長いURLを、Geminiに渡すプロンプトに貼り付けてくださいね。

お気に入りのアイコンで、素敵なチャット画面を作ってみてくださいね✨

ご利用規約（免責事項）

  • 本素材（コード）は、個人・商用を問わず無料でご利用いただけます。
  • 著作権は放棄しておりません。コードの再配布、販売、自作発言はご遠慮ください。
  • 動作確認はしておりますが、お使いの環境によりデザインが崩れる場合があります。本素材の使用によって生じたトラブルや不具合について、当ブログは一切の責任を負いかねます。
  • 個別のカスタマイズ方法や不具合に関するサポートは行っておりません。

コメント

タイトルとURLをコピーしました