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

WordPressプラグイン TwentyTwenty

ビフォーアフターなどで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が使えそうなポイントを考えてみる

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

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

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

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

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
2005年からWeb制作に従事。システム開発ベンチャーでエンジニアとしてWeb開発、Webコンサルティング会社でマーケター・新規事業開発を経て2015年に当社を創業。顧客の成果に顧客よりも本気になることをテーマに、Webを通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
YARPPでタイトルと内容が選択できない
【YARPP】関連スコア設定のタイトルと内容を「検討する」に変更する方法(上級者向け)
WPプラグイン
tinyMCE advanced
WP必須プラグイン!TinyMCE Advancedの使い方・設定方法
WPプラグイン
さよならスパム!ワードプレスのAkismetプラグインの設定・アクティベート方法
WPプラグイン
YARPP
YARPPの表示位置を任意の場所に変更する方法(上級者向け)
WPプラグイン
WordPress Popular Postsをカスタマイズ
WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法
WPプラグイン
WordPress Popular Postsとは
WordPress Popular Posts(WPP)の使い方とオススメの設定方法
WPプラグイン
YARPP 上級編
YARPPのデザインテンプレートを自作に変更する方法(制作者向け)
WPプラグイン
WP Plugin
PHP7.3で起きるWPプラグインCrayon Syntax Highlighterのエラーを直す方法
WPプラグイン
NO IMAGE
WPプラグインJetpackでオススメの厳選10の機能と設定方法
WPプラグイン
YARPP
Yet Another Related Posts Plugin(YARPP)のオススメ設定と機能概要
WPプラグイン
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。