Geminに我がブログのレイアウトの構文を頼んでみました

Googleが提供するGemini Ai、すばらしいですね
私のような低レベルの知識でも、遅まきながら、勉強して活用すると面白いでしょう

それで、いろいろ使い方を観ていると、HTML文も作成してくれるとのことを知りましたので、早速我がブログのレイアウトの構文をGeminiに頼んでみました

レイアウトをあらかじめ作成して、画像を投げます
そして、こんな風にと考え方を、頼んでみました

と、すると最下部のようなHTML構文を作成してくれました
早速、わがブログの新ページで表示させてみました

この方法（自作レイアウト画像を投げる）はYoutube Mappy Photoさんの動画から参考にさせていただきました

自作した大ざっぱなレイアウト

はい、これがGeminiの作成したHTMLの表示です
私の過去の問い合わせの画像から言葉を抽出したようで、その文言は‥
・オールドレンズ　・Nikon D600　・航空機
を使って構成されています

オールドデジカメ撮影記録

Nikon D600とマニュアルフォーカスレンズで撮影した作例を紹介します。
詳細な機材レビューはこちらをご覧ください。

ここに写真を挿入

撮影データ

• カメラ: Nikon D600
• レンズ: マニュアルフォーカスレンズ
• 被写体: 航空機

ここに写真の解説や、撮影時の設定などを記述します。

そして、画像を横２列で表示させるHTMLも頼んでみました



ここからが実際の表示です

バックの黒もいいのですが、表示させるとちょっと？？から、グレーに変えてみました
**背景の色を灰色（c0c0c0）silber**

オールドデジカメ撮影記録

Nikon D600とマニュアルフォーカスレンズで撮影した作例を紹介します。
詳細な機材レビューはこちらをご覧ください。

背景の色を灰色（c0c0c0）に変えてみました

ここに写真を挿入

撮影データ

• カメラ: Nikon D600
• レンズ: マニュアルフォーカスレンズ
• 被写体: 航空機

ここに写真の解説や、撮影時の設定などを記述します。

横2列に画像を入れてみました
画像の大きさはレイアウトの幅から「中」が、いいみたいですね

ここに1枚目の画像を挿入

ここに2枚目の画像を挿入

Geminiが作成したHTML構文です

<div style="background-color: #111; color: #fff; padding: 30px; margin-bottom: 20px; border-radius: 4px;">

    <h3>オールドデジカメ撮影記録</h3>

    <p>Nikon D600とマニュアルフォーカスレンズで撮影した作例を紹介します。<br>

    詳細な機材レビューは<a href="#" style="color: #4da6ff;">こちら</a>をご覧ください。</p>

</div>

<div style="display: flex; flex-wrap: wrap; gap: 20px;">

    

    <div style="background-color: #222; flex: 1 1 45%; min-height: 250px; color: #fff; padding: 20px; border-radius: 4px; text-align: center;">

        <p style="color: #aaa;">ここに写真を挿入</p>

        </div>

    <div style="background-color: #222; flex: 1 1 45%; min-height: 250px; color: #fff; padding: 20px; border-radius: 4px;">

        <h4>撮影データ</h4>

        <ul>

            <li>カメラ: Nikon D600</li>

            <li>レンズ: マニュアルフォーカスレンズ</li>

            <li>被写体: 航空機</li>

        </ul>

        <p>ここに写真の解説や、撮影時の設定などを記述します。</p>

    </div>

</div>

<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;">

    

    <div style="flex: 1 1 48%; box-sizing: border-box; text-align: center;">

        <p style="color: #aaa;">ここに1枚目の画像を挿入</p>

    </div>

    <div style="flex: 1 1 48%; box-sizing: border-box; text-align: center;">

        <p style="color: #aaa;">ここに2枚目の画像を挿入</p>

    </div>

</div>

いやいやじつに楽しいし、面白いね
知識のない私にとっては、頼もしいかぎりです

スマホにもGeminiはインストしていますので、利用しています
もう、検索エンジンで調べるより深くしることができます

もっと、勉強して活用していきましょう
忙しいね！！