追記：2020・02.02時点で不具合でうまく表示されていません。
画像をただ横並びにして表現すると、サイズがどうしても小さくなり比較がわかりにくい。もっとカッコよく表現する方法はないかな～、と思うなら「TwentyTwenty」が間違いない！
Photoshopなどで画像の「加工前」「加工後」などの表現であったり、よくあるリフォームなどのビフォー・アフターなどなど、さまざまなシーンにおいても使い道があるので、「導入するべきワードプレスプラグイン」の中の一つだと思います。
ですので、導入方法から設定までを簡単に説明します。
[twentytwenty]
[/twentytwenty]
まずは導入方法から
ワードプレスの「ダッシュボード」の中にある「プラグイン」にカーソルを持っていき、「新規追加」をクリック。
プラグインの検索窓に「TwentyTwenty」と入力すれば、自動で検索結果が出てきます。もし自動で出ない場合は「Ｅｎｔｅｒ」で検索結果を出してください。
検索結果が出たら「今すぐインストール」をクリック。
インストールが無事に終わったら、「有効化」をクリックし、TwentyTwentyの機能を発動。
これで、インストールと有効化が完了。
プラグインのダウンロードサイトからダウンロードする場合は↓から、ダウンロードします。
ダウンロードをしたら、ワードプレスのダッシュボード画面から先ほどのように「プラグイン」⇒「新規追加」をクリックし、こんどは「プラグインのアップロード」を選択します。
「ファイルを選択」をし、先ほどダウンロードした「TwentyTwenty」を選択します。選択したら「今すぐインストール」をクリックし、「有効化」すればＯＫです。
アップロードする際の注意点としては、ダウンロードしたファイルは「zip」ファイルにしておくこと。というのも、解凍されているファイルではワードプレス管理画面からアップロードができないため・・・（zipファイルにする方法はこちら）
こんなやつにしておくこと。
使い方
使い方は非常に簡単で、投稿記事のテキスト画面で、↓のショートコードの間に画像を２つ入れるだけです。
[[twentytwenty]画像①＜img~①＞画像②＜img~②＞[/twentytwenty]]
ショートコードで囲んだ、画像①＜img~①＞がBeforeになり、画像②＜img~②＞After側になります。
これだけで、↓このように簡単に完成です。
[twentytwenty][/twentytwenty]
以上、「twentytwenty」の使い方の説明でした。これに似たプラグインは他にもありますが、画像にマウスオンしたときBefore、Afterが分かりやすく表示されるので比較させたい場合、このプラグインのほうがイイかなと。
