横幅の広い画像を記事内で横スクロール表示させる方法

アメブロの記事内で、横幅の広い画像を記事内で横スクロール表示させる方法です。

アメブロでは、記事に画像を貼り付けた時、その画像の幅が記事幅よりも大きい時、はみ出さないように縮小表示されます。

ですが、例えばパノラマ写真のような横長の画像の場合など、自動縮小に任せると小さくなりすぎる場合もありますので、そういった場合には、画像だけを横スクロールして全体を見れるようにしてみましょう。

↓このように横スクロールできます。

↓実際に貼り付けたのがこちら。

パソコンの場合はスクロールバーを左右に、スマホの場合は画像をタッチした状態で左右に動かすと、横スクロールして画像全体を見ることができると思います。

画像を記事内で横スクロール表示させる方法

では、以下に手順をご説明します。

記事内の画像を表示したい位置に、以下のようなタグを記述して下さい。

<div style="overflow:auto"><img style="width:auto;max-width:none;height:【画像の高さ】;" src="【画像のURL】"></div>

最新版エディタの場合は、『HTML表示』モードでお願いします。

【画像のURL】の部分には、表示したい画像のURLを記述して下さい。

画像のURLの取得方法がわからない場合は、こちらの記事を参考にして下さい。

【画像の高さ】の部分には、表示する画像高さを記述して下さい(例:360px)。

高さは、画像の実際の高さではなく、表示する高さを設定します(つまり、拡大縮小せずに表示したい時は画像の実際の高さを設定します)。

なお、この方法は、記事だけではなくフリースペースや、メッセージボードでも同様に行うことが可能です。

注意事項

スマートフォンで見ると、スクロールバーが表示されませんでしたので、横スクロールできることを併記しておいたほうが良いと思います。