🖼️

Zenn の画像にキャプションをつける

2020/10/19に公開

Zenn の画像にキャプションをつける方法

Zenn 公式の Markdown記法にある通り、画像に続く * で挟んだテキストがキャプションとしてレイアウトされます。

![](https://画像のURL)
*キャプション*

0xC0FFEE

画像の後に空行をいれると一般のテキストとして左寄せになります。

![](https://画像のURL)

*キャプション*

0xC0FFEE

ソースコードを覗いてみると、上記のマークダウンから、次の HTML と CSS が作成されていることが分かります。

HTML

<p>
  <img src="画像のURL" alt>
  <br>
  <em>キャプション</em>
</p>

CSS

img~em {
    display: block;
    margin: -1rem auto 0;
    line-height: 1.3;
    text-align: center;
    color: #93a5b1;
    font-size: .95rem;
}

このCSSによって、キャプション用のテキストに対して、センタリングなどのレイアウトが調整されています。

img~em というのは「 img タグの後に続く、同じ階層内の em タグ」という意味で、MDN によると~ は一般兄弟結合子 (general sibling combinator) と言う名前だそうです。

似たような結合子に + があります。img+em の場合、「img タグの直後にある em タグ」という意味です。隣接兄弟結合子と言うそうです。

先日書いた記事「シュトヘル達の名前を西夏文字 (Unicode) で書く」では、画像とともにキャプションとして引用元や説明文を書いていました。しかし画像はセンタリングされるのに対して、続く文章は左寄せされていました。

「西夏文字 - wikipedia より」のキャプションが左寄せされていました

そこでキャプションの機能を Zenn のロードマップに要望したところ、なんと次の日にできていました。素早いご対応どうもありがとうございました。

早速ありがとうございます！😹

こちらこそありがとうございます！