基本的な要素の割にかなり悩んだやつです

Markdownの記法では画像サイズの指定が出来ないので解決策を考える必要がありました

imgタグを使用する方法

特に難しい事はしていません

Markdown記法の代わりとしてHTMLタグで画像を貼りつけるだけです

<img src="foo.jpg" width="70%">

ただしHugoのビルド時にデフォルトでHTMLタグが無効化されてしまうのでconfigファイルをいじる必要があります

# To use html tag
markup:
  goldmark:
    renderer:
      unsafe: true

前はこの方法にしていましたが、純粋なMarkdown記法で統一したいな～と思ったので辞めました

CSSで画像サイズを指定する方法

何でこの方法に今まで気づかなかったんだろう…

まず画像を貼り付ける際は普通のMarkdownの記法で書きます

![](foo.jpg)

Hugoテーマのファイル群の中にCSSファイルがあるかと思いますのでそちらに追記します

.markdown img {
    max-width: 100%;
    max-height: 500px;
}

ポイントとしては、imgタグに対する適用範囲を、markdown属性で囲ってある物のみとしています

このように条件を絞ることで、記事内容以外の画像に適用されるのを防ぎます

サイズの指定は最大値に対して行っています(widthやheightで指定すると小さい画像が大きく拡大されてしまったり、アスペクト比が歪んでとんでもないことになる)

max-widthでレスポンシブデザインのレイアウトに合わせて表示を調整

それだけだと縦長の画像を挿入した際に見づらくなるので、mac-heightを指定して高さを取りすぎないように調整しています

CSSに対しては昔から食わず嫌いみたいな態度を取っていたのですが(?)、やっぱり便利ですね…