Jekyllで図にキャプション付けたい．

単純にブログ書いてて図１とか図２とか〜の図とか言いたくなることがある．そういうときにキャプションをmarkdownでブログを書きながら付けたい．

方法

Using an image strong in Markdown Jekyll に賢い解決策があった．

  1. markdownで
![fig_name](fig_path)
**fig_caption**

のように書く．そうすると生成されるhtmlファイルの対応部分は

<p>
<img src="fig_path"></img>
<strong>fig_caption</strong>
</p>

のようになっている．ここでimgタグとstrongタグがこの順番でならんでいるのがポイント．

  1. style.scssのところでimgタグとstrongタグが並列してきた場合のスタイルを追記しておく．例えば
img + strong {display: block; text-align: center;}

のように書く．img + strong {}の{}の部分は好きなデザインに変更すればよい．また別にstrong要素でなくても他の要素でも同じようなことができるはず．

感想

CSSにこんな記述方法があるのは知らなかった．いい感じにmarkdown要素の組み合わせで，図に単純にキャプションをつけるぐらいのレベルの簡単な拡張ならもっと付けられるかもしれない．