Geminiに頼ってトップページのアイキャッチを16：9に変えました

Geminiに頼ってトップページの画像枠を16:9に変更しました。ブログを始めて１年未満の私が、CSSに詳しくなくてもGeminiと二人三脚なら出来ました。

はじめに（悩み）

アイキャッチ画像の主流は16:9だそうです。でも16:9で画像を作っても、記事リスト一覧で両端が大きく切れてしまいます。

枠を広げればいいかなとWord感覚で挑みましたが、CSSの変更なんてハードルが高すぎました。ちなみにブログのテーマ（テンプレート）はSMARTです。

変更前のPC版

変更前のスマホ版

今回やりたかったこと（ゴール）

Geminiとのやり取りの舞台裏

よく言われてますが、AIから正しい回答を貰うのはお願いの仕方が大事だということが良く分かりました。Geminiは言われたことを必ず解決しようとするので、他に悪影響が出る回答をして来ることもありました。

今のコードをGeminiに貼ってしまうのが近道

最初は言葉でやり取りしていましたが、記事リスト部分のCSSを貼り付けたら「これはBloggerのCSSですね」と即理解してくれました。

Geminiの回答

最初に考えてくれたコードは親枠をautoにするだった

画像を綺麗に入れようとするあまり、親枠 (.article-post-wrap) を height: autoにするようにとの提案です。でも、これだと記事ごとにリストの高さがバラバラなってしまい、ガタガタして見栄えが悪くなります。

人間なら最初にこっちを考えるのでしょうね

記事リストのガタガタをGeminiに指摘すると、「仰る通りです！鋭いご指摘ですね。」と、次善策を提案をしてくれました。（全然鋭い指摘じゃないぞ😣）

Geminiの回答

次の提案は、親枠を auto にするのではなく「高さは画像が決めて、親枠はその高さに合わせる」というコードです。

自分が出来ないくせに何だけど、最初からこっちを教えてくれよ😓。きっとAIには「同じ高さの枠に16:9の画像を綺麗に入れて」とお願いしなければいけなかったんだね。それとも有料版なら違うのかな？

Geminiは諦めない

パソコン版は大丈夫なので次はスマホです。画像の高さが低くなっているので記事リスト自体の高さも減らさないと余白が目立ちます。そのため、スマホ版の時はタグの表示をさせないようにしました。

そして始まる、コミット合戦……

Geminiへのお願いは、「スマホ版の時だけタグを消して、日付は常に１番下に来るようにして」です。 タグを消すのは１行追加するだけでOK、でも日付を１番下にするのが大変でした。（結局できなかった）

• ✦Gemini：「このコードで大丈夫です」
• 👉わたし：「場所変わらないよ」
• ✦Gemini：「失礼しました、これなら大丈夫です！」
• 👉わたし：「動かないよ」
• ✦Gemini：「もっと強力なコードにしました、これに書き換えてください」

……これが繰り返され、その度にコードと !important が増えていく😱

結局、「こんなにコード増えるの嫌だよ、できないなら日付を１番上にして」のお願いで終了しました。

最終的なカスタマイズコード

この後は、marginとpadding を少し変更してもらって完成です。スマホのときには狭い画面で画像と文字の高さのバランスを考えて15:9で固定しています。

３～４時間はGeminiとやり取りしていたと思います。「根気強く調整にお付き合いいただきありがとうございました！」とGeminiに言われてしまった😅

GeminiにCSSコードの貼り方も教えてもらいました。

⚠️ バックアップを取ってからお試し下さい

/* 記事リスト
--------------------------------------------------------- */

/* 記事リストのリンク（全体） */
.articles-wrap a:link {
  display: block;
  text-decoration: none;
}

.articles-wrap a:hover {
  opacity: 0.6;
}

/* 記事リスト全体 */
.articles-area {
  background: $(article.background.color);
  margin-bottom: 20px;
  border-left: 1px solid #ddd;
  box-shadow: 1px 1px 2px rgba(0,0,0, .4);
}

/* 投稿タイトル */
.article-title {
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  font-weight: bold;
  background: $(article.title.background.color);
  color: $(article.title.color);
  padding: 6px 15px;
  margin: 0;
}

.article-post-wrap {
  display: flex;
  align-items: flex-start;
  height: auto;
  padding: 10px 10px 5px 10px; /* 上・右・下・左 の順 */
  overflow: hidden;
}

