Qiitaのmarkdownで画像にキャプション（タイトル）を付ける方法

# 結論を先に書く

Qiitaで挿入した画像にキャプション（タイトル）を付けようと思って苦労している皆さんへ，以下のように＊いい感じ＊に置ける方法を見つけました。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 17
}
</style>
footer 図１　棋士の年齢とレーティングの関係
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/fa902dba-51af-7b31-9430-a3780e1c83ee.png>
@enduml
```

キャプションは図の上側にも置けます。コチラはどうでしょう？

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
header {
  FontColor black
  FontSize 17
}
</style>
center header 図２　女流棋士の年齢とレーティングの関係
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/f5c2b312-d83f-96ee-5fee-90b82a3e0f6a.png>
@enduml
```

# コレどうやってるの？

PlantUML を使いました。通常は図形のタイトル文字列を記入するために用いられる `title` コマンドで画像を挿入しています。キャプションには `footer` コマンドを使います。文字の色とサイズを微調整しています。※デフォルトは目立たないようにするためか色が薄くサイズも小さい。

````markdown
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 17
}
</style>
footer 図１　棋士の年齢とレーティングの関係
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/fa902dba-51af-7b31-9430-a3780e1c83ee.png>
@enduml
```
````

上側にキャプションを置く場合は `header` コマンドを使います。デフォルトでは右揃いになってしまうので `center` コマンドを使って中央揃いに変更しています。※脚注[^1]参照

[^1]: [PlantUML使い方メモ - Qiita](https://qiita.com/opengl-8080/items/98c510b8ca060bdd2ea3)

````markdown
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
header {
  FontColor black
  FontSize 17
}
</style>
center header 図２　女流棋士の年齢とレーティングの関係
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/f5c2b312-d83f-96ee-5fee-90b82a3e0f6a.png>
@enduml
```
````

ちなみにフォントサイズ `FontSize` の単位は（おそらく）ピクセルです。本文の文字を同じサイズにするためには $16$ ピクセル（＝$12$ ポイント）とします。ただし，挿入する画像の横幅が Qiita の表示領域幅（筆者の環境では $706$ ピクセル）を超えた場合，画像を含めてキャプション文字まで縮小されるので注意して下さい。たとえば上の場合，画像ファイルの元の大きさは $750$ ピクセルでした。これを Qiita の画像表示最大幅（$706$ ピクセル）に合わせるため縮小がかかります。よって PlantUML での設定値は $16\times 750/706 = 16.997 \cdots \approx 17$ ということで $17$ ピクセルとしました。

:::note
厳密には Qiita の記事の横幅は $708$ ピクセルですが，挿入される画像の外縁には幅 $1$ ピクセルの境界線が付けられます。このため画像の横幅は実質 $706$ ピクセル以下に制限されます。
:::

# 別解その１
キャプションを `title ... end title` ブロックの中に入れてしまうこともできます。こうすると図とキャプションの距離が最小化されます。近過ぎると思った場合，改行を入れることで一行単位で間隔を調整することができます。もちろんキャプションを図の上側に置くこともできます。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
title {
  FontStyle normal
  FontColor black
  FontSize 17
}
</style>
title
<img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/fa902dba-51af-7b31-9430-a3780e1c83ee.png>
図１　棋士の年齢とレーティングの関係
end title
@enduml
```

PlantUML の内容はこんな感じです。`title ... end title` ブロックの中では文字列が太字になってしまうので，`style` 設定を使って通常文字に変更しています。キャプションを図の上側に置きたい場合は，下記の「図１　棋士の年齢とレーティングの関係」という文字列を &lt;img&gt;タグの上の行に置くだけです。

````markdown
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
title {
  FontStyle normal
  FontColor black
  FontSize 17
}
</style>
title
<img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/fa902dba-51af-7b31-9430-a3780e1c83ee.png>
図１　棋士の年齢とレーティングの関係
end title
@enduml
```
````

# 別解その２

キャプションを記述するため，文字通り `caption` というコマンドがあることを教えて頂きました。※2024年2月追記

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
caption {
  FontSize 17
}
</style>
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/fa902dba-51af-7b31-9430-a3780e1c83ee.png>
caption 図１　棋士の年齢とレーティングの関係
@enduml
```

図の下側にしか置けませんが，文字の色や大きさ，太さなどデフォルトのままでも使えるのでこれが最善に思えます。

````markdown
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
caption {
  FontSize 17
}
</style>
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/fa902dba-51af-7b31-9430-a3780e1c83ee.png>
caption 図１　棋士の年齢とレーティングの関係
@enduml
```
````


# 図の大きさを変えるとき

`scale` コマンドを使います。~~markdown というか html の &lt;img&gt; タグの width 属性のようにピクセル単位で指定することはできないようです。~~

:::note
2024年2月訂正
拡大率を指定したい場合は `scale 1.5` とか `scale 3/2` のように記述し，横幅や高さをピクセル単位で指定する場合には `scale 700 width` とか `scale 250 height` と記述すれば良いとのこと。詳しくは PlantUML のマニュアルを参照下さい。
:::

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
header {
  FontColor black
  FontSize 17
}
</style>
scale 700 width
center header 図２　女流棋士の年齢とレーティングの関係
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/f5c2b312-d83f-96ee-5fee-90b82a3e0f6a.png>
@enduml
```

PlantUML の内容はこんな感じです。

````markdown
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
header {
  FontColor black
  FontSize 17
}
</style>
scale 700 width
center header 図２　女流棋士の年齢とレーティングの関係
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/f5c2b312-d83f-96ee-5fee-90b82a3e0f6a.png>
@enduml
```
````

# 余白について

上の例では，少しでも画像の表示領域を広げるため PlantUML の `style` 設定で
```
root {
  Padding 0
  Margin 0
}
```

として余白を削っています。ちなみにデフォルトでは以下のような余白があります。分かりやすいように背景を着色しています。

```plantuml
@startuml
<style>
root {
  backgroundColor gray
}
</style>
title <img https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png>
@enduml
```

`style` 設定はこんな感じです。

```
root {
  backgroundColor gray
}
```

余白を削ると以下のようになります。それでもまだ少し右側と下側に隙間が残っていますが，原因は分かっていません。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
  backgroundColor gray
}
</style>
title <img https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png>
@enduml
```

`style` 設定はこんな感じです。

```
root {
  Padding 0
  Margin 0
  backgroundColor gray
}
```