2枚の画像を比較するWordPressプラグインTwentyTwentyの使い方

ビフォーアフターなどで2枚の画像を比較するときに使えそうなWordPressプラグインTwentyTwentyの設定や使い方をご紹介します。ユーザーがフリックやマウスで動かせるので、ユーザーも楽しいかも！

パソコンはもちろん、スマホにも対応しています。

「TwentyTwenty」ってどんなプラグイン？

2枚の写真が重なっていて、フリックやマウスのドラッグでどちらも見えるようなプラグインです。

1枚目にボケた写真、2枚目には元の写真を入れた時、読み込んだ時はこんな感じ。

左はボカした写真で、右が元の写真です。マウスオーバーすると↓

真ん中のポッチを左にドラッグ（フリック）↓

右にMAXドラッグ

1枚目の写真が表示されます。左にMAXドラッグ↓

こんな感じのプラグインです。詳しくはデモ（本家サイト）をいじって見てもらうのが一番早そうです。

デモはこちら↓

jQuery TwentyTwenty Plugin | Playground from ZURB

Need an easy way to compare to images, photographs, or designs? Our visual diff tool brings changes into focus.

TwentyTwentyの設定と使い方

ダウンロードと有効化

ワードプレス管理画面の「プラグイン」→「新規追加」と進み、検索ボックスに「TwentyTwenty」と入れると出てくるので、「インストール」→「有効化」する。

2年前のプラグインというのと、バージョンテストがされてないので、今後もしかしたら使えなくなるかもしれませんが、とりあえず2017年1月現在は問題なく使えます。

設定は特にナシでそのまま記事投稿へ

使い方はすごく簡単で、写真の前に[twentytwenty]と入れて2枚の画像を挟んで[/twentytwenty]と入れるだけ。

[twentytwenty]
【ここに画像1】
【ここに画像2】
[/twentytwenty]

すごく簡単ですね。この[〜〜〜]というのはワードプレス独自のショートコードというものです。

同じサイズの画像にしないと変な見た目になるので気持ち良くないです。

TwentyTwentyが使えそうなポイントを考えてみる

一番わかりやすいのはビフォーアフターですよね。劇的ビフォーアフターなんかはすぐに使いやすい。

その他にはなんでしょう、間違い探しなんかも考えたけど、スクロールですぐにわかっちゃいますね。どちらかの画像の見えないところに何か隠しておいて。。。見つけたら嬉しい何か？みたいな感じでしょうか。

ラーメン食べ終わった丼の底に「明日もお待ちしております。」的なやつしか思いつきません。。。

何か面白い方法が思いついた方は、ぜひ教えてください。