横幅がある大きな画像をスクロールで見せる

アメブロで、私がよく使うテクニックとして、記事の幅よりも横幅のある画像をインラインフレーム風のスクロールバー付の窓で見せることをよくやっている。

最近、これがスマホではどう見えているんだろうと気になって、どちらでも思い通りの表示になるようにcssの覚書をしておく。


まず、画像分割ソフトで、それぞれ分割した画像の横幅が600px以下になるように、何分割かする。

例えば、6000px x 4000px の画像なら、600px x 4000px ずつに分割して10枚の画像とする。

分割される画像は等幅になることが望ましい。

なぜかは判明していないのだが、等幅でないものがうまくいってないケースが見受けられたから。

また、これらの画像は元画像がjpeg形式であったとしても、分割したものはpng形式で保存するのが望ましい。

jpegは劣化するので、もし結合部分に劣化が出てしまうと、連結部分に違和感がでてしまって、台無しになる可能性があるからです。

とりあえず、分割した画像が何枚であろうと関係ないのですが、左からpic0.png、pic1.png、pic2.pngの3枚を例に話を進める。


アメブロに画像をアップロードしたら、オリジナル表示で記事に埋め込む。

<a href="http://…/pic0.png"><img src="http://…/pic0.png" /></a>
<a href="http://…/pic1.png"><img src="http://…/pic1.png" /></a>
<a href="http://…/pic2.png"><img src="http://…/pic2.png" /></a>

のような構造になっていることだろう。

上記赤文字部分であるAタグは、そもそも拡大表示とはならないので不要となり消す。

<img src="http://…/pic0.png" />
<img src="http://…/pic1.png" />
<img src="http://…/pic2.png" />

これらの画像のマージンを0、下側の隙間を無くすCSSを記述する。

<img src="http://…/pic0.png" style="margin: 0px; vertical-align: bottom;" />
<img src="http://…/pic1.png" style="margin: 0px; vertical-align: bottom;" />
<img src="http://…/pic2.png" style="margin: 0px; vertical-align: bottom;" />

つぎに、これらの画像を横並びにするためにDIVでくくる。

<div style="width: auto; height: auto; display: inline-block; white-space: nowrap;">
<img src="http://…/pic0.png" style="margin: 0px; vertical-align: bottom;" />
<img src="http://…/pic1.png" style="margin: 0px; vertical-align: bottom;" />
<img src="http://…/pic2.png" style="margin: 0px; vertical-align: bottom;" />
</div>

これを、ブログの適当な大きさの窓枠（下のサンプルでは横600px、縦400pxにしてある）内に表示させるために更にDIVでくくる。

<div style="width: 600px; height: 400px; overflow: scroll;">
<div style="width: auto; height: auto; display: inline-block; white-space: nowrap;">
<img src="http://…/pic0.png" style="margin: 0px; vertical-align: bottom;" />
<img src="http://…/pic1.png" style="margin: 0px; vertical-align: bottom;" />
<img src="http://…/pic2.png" style="margin: 0px; vertical-align: bottom;" />
</div>
</div>

class名やid名を付けて、styleタグで一括に書いてもいいので、お好きな様にどうぞ。


Androidスマホでは、上記のような仕組みだと、スクロールバーがなくて、指でなぞるだけで、画像をスクロールさせることができるが、現状このままではWindowsではスクロールバーを操作するしか手立てがない。

もしJavascriptでドラッグで画像を上下左右にスクロール出来る仕組みを埋め込めばよいのだが、そこまでする必要があるかと言われると困るね。