自動で画像をリサイズ！投稿画像をレスポンシブデザインにする方法！

はてなブログに画像を投稿すると、その画像は「アダプティブデザイン」となりますよね。アダプティブデザインとは静的デザインのことです。いわゆるレスポンシブでないということですね。ブラウザを縮めると画像がはみ出てしまいます。

せっかくはてなブログをレスポンシブデザインに作り変えても、画像がはみ出していたら気になりますね。そこで投稿した画像もレスポンシブに出来るのか調査してみましたところ、簡単にレスポンシブに設定できましたので、ご紹介いたします。

投稿画像をレスポンシブにする方法

まずは「ビフォー」「アフター」をご覧ください。

ビフォー

しっかりと画像がはみ出ています。

アフター

綺麗におさまりました。

いかがでしたでしょうか。しっかりとはみ出していた画像も、このように綺麗に画像がおさまります。この設定方法では、投稿した画像が横にはみ出ている場合に、自動で画面に合わせて「調整した画像」を表示してくれます。

設定方法

それでは設定方法をご紹介します。簡単３ステップです。

１．「ダッシュボード」から「デザイン」→「カスタマイズ」を選択してください。

２．そして「{}デザインCSS」に次のように記載してください。位置はどこでも構いません。

#wrapper img {
    max-width: 100%;
}

３．書き終えたら、「変更を保存する」ボタンを押下してください。

これで完了です。画像が綺麗におさまるようになります。ちなみに、次のようなやり方もあるようなので試してみました。しかし結果として設定できませんでした。

#wrapper img {
    object-fit: contain;
}

この方法は「CSS3」から新しく追加されたものなので、おそらく「はてなブログ」は「CSS3」に対応していないのでしょう。レンタルサーバーなどをご利用の方は試してみると良いかもしれません。

それでは今回の記事はこの辺で。