画像比較におすすめ!「TwentyTwenty」の使い方

ビフォーアフターの画像比較をするときに、おすすめなプラグインが「TwentyTwenty」です。プラグインをダウンロードして、ショートコードの中に画像を並べるだけなので、設定も簡単です!
設定方法をご紹介しますので、ぜひ試してみてください!

このプラグインを使用すると、以下のような画像比較ができます。

 

[STEP1] プラグインをダウンロードする

WordPress管理画面で、プラグイン>新規追加から、「TwentyTwenty」を検索し、ダウンロードしましょう。

ダウンロードが完了したら、そのままプラグインを有効化してください。

[STEP2] ビフォーアフターで比較したい画像を用意する

今回は下の画像を使用します。

[STEP3] ショートコードの中にimgタグを並べる

HTML [twentytwenty] <img src="hogehoge" alt="hoge"> <img src="fugafuga" alt="fuga"> [/twentytwenty]

実際に設定すると、以下のようになります。


設定は以上です。簡単に使用できますね!
あとはお好みで、画像に枠をつけたり、影をつけたり、CSSでデザイン調整すると良いと思います。(このブログではデフォルトから設定変更していません)

コメントを残す