江の島エンジニアBlog
Jekyll

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

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

変更したのは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; }
}

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

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly