HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

【WordPress】劇的ビフォーアフターを演出するスライドギャラリープラグインTwentyTwenty

2014-04-23_1126
サービス前後の劇的な変化を示すビフォーアフター画像は、自社サービスのアピールに欠かせません。これをうまく演出してくれるスライドプラグイン TwentyTwentyがあったので紹介します。

プラグインTwentyTwentyの使い方

まず、WordPress管理画面左サイドバーから、TwentyTwentyをインストール有効化します。

次に、ビフォーアフターの画像を表示したい投稿の編集画面で、元画像を2枚をアップロードして投稿に挿入します。

このとき2枚の写真のサイズを全く同じにしておくと、劇的さが際立つのでオススメです。

そして、今アップロードした2枚の画像を[twentytwenty]と[/twentytwenty]で囲みます。

テキストエディタならこんな感じです。

[twentytwenty]
<img class="aligncenter size-full wp-image-173" src="http://beembeem2006.xsrv.jp/wp/wp-content/uploads/2014/02/2014-04-23_11021.jpg" alt="2014-04-23_1102" width="325" height="345" />
<img class="aligncenter size-full wp-image-174" src="http://beembeem2006.xsrv.jp/wp/wp-content/uploads/2014/02/2014-04-23_11031.jpg" alt="2014-04-23_1103" width="325" height="345" />
[/twentytwenty]

この状態で保存すれば、ビフォー・アフター・スライダーの完成です。

実際の表示

ビフォー・アフター・スライダーにマウスを持っていくと、色調が暗くなり、「before」「after」の文字が浮かび上がります。
2014-04-23_1132
中央の矢印アイコンをマウスでドラッグすると、ビフォーとアフターの境界線が動きます。
2014-04-23_1133

ビフォーアフターの写真を単に2枚並べるよりも何処がどう変わったかがとても鮮明に分かりますね。

実際に試してみたい方はこちらのデモサイトが便利です。

[img-link url=”http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/” title=”jQuery twentytwenty Plugin Demos”]

こんな方にオススメ

ビフォーアフターの写真は何かを綺麗にするようなサービスをされている個人法人のサイトでは結構使えるのではないでしょうか。

  • エステの施術前・施術後
  • リフォームの前と後
  • クリーニングの前と後
  • 掃除の前と後
  • 画像補正の前と後
  • 車修理の前と後

…などなど色々使えそうです。

皆さんもいかがですか。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: