SIRIUSでビフォー＆アフター画像をスライダーで比較する機能
副業（アフィリエイト）サイトを運営する際、ジャンルによっては使用前・使用後の画像を使う機会があるかと思います。
例えばリフォーム前・リフォーム後とか洗浄前・洗浄後とかメイク前・メイク後とか修正前・修正後とかいろいろありますね。
こんなとき、画像を2枚並べて比較するのももちろんアリですが、2枚の画像を重ねて見較べるとどこがどのように変わったのかがよりわかりやすくなる場合もあります。
スライダー画像比較機能のデモ
このコンテンツ（記事）の機能はカスタムテンプレート【Volar】に搭載してます。
たとえばコチラ↓に2枚の画像があります。
（※自作の猫用ハウスの画像です）
見較べればどこがどう変わったかはなんとなくわかりますでしょ。
今度は2枚の画像を分けずに重ねて見てみます。
右下にあるスライダーをマウスで移動させると2枚の画像が消えたり現れたりします。
右下にあるスライダーを指でドラッグ移動させると2枚の画像が消えたり現れたりします。
Before
After
画像を並べて見較べた場合は視点の移動が伴うため、どこがどのように変わったのかがすぐには気づきにくいモノです。
しかし上のサンプルのような見せ方であれば、サイト訪問者に比較のポイントを訴えやすいと言えます。
しかも縦に長い画像だった場合は、画面の小さいiPhone（スマホ）では画面をスクロールせずに比較することができるので、このテクニックは使い方によってはサイト訪問者により強い印象を与えることができます。
カスタムテンプレート【Volar】には、ベースとなるスクリプトやスタイルが搭載済みとなってます。
そのためこちらからお渡しするコードを所定の位置にコピーペーストするだけで、上のサンプルのような比較画像が簡単に再現できます。
ただし用意していただく2枚の（前後）画像は同じサイズである必要があります。
またできれば2枚の画像とも同じ位置から撮影したモノの方が、前後の比較がよりわかりやすくなるというものです。
inoreader