【番外編】マスコットを素材に貼り付ける魔法

お気に入りのマスコットキャラクターが完成したら、次は「ブログの顔」として活躍してもらいましょう。
Geminiにキャラクターと背景素材を渡すだけで、自動で合成して専用のHTMLコードまで作ってくれる…そんな魔法のような手順を公開します。

STEP 1. Geminiにマスコットと素材を託す

「背景透過したマスコットのURL」と「ベースにしたいノートのイメージ」をGeminiに伝え、1つのブログパーツとして構成するよう指示します。

実際のGeminiへの指示

📝 指示のコツ（プロンプト）

「（ノート風背景のスクショを見せて）この右下に、以下のマスコットURLの画像をのせて、WordPress(Cocoon)で使えるHTMLコードを作って下さい。 マスコットURL：[あなたの画像URL]」

▼

Geminiはキャラクターの位置、ノートの罫線、そして全体のバランスを計算してコードを生成してくれます。

完成したカスタムノート素材

右下にちょこんと座る manaokoちゃん。ただ画像を置くのではなく、ノートの枠からはみ出させたり、影をつけたりすることで「プロっぽい」立体感が生まれます。

1. 文字が自由に変えられる

画像の中に文字を書くと修正できませんが、HTMLならブログ上でいつでも文章を書き換えられます。

2. 文字がくっきり綺麗

スマホやPCで拡大しても、文字がボケることなく常に読みやすい状態を保てます。