1. <figure> の意味
<figure>
<img src="document.jpg" alt="説明文">
<figcaption>図1: サンプル画像</figcaption>
</figure>
1.のCodeを
コピーして
投稿者 限定公開の練習用ブログ[1]今立ち上げてやってみたのですけども
DSC_1111.jpg
これを入れても
グレーの
四角の
IMGと
書かれたものが
出るだけです。
ASADA Misuzu
🧑💻 OpenAI ChatGPT-5先生
原因はほぼ確実に src の場所指定です。
src="DSC_1111.jpg" は「同じサーバー（同じフォルダ）にある画像」を指しますが、BloggerはローカルPCの画像や任意の“同じフォルダ”を見に行きません。Blogger側にアップロードされた画像のURL、または外部で公開されている絶対URLを入れる必要があります。
うまく表示させる手順（Blogger）
方法A：BloggerにアップロードしてURLを使う（いちばん簡単）
1. 投稿エディタで「画像を挿入」→ PCから DSC_1111.jpg をアップロード。
2. 画像が本文に入ったら、一度HTML表示に切り替えて、挿入された <img> の src のフルURL をコピー。
例：https://blogger.googleusercontent.com/img/b/.../s1600/DSC_1111.jpg
3. そのURLを、あなたの <figure><img ...></figure> の src に貼り替える。
<figure>
<img src="https://blogger.googleusercontent.com/img/b/.../s1600/DSC_1111.jpg"
alt="テスト画像" width="640" height="228">
<figcaption>図: テスト</figcaption>
</figure>
方法B：外部の公開URLを使う
すでにWeb上で公開されている画像（直リンク可）なら、そのhttpsから始まるURLを src に入れます。
-----------------------------------------------------------------------------
よくあるハマりポイント（チェックリスト）
引用符が全角になっていないか
“ ”（全角）→ ""（半角） に直す。
山かっこが全角になっていないか
〈img …〉 → <img …>
属性名のタイプミス
srg → src
拡張子の大文字/小文字
DSC_1111.JPG と DSC_1111.jpg は別物として扱われることがあります。実ファイル名に合わせる。
https混在（Mixed Content）
ブログが https:// なのに http:// の画像だとブロックされることがあります。httpsのURLを使う。
権限
「投稿者限定公開」にしていても、Bloggerにアップロード済み画像なら表示されます。
Google Drive等のURLを使う場合は公開権限が必要（Drive直リンクは失敗しやすい）。
サイズ指定
width / height が 0 やCSSで display:none 等になっていないか。
最小の動作サンプル（URLだけ差し替え）
<figure>
<img src="（ここにBloggerが発行したフルURL）"
alt="テスト画像" width="640" height="228">
<figcaption>図: テスト</figcaption>
</figure>
まずは「画像を挿入」でBloggerにアップ→HTML表示で発行URLを拾う、で解決します。
もしURLを貼っても出ない場合は、貼った <img> 行をそのままここに貼ってください（個人情報部分は伏せてOK）。確認して直します。
やはりそうですね引っ張ってきたら アルバムから長いアドレスがついてるのです。
http://blogger⋯⋯⋯⋯
って出てます。
GoLiveとかとは違うのですね。
ASADA Misuzu
-----------------------------------------------------------------------------
🧑💻 OpenAI ChatGPT-5先生
そうです、そのとおりです 👍
Bloggerは GoLiveのように「自分のパソコン上のファイルをそのまま参照する」ことはできません。
Bloggerの仕組みは必ず「Googleのサーバーにアップロードされた画像ファイル」に対して、自動で長いURL（https://blogger.googleusercontent.com/... など）を割り振り、それを src に書き込む形になります。
📌 GoLive（Dreamweaver系）の場合
ローカルのPCフォルダを丸ごとWebサーバーに転送（FTP）する。
src="DSC_1111.jpg" と書けば、そのまま同じディレクトリの画像を参照できる。
📌 Bloggerの場合
画像は必ず「Googleのサーバーにアップロード → 自動的に長いアドレスを付与」される。
だから src="DSC_1111.jpg" だけでは参照できず、その長いURLを src に書かなければ表示されない。
実際のコード例（Blogger用）
<figure>
<img src="https://blogger.googleusercontent.com/img/b/.../DSC_1111.jpg"
alt="テスト画像" width="640" height="228">
<figcaption>図: DSC_1111</figcaption>
</figure>
✅ まとめると：
GoLive＝ローカルファイルをサーバーに直接アップロードする仕組み
Blogger＝Googleのサーバーに置かれた画像のURLしか使えない仕組み
なので、Bloggerでは必ずその「長いURL」を src に書く必要があります。
---------------------------------------------------------------------------------
👉 ご希望であれば、「Bloggerが発行する <img> タグから必要な部分だけ抜き出して <figure> に組み込み直す方法」を具体的に例示できますが、やってみますか？
[1] Codingの記録 ChatGPT-5 作成
https://html-css-asadamisuzu.blogspot.com/
