JekyllのMarkdownで画像にクラスやIDを付ける書き方

Static Site GeneratorのJekyllを触っています。

画像に特定のクラスを付けたくて、プラグインを作ろうかHTMLで書こうか、どれも問題あるな〜と悩んでいたら、Markdown中で書けることが判明!

画像クラスの書き方

通常の画像タグ

![image](/assets/img/sample.jpg)

結果:

<img src="/assets/img/sample.jpg” alt=“image” />

 

 

画像にクラスを付ける場合

![a](/assets/photos/md/sample.jpg){: .img-responsive}

結果:

<img src="/assets/img/sample.jpg” alt=“image” class=“img-responsive”/>

 

うわ〜超便利!というか知らないとプラグインだのフィルターだのを考えてしまいめちゃめちゃ遠回りします。ぜひ覚えておきたい!> 自分

{: .クラス名} コロンに続いてスペースを開け、ドットを打ってクラス名を書きます。ちなみにドットを#に変えるとIDになります。

ちなみに画像以外のマークダウンにも通じます。(Strongやaリンクなど)