縦にも横にも画像比較ができるWordPressプラグイン「Twenty20 Image Before-After」
サイトやブログを作成していると、どうしても画像を比較したくなる時があります。
普通は写真を２枚横並びにするか縦に２枚並べるわけなのですが、それだと画像が小さくなったり比較がしづらかったりと、ユーザビリティーが悪くなりがちで正直いいことがありません。
あと、そういう連続に並べるだけの見せ方はダサい！
ってのが１番の本音だったりします（笑）
そこで今回は、比較画像を美しく表現することが可能なWordPressのプラグインを紹介したいと思います。
表現が難しいビフォーアフターの写真等が誰でも簡単に設置出来るようになるので、この機会に利用してみて下さい。
Contents
画像比較ができるWordPressプラグイン「Twenty20 Image Before-After」
>> Twenty20 Image Before-After
「Twenty20 Image Before-After」の使い方
「Twenty20 Image Before-After」のインストール
まずはWordPressの管理画面から「プラグイン」>「新規追加」で「Twenty20 Image Before-After」と検索してプラグインをインストールして有効化します。
もしWordPress上の検索結果に「Twenty20 Image Before-After」が表示されない場合は、下記のサイトからプラグインをダウンロードしアップロードすることも可能です。
>> Twenty20 Image Before-After
「Twenty20 Image Before-After」の使用方法
WordPressの管理画面から「投稿」>「新規追加」で、記事の投稿画面へといきましょう。投稿画面に「Add Twenty20」というボタンが追加されているので、使いたい時はこのボタンを押すことで利用できます。
メディアライブラリに飛ぶので、画像を２枚選択します。この時、最初選んだ画像が左側（上下の場合は上）にくるので画像を選ぶ順番には注意しましょう。選んだら右下にある「insert」を押して次のステップに進みましょう。
画像を指定する場合は同じサイズの画像を使用するようにしましょう。画像サイズが違うと比較画面が見にくくなってユーザーに不快な思いをさせる場合があります。また、画像に指定してあるURLは無視されるのでその点にも注意しましょう。
最後は比較画像のサイズや並びなどを変更する設定画面です。通常利用の場合はデフォルトのままでOKです。設定が終わったら「Insert Shortcode]を押して完了です。
それでは設定画面に関して説明していきます。
全部英語ですが、やること自体は簡単なのですぐに覚えられます。
・Width：幅（基本100%）
・Offset：スライダーの初期位置（０が左端、１が右端）
・Direction：スライダーの向き。横（Horizontal）or 縦（Vertical）
・Alignment：画像の配置位置（中央、右・左寄せ）
このプラグインのいいところは比較画像の設定が抜群に簡単なところ。
スライダーの初期位置を調整したり、縦の比較画像もボタン１つで簡単に作ることが出来ます。
「Twenty20 Image Before-After」をウィジェットに表示する方法
WordPressの管理画面から「外観」>「ウィジェット」で、ウィジェットの設定画面へといきましょう。項目に「Twenty20 Slider」というボタンが追加されているので、利用できます。
写真の選択や設定の表示方法が違うだけで、使い方は一緒です。
縦にスライドしたい場合はチェック項目にチェックし、あとはタイトルをつけたり写真を選んだりするだけです。
「Twenty20 Image Before-After」のオススメ使用方法
ではこの画像比較をするプラグインで何が出来るのか！？
こんなプラグインを使わなくても写真を２枚並べるだけでもいいじゃん？でも、ぶっちゃけそれってかなりダサいです！
ここではあなたの画像比較をワンランクアップさせる、「Twenty20 Image Before-After」のオススメ使用方法を具体例をあげて紹介していきます。
カラーとモノクロを比較
こういった写真の編集前と編集後は画像比較の定番ですね。
実際にこのブログでも画像を軽量化する記事に使用しています。
PC表示とスマホ表示の違い
パソコンよりスマホユーザーの方が圧倒的に多いです。
パソコン画面同様、スマホででもどう見えるのかが大事なのでこういう使い方もありです。
ダイエットのビフォーアフター
ビフォーアフターを比較してライザップ並みの衝撃を！
同じ場所、同じ服、同じ姿勢ならさらに分かりやすくなります。
イラストの下書きと完成品の比較
実際にこのサイトで使われているイラスト。
下書きと色がついた完成品とではかなり印象も違いますね。
こういった感じにアイデアを挙げれば色んな使用方法が出てきます。
あとは、写真をメインに取り扱っていなくても職業的に比較写真を使った方が効果的なこともあります。
例えば、、、
- ヘアーカットのビフォーアフター
- 部屋の改装前・改装後
- 簡単な２コマ漫画
- スッピンとメイク後
などなど。
このプラグインは工夫次第で様々な場面や用途で活用可能です。
ぜひ自分にあった比較画像を探してみて下さい。
同じように画像比較ができるプラグインを紹介
「Twenty20 Image Before-After」のように画像比較ができるプラグインがあります。
パッと見は同じに感じますが、使用感やちょっとした違いがあるので、こだわりたい人は両方試してみるのもいいかと思います。
画像比較ができるWordPressプラグイン「TwentyTwenty」
「TwentyTwenty」の使用方法
WordPressの管理画面から「プラグイン」>「新規追加」で「TwentyTwenty」と検索してプラグインをインストールして有効化します。見つからない場合は上記サイトよりダウンロードをすることが可能です。
インストールをして「有効化」をしたら、あとは特に設定はいりません。
下記のショートコードで比較したい画像２枚を括るだけで完了です。
分かりにくいと思うので例を出すと、
[twentytwenty]<img class=”alignnone size-full wp-image-73″ src=”https://tabi-free.net/wp-content/uploads/2018/05/eba996ad84d23d4fdae578bd6adee705.jpg” alt=”” width=”1600″ height=”1187″ />
<img class=”alignnone size-full wp-image-74″ src=”https://tabi-free.net/wp-content/uploads/2018/05/5039969faf40c49b931fbd94d8c81578.jpg” alt=”” width=”1600″ height=”1187″ />
[/twentytwenty]
こんな感じになります。
「Twenty20 Image Before-After」と何が違うのか？
どちらも使ってはみましたが、実際に投稿される比較画像に大きな違いはありません。
上記の画像は「TwentyTwenty」のものですが、左右にBefore・Afterと表示されているのが分かります。
見た目が変わるとすれば、このBefore・Afterが表示されるというくらいのもの。
あとは「TwentyTwenty」の方が有名なプラグインなので、検索するとカスタマイズの方法が見つかるくらいです。（それもBefore・Afterを消したり、枠をつけたりする程度）
個人的な感想としては、直感的に写真を選んだり設定出来たりする「Twenty20 Image Before-After」の方が断然楽です。ポチポチと選んでいけば自動でショートコードを出してくれますから。
実際のところはBefore・Afterの表示も捨て難くてどっちを使うか悩んだのですが、、、やっぱり楽な方を選んでしまいましたね！笑
まとめ
写真をメインとするサイトやブログを運営する方はぜひとも入れてほしいプラグインの紹介でした。設定画面の説明に使ったり、本当に用途は様々なので、色んな使い方を試して発見してみて下さい。
それでは今回のまとめです。
- Twenty20 Image Before-Afterの使い方
- Twenty20 Image Before-Afterのオススメ使用方法
- 類似プラグインの紹介
たかが画像比較と思うかもしれませんが、こういう小さなことが読者さんの満足度を上げたりするので、まだ使ってない人は早速導入してみましょう！
この記事へのコメントはありません。