【WordPress】2枚の画像をBefore/After形式でスライド表示できる「TwentyTwenty」を導入してみた!

TwentyTwenty

どうも、いのがぶ(@inogabu)です。

WordPressは自分好みのプラグインを導入して、カスタマイズできるのが良いところ。特に商品レビューは画像を多く用いることがありますが、スライドしてBefore/Afterみたいに表示できると一段と格好いいブログに仕上がるように感じます。

そこで、WordPress用プラグイン「TwentyTwenty」を導入したので使って見たいと思います。

TwentyTwentyとは

2つの画像の違いを表示するためにフェードイン形式で表示させるためのプラグイン。

公式サイトにはざっくりと書いてありますが、実際にやってみるとこんな感じ。

商品の変化を紹介したい時に用いる表示方法には多用したいプラグインです。しかも、プラグインを導入するだけで簡単にできます。

TwentyTwentyの設定

TwentyTwenty」で2枚の画像をスライドさせるには、「テキスト」に下記のコードを記述する必要があります。

画像を入れたいところに始点となる「[twentywenty]」と、終点となる「[/twentytwenty]」を書きます。[]も忘れないように。

最後に、いつものように「メディアを追加」から2枚の画像を選択します。画像のHTMLが2つ表示されることになりますが、最初に差し入れた方が左側になります。

操作は以上。

ただし、「ビジュアル」での作業に戻ってみると、2枚の画像は連なって表示されているだけなので、「プレビュー」で確認する必要があります。

以上、「TwentyTwenty」を導入してみたでした。

関連商品

%d人のブロガーが「いいね」をつけました。