無料で始められてカスタマイズの自由度も高いGoogleが提供しているブログサービス『Blogger』。本ブログで使っています。

強いて難点を言うと、使い方の日本語解説が少ないので（Blogger独自の書式（文法）がある）ブログテーマ（XMLテンプレート）を修正する必要に駆られた時は困ることがあるんですよねぇ～。

それがですね😋、Gemini（Gemini in Chrome）がBloggerの編集画面で使えるようになったので、ブログテーマの不明点をGeminiが解説してくれるようになりました！

今回はこの紹介になります。

【Blogger備忘録】Gemini in Chromeを使ってブログテーマ（XMLテンプレート）を修正する

●使用するアプリ・サービス（Gemini in Chrome）

使用するGemini（生成AI）はコレです。

Gemini in Chrome

Chromeブラウザ上で動作するGeminiです。

現在開いているWebページの内容を把握してくれるのでページの要約等が簡単に出来ます。最大の魅力は、他の生成AIと異なり（Googleが提供している）Bloggerの編集画面上でシームレスに連携してくれます。

日本での提供は2026年4月21日から始まっています。

●使い方

Bloggerの編集画面で『テーマ』>『HTMLを編集』を開きます。

Blogger編集画面

開いたテーマ編集画面で不明点・やりたいことを『Geminiに相談』すればOKです。

ブログテーマ（XMLテンプレート）編集画面（Blogger編集画面）

●使用感

ブログテーマ編集画面でのGemini in Chromeの質疑・応答（Blogger編集画面）

・質疑（プロンプト）・応答

実際のテーマ編集画面でのGemini in Chromeとの質疑・応答はこんな感じです。

👨🏻私の質疑（プロンプト）：
『このテーマを使うとモバイル画面で画像が小さく表示されてしまうのですが、画面の横幅いっぱいに画像を表示する方法を教えてください。』
✨Gemini in Chrome応答：
『Bloggerの「Simple」テーマなどのクラシックテンプレートでは、`<b:skin>` 内のCSSを設定することでモバイル画面上の画像表示幅を最大化できます。
『CSSの調整、または編集箇所の特定を順番に進めていきましょう。

1. **CSS（b:skin）内にスタイルを追加する:** コード編集.
現在開いているHTML編集画面の `<b:skin>` の中に、以下のレスポンシブ用CSSコードを追加します。`]]></b:skin>` の直前あたりに貼り付けるのが最も安全です。

css
/* モバイル画面で画像を横幅いっぱいに表示 */
.post-body img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
box-sizing: border-box;
}

**確認手順:** コード追加後に画面右上（または右下）の保存アイコン（フロッピーディスクマーク）をタップし、モバイル端末（またはスマホ表示）でブログ記事の画像が横幅一杯に拡大されたか確認します。

2. **ビューポート設定を確認・修正する:** 画面サイズの適正化.
HTMLの5行目付近にあるビューポート設定がスマホ表示を制限している場合があります。5行目の `<meta ... name='viewport' />` タグを、以下の標準的な記述に変更します。

html
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>

**確認手順:** 保存後、スマートフォンでアクセスした際にデスクトップ用固定幅（1100px等）に縮小されず、画面にフィットして表示されるか確認します。』

（私は質疑に記載していませんが）Gemini in Chromeは編集中のテーマが「Simple」であることを把握していて適切な回答をしてくれています。

この回答に沿ってテーマを編集したところ、問題は無事に解決しました😋。

●改善要望点

特にありません😋

●まとめ

Gemini in Chromeを使うことによってBloggerのブログテーマ（XMLテンプレート）の不明点・修正したいポイントが容易に分かるようになりました！

これぞGemini in ChromeとBloggerの連携の本領発揮ですね😋！

IFTTTの先へ

メニュー