記事に画像データを埋め込みできるようにします。
画像データの埋め込み方針
下記の方針に従って、機能を追加します。
で画像の埋め込みができるようにする- 遅延読み込みの有効化(loading="lazy")
- 記事に利用される画像は
content/<Category>/<ArticleID>/images/内に保存されている - デプロイ時の画像の出力先は、
dist/<ArticleID>/images/内にする - 入力画像が
webp形式以外の場合、webp形式に変換する - 画像の変換時には元画像のアスペクト比を維持
- 変換後の画像の横幅の最大値は
1200pxとする。元画像が最大値より大きい場合はリサイズを実施
実装方法
いつも通り、geminiを呼び出して、上記の方針に書かれている箇条書きを与えてコードを生成してもらう。爆速。
記事に画像データを埋め込めるようにしてほしい。
## 要件
- ``で画像の埋め込みができるようにする
- 遅延読み込みの有効化(loading="lazy")
- 記事に利用される画像は`content/<Category>/<ArticleID>/images/`内に保存されている
- デプロイ時の画像の出力先は、`dist/<ArticleID>/images/`内にする
- 入力画像が`webp`形式以外の場合、`webp`形式に変換する
- 画像の変換時には元画像のアスペクト比を維持
- 変換後の画像の横幅の最大値は `1200px` とする。元画像が最大値より大きい場合はリサイズを実施
見た目の調整
ちょっと画像の見た目が汚かったので微調整
- 埋め込み画像の周りに**薄い影**を追加してください
- 埋め込み画像はセンタリングしてください。
- `![]()`の次の行に画像のキャプションを追加できるようにしたい(参考情報:<https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll/30366422#30366422)>