WordPress

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

WordPressで2枚の画像・写真を比較(ビフォー・アフター)表示させたいひと必見の便利なプラグインがあります。

まずは先に比較したい2枚の画像があった場合の通常表示と今回のプラグインを使った場合の違い、次にプラグインの説明、使い方を紹介します。

※WordPress5.0.3、GutenbergではなくClassic Editor環境でのレポになります。

プラグインを使うと比較画像・写真をお洒落に表示

例としてモノクロ写真と通常の写真を使って、よくある通常2パターンと紹介するプラグインの場合の違いを説明します。

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

仮に比較(ビフォー・アフター)したい2枚の画像がある場合、通常どおり2枚並べて表示させると以下のようになります。基本の表示ですね。

 

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

次は、レイアウト調整で2枚横に並べて表示させる方法です。横一列で表示されますが、その反面でサイズが小さくなるので見やすさではあまり良くないかもしれません。

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

今回紹介するプラグインを使用すると、2枚の比較画像を重ねた1枚の表示になり、サイズも通常の1枚表示と変わりません。

また特長的なのが中央のスライド部分が左右へ自由に動くことで1枚目、2枚目を交互に表示することが可能です。

クリックしながらスライド部分を動かしてみてください。

 

初期表示では中央部分にスライドがあり、重なり合った1枚目の半分・2枚目の半分が表示されています。スライドを自由に動かすことで違いがはっきりと分かります。

また通常とは違い、デザイン性や画像表示の見た目のオシャレ感が好きなひともきっと多いはず。初めて見るとスライド部分に触れたくなりませんか?

次はプラグインの紹介をしていきます。

 

今でも評価の良いプラグイン「TwentyTwenty」

今回は2個のプラグイン(不具合で中止)、現在でもオススメできるプラグインを紹介します。TwentyTwentyは先程の「プラグイン使用パターン」の比較画像で使用していたプラグインであり今でも評価の高いプラグイン。

TwentyTwentyの使い方

使い方はとてもシンプルで初心者の方でも簡単に使うことが出来ます。

TwentyTwentyプラグインはダウンロードしても設定項目などはありません。

上記のショートコードで画像を囲むことにより2枚の比較画像を合わせたスライド表示になります。

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

テキストで見ると下記のようになります。ショートコードなのでビジュアル側で記載して大丈夫です。

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

TwentyTwenty ダウンロード

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

赤線を引きましたが、実は最終更新は4年前でバージョン次第では未検証と表示される場合があります。私はWordPressバージョン5.0.3のClassic Editorプラグインで使用していますが特に大きな不具合は起きていません。追記1点、

私の場合、使っている遅延読み込み系のプラグインと相性が悪いのでTwentyTwentyを使用する記事のみOFFにしています。遅延読み込み系のプラグインを使用している方は注意してください。

他にも不具合が使う側によって出る可能性もあるのでダウンロード後に有効にしていて不具合が出た場合はすぐ無効にしてください。

まとめ

本当はもう1つ「Twenty20 Image Before-After」というプラグインを紹介予定でしたが、私の環境では不具合があったので中止しました。「TwentyTwenty」のほうが総合的に安定しており今でも十分に使えるプラグインでした。

私の環境でのレポではありますが、使用された方で不具合等などの情報ありましたらコメント等で教えていただけると助かります。

「TwentyTwenty」は使い方によっては色々な使用用途があると思うので是非使ってみてください。

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

続きを見る

Copyright© KOBONNOU , 2019 All Rights Reserved.