東京のホームページ制作会社・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が使えそうなポイントを考えてみる

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

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

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

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

三上 龍志
この記事を書いた人
三上 龍志
元パンパースのCMモデルがネタの株式会社シンシエイト代表。システムエンジニア出身営業育ち。ビーフジャーキー作りが趣味。webが大好きな2児の父。
関連する記事
WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法
WPプラグイン
NO IMAGE
WPプラグインJetpackでオススメの厳選10の機能と設定方法
WPプラグイン
PHP7.3で起きるWPプラグインCrayon Syntax Highlighterのエラーを直す方法
WPプラグイン
さよならスパム!ワードプレスのAkismetプラグインの設定・アクティベート方法
WPプラグイン
Yet Another Related Posts Plugin(YARPP)のオススメ設定と機能概要
WPプラグイン
WP必須プラグイン!TinyMCE Advancedの使い方・設定方法
WPプラグイン
YARPPのデザインテンプレートを自作に変更する方法(制作者向け)
WPプラグイン
【YARPP】関連スコア設定のタイトルと内容を「検討する」に変更する方法(上級者向け)
WPプラグイン
YARPPの表示位置を任意の場所に変更する方法(上級者向け)
WPプラグイン
NO IMAGE
WPプラグインのAll in One SEO Packでサイトマップ生成時のエラー解決策
WPプラグイン
株式会社シンシエイト ブログ バックエンド WPプラグイン 2枚の画像を比較するWordPressプラグインTwentyTwentyの使い方

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

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

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

受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。