WordPress

WordPressで2枚の画像を比較!スライド表示させるプラグインは手軽で何かと便利

  1. ホーム >

WordPressで2枚の画像を比較!スライド表示させるプラグインは手軽で何かと便利

WordPressを使用していて、こんなことを思ったことはないですか?

あまねこ主
2枚の画像や写真を使って比較(ビフォー・アフター)表示させたいなあ。なにか良い方法とか便利なプラグインないかなー?

そんな時にこそ大活躍間違い無しの便利なプラグインがあるので紹介します。

※WordPress5.2.3、Gutenberg(Classic Editor環境)でのレポートになります。

プラグイン「TwentyTwenty」

その名も「TwentyTwenty」

WordPressで比較表示したいときに大活躍のプラグインです。まずは、この「TwentyTwenty」というプラグインを使うとどんな感じで表示できるのかをお見せします。

例として、同じ写真ですがモノクロバージョンとカラーバージョンを用意したのでプラグインなしの通常2パターンと、プラグイン「TwentyTwenty」を使用したときの違いを説明します。

2枚の比較表示・通常パターン1

WordPressでメディアを基本の形で挿入した場合は、下記にように大きく2枚の写真が縦に並びます。大きく表示できるので視覚的には良いのですが2枚の写真を比較するとなると縦に並ぶという方法は使いにくい場合もあります。

2枚の比較表示・通常パターン2

続いて、レイアウト挿入で2枚の写真を横に並べて表示させる方法。横一列で表示されることで、視野的に2枚の写真を一度に見ることができるので比較としては分かりやすい場合がありますが、サイズが小さくなるというデメリットがあります。

2枚の比較表示・プラグインを使用パターン

この記事で紹介するプラグイン「TwentyTwenty」を使用すると、通常パターンの両方の良さを残しつつ2枚の比較写真を挿入できます。

今回使用した写真、モノクロバージョンとカラーバージョンが重なることで1枚の写真表示になります。このプラグインの特長的機能が中央のスライド部分を左右へ動かすと1枚目、2枚目を交互に表示することが可能。

では、真ん中に表示されている○部分を動かしてみてください。

スマホの場合は○をタッチしたまま左右へ動かす。パソコンの場合は○をクリックしたまま左右へ動かす。

あまねこ主
どう?無事動いたかな?今回はモノクロバージョンとカラーバージョンだけど使い方によっては色々な写真や画像使えるよね!

 

プラグイン「TwentyTwenty」の使い方

使い方はとてもシンプルなので初めての方でもすぐに活用して使うことが出来ます。TwentyTwentyプラグインはダウンロードしても設定項目などはありません。

いつも通り、メディア追加から比較表示させたい写真や画像を2枚選び、上記のショートコードで囲むだけで使用できます。

もちろん、ビジュアルエディターでも使用できます。テキストエディター(HTML)で見ると下記のようになりますね。

1枚目の写真や画像が左側のビフォー、2枚目の写真や画像が右側のアフターになります。

注意点は、2枚の画像サイズは同じにしてください。

プラグインのダウンロード方法

WordPress管理画面のプラグイン新規追加からキーワードに【TwentyTwenty】と入力。画像にある「TwentyTwenty」プラグインをダウンロードしてください。

赤線を引きましたが、実は最終更新は4年前でバージョン次第では未検証と表示される場合があります。私はWordPressバージョン5.2.3ですが不具合は起きていません。

私の場合ですが、使っている遅延読み込み系のプラグインとの相性が悪く写真が読み込まれませんでした。TwentyTwentyを使用する記事のみ遅延機能をOFFにしています。遅延読み込み系のプラグインを使用している方は注意しましょう。

 

まとめ

プラグイン「TwentyTwenty」は使い方によっては色々な使用用途があります。ビフォー・アフターとしてとても使いやすいので是非あなたらしい使い方を発見してみてください。

少し待った!WordPressのfunctions.php編集するなら「Code Snippets」が安全で安心ですよ

続きを見る

Copyright© KOBONNOU , 2019 All Rights Reserved.