Jekyllのエントリに画像を貼る

まず、適当なディレクトリを作成して画像ファイルを入れておきます。

たとえば/images/sample.pngという画像ファイルを配置したとします。 エントリにはこんな感じの記述で画像を貼ることができます。

![キャプション](http://takezoe.github.io/blog/images/sample.png)

リポジトリ内の画像ファイルを参照するのであれば以下のようにsite.baseurlという変数を使って記述することもできます。こうしておけばローカルでも表示を確認することができます。

![キャプション]({{site.baseurl}}/images/sample.png)

ただし、このままだと巨大な画像ファイルの場合もそのままのサイズで表示されてしまうため、レイアウトの横幅からはみ出てしまいます。

そこで、css/main.cssに以下のようなスタイルを追加します。

img {
  max-width: 100%;
  border: 1px solid #eee;
}

これで画像は最大でもブログエントリのレイアウトの横幅いっぱいに表示されるようになります。

Jekyllには画像サイズを指定するプラグインなどもあるようですが、Github PagesではJekyllのプラグインは使えないようです。ローカルでHTMLを生成してpushするようにすればできますが、それはそれで面倒ですよね…。