/* サムネイル */
.article-thumbnail {
  width: 45%;               /* 横幅を少し抑える（16:9は横に広いため） */
  aspect-ratio: 16 / 9;     /* ここで16:9を強制 */
  flex-shrink: 0;           /* 画像が潰されないように固定 */
  margin-right: 15px;
}

.article-thumbnail img {
  width: 100%;
  height: 100%;
  border: solid 1px #ddd;
  object-fit: cover;
}

/* サムネイル右のエリア */
.article-post-area {
  flex: 1;                 /* 残りの幅をすべて文章に使う */
  display: flex;
  flex-direction: column;  /* 上から順に並べる */
}

.article-info-area {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 13px;
  color: $(article.info.color);
  height: 24px;
  overflow: hidden; /* タグがはみ出ると消えるようにする */
}

.article-post-date {
  display: inline-block;
  margin-right: 1em;
  border-bottom: dashed 1px $(article.info.color);
  margin-bottom: 2px;
}

.article-label {
  display: inline-block;
  border-bottom: dashed 1px $(article.info.color);
  padding: 2px 0;
  margin-right: 2px;
}

.fa-calendar {
  margin-right: 6px;
}

.fa-tag {
  margin-right: 3px;
}

/* 要約文 */
.post-snippet {
  font-size: 14px;
  line-height: 1.7em;
  color: $(article.description.color);
  margin: 15px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 3行目以降を「...」にする */
  -webkit-box-orient: vertical;
}

.article-title-res {
  display: none;
}

/* レスポンシブ（タブレット大縦） */
@media (max-width: 1024px) {
  .article-title {
    font-size: 16px;
  }
  .article-post-wrap {
    height: auto;
    padding: 8px 8px 5px 8px; /* 上・右・下・左 の順 */
  }
  .article-thumbnail {
    width: 45%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-width: 150px;     /* これ以上小さくならないようにする */
    margin-right: 15px;
    flex-shrink: 0;
  }
  .article-info-area {
    font-size: 12px;
  }
  .post-snippet {
    font-size: 13px;
    height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* レスポンシブ（スマホ縦） */
@media (max-width: 560px) {
  .articles-area {
    margin-bottom: 15px;
  }     
  .article-post-wrap {
    height: auto; 
    border-top: solid 3px $(article.res.border.color);
    display: flex; 
    padding: 8px 5px 3px 5px; /* 上・右・下・左 の順 */
  }
  .article-thumbnail {
    width: 45%;
    height: auto;         
    aspect-ratio: 15 / 9;  /* スマホ独自の比率調整 */
    margin-right: 10px;
    flex-shrink: 0;
  }       
  .article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .article-title {
    display: none;
  }
  .article-title-res {
    display: block;
    font-size: 15px;
    color: $(article.res.title.color);
    height: auto; 
    max-height: 5.0em;
    line-height: 1.6em;
    margin-bottom: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .article-post-area {
    display: flex;
    flex-direction: column;
  }

  /* 日付エリアを一番上（order: 1） */
  .article-info-area {
    order: 1;
    margin-top: 0;
    margin-bottom: 1px;
    height: auto; /* スマホ版では高さをautoにしてタグ非表示に対応 */
    overflow: visible;
  }  

  /* タイトルエリアを二番目（order: 2） */
  .article-title-res {
    order: 2;
  }
  
  .article-post-date {
    margin: 0 5px 0 0;
  }
  .fa-calendar {
    margin-right: 3px;
  }
  .post-snippet {
    display: none;
  } 
  .article-label {
    display: none;
  }
  .fa-tag {
    display: none;
  }
}

16:9比率のアイキャッチ画像がビシッと入った

記事リストでアイキャッチ画像が綺麗に入りました。日付もPC版とスマホ版で上に統一できて良かったと思っています。

変更後のPC版

変更後のスマホ版

Geminiは「答え」をくれるだけでなく、一緒に悩んで解決してくれる「パートナー」みたいでした。しかも文句言わないし😆

でも最後にChatGPTにも聞いてみた

なんかコードが無駄に長い気がするので、ChatGPTにコードがもう少し簡潔にならないを聞いてみました。

• 同じ指定をPCで書いて、スマホでも書いてる
• div や img は デフォルトが auto なので、height: auto は不要

との指摘で簡素化したコードも教えてくれたのですが、後でスマホだけ変更したくなることもありそうなので残しておくことにしました。

これで16:9のコードは完成にします。枠の大きさ変えるだけでこんなに大変なのに、テーマを自分で作ってしまう人達って凄すぎです😲