画像をただ横並びにして表現すると、サイズがどうしても小さくなり比較がわかりにくい。もっとカッコよく表現する方法はないかな~、と思うなら「TwentyTwenty」が間違いない!

Photoshopなどで画像の「加工前」「加工後」などの表現であったり、よくあるリフォームなどのビフォー・アフターなどなど、さまざまなシーンにおいても使い道があるので、「導入するべきワードプレスプラグイン」の中の一つだと思います。

ですので、導入方法から設定までを簡単に説明します。

[twentytwenty]
[/twentytwenty]

まずは導入方法から

ワードプレスの「ダッシュボード」の中にある「プラグイン」にカーソルを持っていき、「新規追加」をクリック。

プラグインの検索窓に「TwentyTwenty」と入力すれば、自動で検索結果が出てきます。もし自動で出ない場合は「Enter」で検索結果を出してください。

検索結果が出たら「今すぐインストール」をクリック。

インストールが無事に終わったら、「有効化」をクリックし、TwentyTwentyの機能を発動。

これで、インストールと有効化が完了。

プラグインのダウンロードサイトからダウンロードする場合は↓から、ダウンロードします。

TwentyTwentyダウンロード

ダウンロードをしたら、ワードプレスのダッシュボード画面から先ほどのように「プラグイン」⇒「新規追加」をクリックし、こんどは「プラグインのアップロード」を選択します。

「ファイルを選択」をし、先ほどダウンロードした「TwentyTwenty」を選択します。選択したら「今すぐインストール」をクリックし、「有効化」すればOKです。




アップロードする際の注意点としては、ダウンロードしたファイルは「zip」ファイルにしておくこと。というのも、解凍されているファイルではワードプレス管理画面からアップロードができないため・・・(zipファイルにする方法はこちら

こんなやつにしておくこと。

使い方

使い方は非常に簡単で、投稿記事のテキスト画面で、↓のショートコードの間に画像を2つ入れるだけです。

[[twentytwenty]画像①<img~①>画像②<img~②>[/twentytwenty]]

ショートコードで囲んだ、画像①<img~①>がBeforeになり、画像②<img~②>After側になります。

これだけで、↓このように簡単に完成です。

[twentytwenty]

[/twentytwenty]

 

以上、「twentytwenty」の使い方の説明でした。これに似たプラグインは他にもありますが、画像にマウスオンしたときBefore、Afterが分かりやすく表示されるので比較させたい場合、このプラグインのほうがイイかなと。