画像を快適に使う

基本

Markdown で画像、つまり <img> タグを使用する際は ![タイトル](URL) という記法を使用します。タイトル欄は空でも構いません。これをそのまま使うと以下のように 100% の幅でデカデカと表示されてしまうのが気になると思います:

まずはこれを 100% でなく 30% くらいにすることを考えてみます。

Markdown に対し HTML 属性を設定できるようにする

まず attr_list という拡張機能を導入します。 mkdocs.yml に以下のように追記してください:

markdown_extensions:
  - attr_list

そうすると Markdown に対し {xxx=yyy} のような構文で HTML 属性を付与できるようになります。 id 属性は {#aaa}, class 属性は {.aaa} という短縮構文が用意されています。 {id=aaa} や {class=aaa} と書いても大丈夫です。例えば ![](../note/images/introduction-01.jpg){width=30%} のように設定すると以下のようになります:

ちょっと良くなりましたが、左寄せなのが微妙なので中央寄せにしたいところです。

画像を中央寄せにする

普通に考えると <div align="center"> で Markdown を囲いたいところですが、そうすると内部の Markdown が解釈されずそのまま出力されてしまいます。これを解釈されるようにするために、以下の拡張機能を導入します:

markdown_extensions:
  - md_in_html

この md_in_html を導入すると markdown 属性を指定した内部では Markdown が解釈されるようになります。これで例えば <div align="center" markdown>![](../note/images/introduction-01.jpg){width=30%}</div> のように書くと、以下のようにレンダリングされます:

figure タグ

HTML5 には写真・図表・コードなどのまとまりを示す <figure> タグが定義されておりますので、こちらを使用するほうが実情に即しています。後で示す拡張 CSS を使用する方法で <figure markdown>![](URL){class="class-name"}</figure> のように使用します。

class 属性を使用する

それぞれの Markdown に width=30% と指定するのはあまり綺麗ではありません。何故なら全体的にサイズを少し変更したいという場合に width="35% とすべて書き換えて回らないといけないからです。こういった時は CSS で幅を指定して class 属性を指定したほうが良さそうです。外部 CSS ファイルを使用するためにまず mkdocs.yml に以下の設定を行います:

extra_css:
  - assets/extra.css

そして assets/extra.css に以下のように記述します:

/** 画像中央寄せ */
.md-typeset .img-center {
    margin: 0 auto;
    width: 30%;
}

そうすると <figure markdown>![](../note/images/introduction-01.jpg){.img-center}</figure> で以下のようになります:

左寄せする

画像を中央寄せで表示するのではなく、左寄せで表示したい時があると思います。この場合は CSS で float: left を指定すればよいです。 assets/extra.css に以下のように記述します:

/** 画像左寄せ */
.md-typeset .img-left {
    float: left;
    width: 30%;
    margin-right: 16px;
}

/** 回り込み解除 */
.md-typeset hr.clear-both {
    border-width: 0;
    clear: both;
}

これで例えば以下のコードがこのように解釈されます:

![](../note/images/introduction-01.jpg){.img-left}
あかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわ
あかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわ
あかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわ

<hr class="clear-both"/>

次の文章...

あかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわ

次の文章...

float: left の回り込み解除のために clear: both を指定した hr.clear-both のような CSS 定義を使用すると便利でしょう。

レスポンシブ対応

さて、これだけだとパソコンで見ている時はちょうどよいサイズで表示されますが、これをスマートフォンで見たときに画像がものすごく小さく表示されてしまい快適ではありません。これはどの画面サイズでも 30% というふうに決め打ちしているためです。これを解決するために CSS3 のメディアクエリ を使用します:

/** 画像左寄せ */
.md-typeset .img-left {
    width: 100%;
}

/** 画像中央寄せ */
.md-typeset .img-center {
    margin: 0 auto;
    width: 80%;
}

@media screen and (min-width: 40em) {
    .md-typeset .img-left {
        float: left;
        width: 50%;
        margin-right: 16px;
    }
    .md-typeset .img-center {
        width: 50%;
    }
}

@media screen and (min-width: 76.25em) {
    .md-typeset .img-left {
        float: left;
        width: 30%;
        margin-right: 16px;
    }
    .md-typeset .img-center {
        width: 30%;
    }
}

/** 画像キャプション */
.md-typeset figcaption {
    font-weight: bold;
}

/** 回り込み解除 */
.md-typeset hr.clear-both {
    border-width: 0;
    clear: both;
}

これでスマートフォンでは中央寄せは 80% で表示され、左寄せは文章を回り込まずに 100% で表示します。タブレットくらいの画面サイズでは 50% で表示します。

スライドショー

画像を押すと最大サイズで画像がデカデカと表示され、スライドショーのように見れると便利です。これは MkDocs GLightbox というプラグインが用意されており、簡単に導入できるのでやっておいて損はないと思います。

pip install mkdocs-glightbox

そして mkdocs.yml に以下を記述します:

plugins:
   - glightbox

いくつか設定できるオプションがありますので公式サイトを参考にしてください。