学習帳

kramdownの画像要素にclass属性を付ける

公開:


Jekyll(Github Pages)ではMarkdownのパーサとして、kramdownを選択できる。

このkramdownはMarkdownの拡張版という位置付け。
より応用的な使い方に対応している。

その中から、class属性の付け方をメモ。

通常の画像

通常、Markdownにおける画像は次の書式で表現する。

![サンプル画像](/image/sample.jpg)

これは次のようなHTMLに変換される。

<img src="/image/sample.jpg" alt="サンプル画像" />

class付きの画像

画像の後ろに{: .クラス名}を記述する。

![サンプル画像](/image/sample.jpg){: .hilight}

これにより、class属性の付いた画像に変換される。

<img src="/image/sample.jpg" alt="サンプル画像" class="hilight"/>

class以外に属性名を指定することも可能

画像の後ろに{: 属性名="値"}を記述する。

![サンプル画像](/image/sample.jpg){: width="100"}
<img src="/image/sample.jpg" alt="サンプル画像" width="100"/>


新着記事

  1. Excelで別ブックからの数式コピー時にセル名だけペースト
  2. 楽天カードとYahooカードのどちらをメインにするか検討中
  3. coincheckの本人確認用IDセルフィーを一人で撮るコツ

スポンサーリンク