Jekyll2.2.0でレスポンシブにしてスマホ対応してみた

Jekyllの初期設定だと小さい画面でも画像が大きいままで, スマホで読みにくかったのでレスポンシブ対応を行いました.

2014-08-12 by haracane

変更したのはCSSだけで

css/main.css

@media screen and (max-width: 600px) {
  .post-content img { width: 480px; }
}

@media screen and (max-width: 480px) {
  .post-content img { width: 400px; }
}

@media screen and (max-width: 400px) {
  .post-content img { width: 340px; }
}

@media screen and (max-width: 340px) {
  .post-content img { width: 280px; }
}

というように画面幅に応じて画像の幅を設定してあげればレスポンシブになります.

設定例はこのカルボナーラをどうぞ. ブラウザの幅を変えるとそれにあわせて写真のサイズが変化します.