東京のホームページ制作会社・web制作会社
株式会社シンシエイト

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が使えそうなポイントを考えてみる

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

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

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

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

三上 龍志
この記事を書いた人
三上 龍志
株式会社シンシエイト代表。青学中退(尾崎豊ではない)から16年間IT・web一筋。学生起業時から潰した事業は数知れず。「人生を面白く」がテーマ!一人旅 / 筋トレ / Nuno Bettencourt / 千里眼 / 二娘 / 白髪
関連する記事
さよならスパム!ワードプレスのAkismetプラグインの設定・アクティベート方法
WPプラグイン
WP必須プラグイン!TinyMCE Advancedの使い方・設定方法
WPプラグイン
WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法
WPプラグイン
YARPPのデザインテンプレートを自作に変更する方法(制作者向け)
WPプラグイン
WordPress Popular Posts(WPP)の使い方とオススメの設定方法
WPプラグイン
NO IMAGE
WPプラグインJetpackでオススメの厳選10の機能と設定方法
WPプラグイン
Yet Another Related Posts Plugin(YARPP)のオススメ設定と機能概要
WPプラグイン
【YARPP】関連スコア設定のタイトルと内容を「検討する」に変更する方法(上級者向け)
WPプラグイン
NO IMAGE
WPプラグインのAll in One SEO Packでサイトマップ生成時のエラー解決策
WPプラグイン
YARPPの表示位置を任意の場所に変更する方法(上級者向け)
WPプラグイン
株式会社シンシエイト ブログ バックエンド WPプラグイン 2枚の画像を比較するWordPressプラグインTwentyTwentyの使い方

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。

お電話でのお問い合わせはこちら

現在リモートワーク推進中のため、お電話が繋がりにくくなっております。
受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。