TwentyTwentyの設定と使い方：2枚の画像をスライドで比較

TwentyTwentyは、2枚の画像をスライド（Before・After）で比較できるプラグインです。

用途は限られていますが、写真ブログでレタッチ前後の写真を比較させたい時に使うと便利です。

設定と使い方

プラグインを有効化するだけで使えます（追加される設定画面はありません）。

使い方

下記ショートコードで2枚の画像を囲むだけで機能します。

例えば、現像前と現像後の写真を比較すると、下記の様に表示されます（中央スライダーの矢印をドラッグして、左右に動かせばBefore・Afterを切り替えることができます）。

1枚目の画像が左「Before」、2枚目の画像が右「After」に表示されます。

ちなみに、メディアにリンクを付けても無効化されます。また、サイズ（縦横比）の異なる画像を使用すると、レイアウトが崩れるので、できるだけ同じ大きさ（寸法）の画像を使って下さい。

中央寄せにするCSS

中央に配置したい時は、「スタイルシート（style.css）」に下記CSSを追加して下さい。

ブログの横幅よりも小さな画像を比較する際に見栄えがよくなります。

最後に

2枚の画像を比較させたい時は、画像を縦に並べたり、横に並べるよりも、重ねてスライドさせた方が比較しやすいのでおすすめです。特に、写真の現像前と現像後の比較には最適です。

ただ、画像遅延読み込み系のプラグインと相性が悪いので、一緒に使う場合は「TwentyTwentyのクラス属性だけ除外する」「TwentyTwentyの画像だけ除外する」等して下さい。