4
2

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

Last updated at Posted at 2023-09-07

結論を先に書く

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

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

コレどうやってるの?

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

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

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

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
header {
  FontColor black
  FontSize 17
}
</style>
center header 図2 女流棋士の年齢とレーティングの関係
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$ ピクセルとしました。

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

別解その1

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

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

```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>
図1 棋士の年齢とレーティングの関係
end title
@enduml
```

別解その2

キャプションを記述するため,文字通り 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 図1 棋士の年齢とレーティングの関係
@enduml
```

図の大きさを変えるとき

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

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

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

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
header {
  FontColor black
  FontSize 17
}
</style>
scale 700 width
center header 図2 女流棋士の年齢とレーティングの関係
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
}

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

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

root {
  backgroundColor gray
}

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

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

root {
  Padding 0
  Margin 0
  backgroundColor gray
}
  1. PlantUML使い方メモ - Qiita

4
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2