写真の紹介サイト等をみていると、スライダーで2枚の写真のビフォーアフター画像等を比較しているページを見かけます。便利そうなので使ってみたいと思っていたのですが、ちょっと難しそうな作業になりそうなので敬遠してました。
しかし、WordPressのプラグイン「TwentyTwenty」や「Twenty20 Image Before-After」を使えば簡単にスライダーを使った比較画像を作成することができたので、今回はこちらのプラグインの比較とそれぞれの使い方を紹介していきます
「TwentyTwenty」と「Twenty20 Image Before-After」の比較
同じような名前ですが違うプラグインです。
「TwentyTwenty」の画像
[twentytwenty]
[/twentytwenty]
「Twenty20 Image Before-After」の画像 ※注意事項あり
[aside]「Twenty20 Image Before-After」の画像は、同じページ内で「TwentyTwenty」のショートコードを使うと「TwentyTwenty」と同じレイアウトになることがあります。通常ならタップしたりカーソルを載せてもレイアウトは変化せずシンプルなままです
別記事では 「Twenty20 Image Before-After」が正常に作動していていますので、気になる方はこちらの比較画像を参考にしてください [kanren postid=”4436″]
[/aside]
少し凝ったデザインが良ければ「TwentyTwenty」。シンプルなデザインが良ければ「Twenty20 Image Before-After」がおすすめです
「TwentyTwenty」の設定と使い方
「TwentyTwenty」をインストールする
プラグインの追加から「TwentyTwenty」を検索してインストールしてください
こちらからダウンロードすることもできます｜TwentyTwenty
「TwentyTwenty」の使い方
文中に下記のショートコードを記入して、この間に画像を2枚追加するだけです
「Twenty20 Image Before-After」の設定と使い方
「Twenty20 Image Before-After」をインストールする
プラグインの追加から「Twenty20 Image Before-After」を検索してインストールしてください
こちらからダウンロードすることもできます｜Twenty20 Image Before-After
「Twenty20 Image Before-After」の使い方
投稿画面に[ Add Twenty20 ]というタグが追加されているので、画像を追加したい箇所でこちらを選択します
タグを選択すると、画像の編集画面が出てくるので
・画像の幅
・左右の比率
・スライダーの動き
・左右の場所
以上の4つを決定して[ Insert Shortcode ]を選択します
使用する画像を2つ選択します。先に選択した方が左で、後に選択した方が右に表示されます
画像を選択したら、右下の[ Insert ]を選択して完了です。これで画像が投稿に追加されています
まとめ
これらのプラグインを追加するだけで機能的でおしゃれなページに仕上がるので活用してみてください
機能的には「TwentyTwenty」も「Twenty20 Image Before-After」もほとんど同じです。デザインの好みで選ぶのがよさそうです