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」を利用できます。
まず最初にbefore、afterとなる2枚の画像を用意しましょう。
画像サイズは2枚とも揃っているのがベターです。
画像の準備ができたらメディアライブラリに画像をアップロードし、
画像IDを控えましょう。
ちなみに画像IDはメディアライブラリの画像をクリックした際に表示される
添付ファイルの詳細の上にあるURL内“？item＝”の後ろの数字です。
上記の画像IDは、14074ということになります。
ビフォアフターで表示させたい2枚の画像IDを控えたら、以下のショートコードを入力します。
[twenty20 img1="" img2="" direction="horizontal" offset="0.5" align=“none” width=“100%” before="Before" after="After" hover=“false”]↓こんな感じで上記のショートコードを入力します。
ショートコード内に、img1＝“”、img2＝“”にある“”内に、先ほど控えた画像IDを、Beforeはimg1＝“”に、afterはimg2＝“”に入力します。
※先のサイプルで例えるなら、画像IDを調べた14074の画像はafterの方になりますので、
入力コードはimg2＝“14074”となります。
ショートコードに画像IDがそれぞれ入力できたら、プレビュー画面で確認しましょう！
※SWELLを使用していてビフォアフターの画像が表示されない場合は、以下、ご確認ください。
Twenty20 Image Before-Afterで画像が表示されない時の解決法
「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（カーソル追随） | スライダーの動かし方 |
ofset=””はスライダーの初期位置の設定。デフォルトでは0.5になっているため、スライダーは画像の中央にあります。
direction=””はスライダーの向き。デフォルトではhorizontalになっているので、左右のスライドになりますが、verticalに設定すると、上下のスライドに変更できます。
※SWELLでverticalは反映されないかもです。verticalにすると何も画像が表示されなくなりました。
before=””、after=””のキャプションはそれぞれ画像にカーソルを合わせた際、画像の下隅にbefore、Afterと表示されると思いますが、そのテキスト部分を変更できます。
まとめ
今回は、ビフォアフターの画像を簡単に表示させることができる便利なプラグイン
Twenty20 Image Before-Aをご紹介しました。
実はこのビフォアフターの画像、
ずっと前から“FF14（ファイナルファンタジー14）”のパッチノートで、
結構早い段階で使われ始めたのですが、ずっといいなと思って見ていました。
まさか、ワードプレスで簡単に表示させるプラグインがあるとは知らず、
先日、たまたまphotoshopのジェネレーティブ塗りつぶしを調べてた際に、
あれWPサイトで普通に表示させる方法あるの？と
実際に使用しているサイトがあったため、改めて調べて実装しました。
僕がいつも大事にしていることは、
気になることはまず調べる。そして試す。
ということ。
今回もとりあえず、たまたま記事で見つけた際に、
どうやってビフォアフターの画像を表示させているのか？
いろんな記事を見てプラグインで表示可能と知り、テストサイトでプラグインが実際に使えるか？
検証した上でSWELLで使えるか、使えないのか？
調べて使ってみた上で、使えそうなので紹介しました。
こうした好奇心や、自分が良いと思ったものはとりあえず試す。
特にこれからはチャレンジすることが大事になると思っています。
また、同時にphotoshopのジェネレーティブ塗りつぶしも試していたので、
記事を書く際には、ビフォアフターの写真も簡単に用意できて良かったです（笑）
それにしても、本当に色々と便利な世の中になってきてますので、
使えそうなツールは“作業効率を上げるため”にガンガン使い、
本来自分がやるべきことにだけ時間を割けるようになると、
AIを恐れることなく、むしろ
AIの機能を活用したり、活用方法を学ぶのが楽しくなると思います。
AI関連の便利な機能などもあれば、このブログで紹介していきます！
