画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグインBefore-After Viewerが有料だけどすごい!

webデザイン

当スリームデザインのブログではフォトショップ技術などを紹介しており、加工前と加工後のイメージをgifアニメーションで画像を入れ替えて比較させたりしてました、しかしgifだと画質が極度に落ちるため何か良い方法は無いかと模索していたところ・・

画像上でカーソルをなぞることでビフォアーアフターのイメージ比較ができるワードプレスプラグインBefore-After Viewer】がすごいので早速12$(約1500円)で購入し実装してみました。プレビューは ↓ 最下部で確認できます。

このプラグインを使えば、フォトショップ技術だけではなく美容系ダイエット記録メイク技術部屋の片づけ昼夜の景色季節の変化などさまざまな用途に応じたビフォアーアフターの画像比較が可能になり重宝しそう。

Before-After Viewerプラグインのアップロード

ダウンロードしたzipを解凍するといくつかのファイルが入っているので、その中の【_wordpress_plugin】のフォルダに格納してある【wpw_ba_vlewer.zip】をさらに解凍し、wpw_ba_vlewer】のフォルダごとpluginsディレクトリにアップロード。

Before-After Viewerアップロード

ワードプレスの管理画面でWPW-Before/After Pluginを有効化すると、投稿・ページ画面のエディタにボタンが追加されます。

ビフォアーアフター画像の設定の仕方

設定はめちゃ簡単。エディターに追加された【Add B/A Viewer】を押すとコードが入力されるので、AFTER_PATH】をビフォアー画像のURLに、BEFORE_PATH】をアフター画像のURLにそれぞれ変更するだけでOKっ!(※2枚の画像は同じサイズで統一)

画像のパスへ変更

さらにAdd B/A Image】ボタンで画像を追加したりオプションの設定などもあるので必要に応じて活用することが可能です。

ビフォアーアフターイメージのプレビュー

でもこれ実装してからスパムコメントが増えた気が・・?スリームデザインは現在フェイスブックコメント欄にカスタムしてるので何の影響もないのですが使用はご自身の判断で。

ちなみに ↑ の加工方法はこちら ⇒ ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

スリームデザイン

2,760,569 views

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に...

プロフィール

ピックアップ記事

関連記事一覧

小笠原広記

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインと玄米ご飯。

 

フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。

 

ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。