ビフォーアフター画像に最適のプラグイン！Twenty20 Image Before-After

2023年6月1日2023年6月3日

Tetsuya

便利な機能はどんどん使おう！

Tetsuyaです。

最近はAIによるイラストの生成や、画像補正の精度も上がり、
画像の加工や使用がますますしやすくなってきています。

実際、僕が使っているphotoshopもまだベータ版ではありますが、
AIによる画像補正が鬼のように良くなっており、

今まで仕事で一生懸命、切り抜きや合成に
どれだけ無駄な時間を費やしてきたかと思うと悲しくなります。
（時代が違うので仕方がないですが）

ということで今後は何かしら、加工前→加工後の画像イメージをブログの記事に
アップされる方も増えてくるかもしれませんので、

ビフォアーアフターの画像を表示させるのに、非常に便利なプラグイン
「Twenty20 Image Before-After」を紹介したいと思います。

実際に、このプラグインを導入すると、
こんなビフォアーアフターの画像を簡単に作ることができます。

ちなみにサンプルの画像はphotoshopに新たに追加される
“ジェネレーティブ塗りつぶし”というAI機能を使って数秒で加工した画像です。

加工したいところを選択してキーワード入力するだけ。
数秒待てば加工が仕上がり、しかもバリエーションを3つ用意してくれます。

まだまだ完璧とは言えませんが、かなり精度が上がっててすごいです。
無駄にphotoshopで遊んでしまいそう（笑）

CanvaにもAI機能が実装されてますが、
こうして各社ツールに実装されるAI機能を見ていくのも楽しいですね。

Twenty20 Image Before-Afterの使い方

ということで、今回はphotoshopではなく「Twenty20 Image Before-After」という
ワードプレスのプラグインの紹介記事となりますので、

簡単に使い方だけ解説します。

プラグインのインストール方法については、改めて解説しませんので、
「Twenty20 Image Before-After」と検索してまずは有効化してくださいね。

ちなみにこのプラグインはクラシックエディタ専用です。

ブロックエディタがデフォルトのワードプレステーマの場合、
「Twenty20 Image Before-After」はショートコードでしか利用ができませんが、

ショートコードさえ設定すれば、きちんと使うことができますので、
ブロックエディタを使われている方はぜひ参考にしてください。

Twenty20 Image Before-Afterをブロックエディタで使う方法

SWELLのようにブロックエディタがデフォルトのワードプレスをお使いの場合は、
以下の手順で「Twenty20 Image Before-After」を利用できます。

STEP

before、Afterの画像を2枚用意する

まず最初にbefore、afterとなる2枚の画像を用意しましょう。
画像サイズは2枚とも揃っているのがベターです。

STEP

画像のIDを確認してメモを取る

画像の準備ができたらメディアライブラリに画像をアップロードし、
画像IDを控えましょう。

ちなみに画像IDはメディアライブラリの画像をクリックした際に表示される
添付ファイルの詳細の上にあるURL内“？item＝”の後ろの数字です。

上記の画像IDは、14074ということになります。

STEP

ショートコードを入力する

ビフォアフターで表示させたい2枚の画像IDを控えたら、以下のショートコードを入力します。

[twenty20 img1="" img2="" direction="horizontal" offset="0.5" align=“none” width=“100%” before="Before" after="After" hover=“false”]

↓こんな感じで上記のショートコードを入力します。

STEP

画像IDをショートコードに入力する

ショートコード内に、img1＝“”、img2＝“”にある“”内に、先ほど控えた画像IDを、Beforeはimg1＝“”に、afterはimg2＝“”に入力します。

※先のサイプルで例えるなら、画像IDを調べた14074の画像はafterの方になりますので、
入力コードはimg2＝“14074”となります。

STEP

プレビューで確認する

ショートコードに画像IDがそれぞれ入力できたら、プレビュー画面で確認しましょう！
※SWELLを使用していてビフォアフターの画像が表示されない場合は、以下、ご確認ください。

Twenty20 Image Before-Afterで画像が表示されない時の解決法

※こちらの解決策はSWELLのみの解決策になります。

「Twenty20 Image Before-After」をインストールした直後、
ビフォアフターの画像がきちんと表示されず、表示されない理由を調べてみました。

SWELLで表示されない場合は、設定を1箇所触るだけで
きちんと表示されるようになりますので、

もしもビフォアフターの画像がうまく表示されない場合は、
ダッシュボードメニューからSWELL設定→jQueryの以下の設定

□ jQueryをwp_footerで登録する

この項目にチェックが入っていると思います。

以下の通り、チェックを外し、

変更を保存してください。

そうすれば、ビフォアフターの画像はきちんと表示されると思います。

矢印のズレを直す方法

SWELLと「Twenty20 Image Before-After」は微妙に相性が悪いのか、
実装直後だとスライダーの矢印がズレています。

スライダーの矢印が上下ずれている

スライダーの矢印調整後

気になるほどではないかもしれませんが、修正方法を記載しておきますので、
気になる場合は、以下のコードをコピペして表示を修正してください。

↓スライダーの矢印を直すCSS

/*Twenty20 スライダーの矢印位置調整*/
.post_content .twentytwenty-left-arrow {
    top: 13px;
}

ちなみに、上記CSSコードは、ダッシュボードメニューから
外観 → カスタマイズ → 追加CSSの項目にコピペして“変更を保存”してください。

ショートコードの設定方法

「Twenty20 Image Before-After」はブロックエディタの場合、
以下のショートコードのみでの設定にはなりますが、

[twenty20 img1="" img2="" direction="horizontal" offset="0.5" align=“none” width=“100%” before="Before" after="After" hover=“false”]

ショートコードを調整すれば、簡単に設定を変更できます。
コードのカスタマイズ方法をまとめておきますので、参考にしてください。

なお設定は各“ ”の部分にそれぞれ設定値を入れるだけです。

ショートコードの項目	設定値	詳細
img1=””	左画像のID	beforeに該当する画像
img2=””	右画像のID	afterに該当する画像
ofset=””	0～1	スライダーの初期位置
width=””	px or %	画面全体に対する画像の横幅
direction=””	horizontal（横） or vertical（縦）	スライダーを動かす方向
before=””	テキスト	左画像のキャプション
after=””	テキスト	右画像のキャプション
algin=””	none or right or left	表示位置
hover=””	false or true（カーソル追随）	スライダーの動かし方