WordPressプラグイン TwentyTwenty

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

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

Sponsored Links

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

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

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

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

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

TwentyTwenty デフォルト

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

TwentyTwenty マウスオーバー時

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

TwentyTwenty 左にスクロール

右にMAXドラッグ

TwentyTwenty 右にMAXドラッグ

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

TwentyTwenty 左に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 インストール画面

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

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

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

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

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

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

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

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

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

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

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

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

三上 龍志
Cain 代表。1985年仙台生まれ、東京育ち。趣味は旅。 ウェブに携わって12年。ウェブデザイン・コーディング・システム開発・ディレクター・営業・運用コンサルティングなど、ウェブ制作に関する一通りを行なってきました。ウェブを使ったブランディングと集客・顧客の囲い込みなどをご提案しています。(制作もします。)