【設定不要】2枚の画像をスライドで簡単比較できる無料プラグイン「TwentyTwenty」

2019年11月20日
2020年01月11日

WordPress 5.3 へのアップデートにより、新デフォルトテーマ「Twenty Twenty」が搭載されました。

何だか使いやすそうで素敵！

ということで、この新デフォルトテーマ「Twenty Twenty」についての記事をと思ったのですが…。
色々調べていくと「TwentyTwenty」というちょっと面白そうなプラグインを発見してしまったので、今回はプラグインの「TwentyTwenty」をご紹介します。
最後にデモページもご用意しましたので、併せてどうぞ。

TwentyTwenty

https://en-nz.wordpress.org/plugins/twentytwenty/

「TwentyTwenty」は、真ん中にある矢印を左右に移動させることで並べた 2枚の画像を比較することができるプラグインです。
実際に見て頂いた方が分かりやすいと思いますので、下の画像をご参照下さい。

※すぐにデモページを見たい方はこちらから

例えば、エステや美容室、画像修正などを行っているサイトの Before・After 画像を表示するのにピッタリなプラグインではないでしょうか。

インストール方法

WordPress のダッシュボードにて、「プラグイン」＞「新規追加」をクリック、検索窓に「TwentyTwenty」と入力して「今すぐインストール」をクリック・有効化します。
※「Twenty Twenty」と間にスペースを入れてしまうと出てこないのでご注意下さい！

【設定不要】2枚の画像をスライドで簡単比較できる無料プラグイン「TwentyTwenty」

使用方法

「Twenty Twenty」は、設定不要でそのまま使用できます。

使用方法ですが、まずは並べたい画像 2枚を用意して…
2枚の画像を [twentytwenty] と [/twentytwenty] で挟むだけ！簡単♪

【設定不要】2枚の画像をスライドで簡単比較できる無料プラグイン「TwentyTwenty」

[twentytwenty]
<img src="https://byrd.jp/wp-content/uploads/digital1637-1.jpg" />
<img src="https://byrd.jp/wp-content/uploads/digital2173-1.jpg" />
[/twentytwenty]

上がビジュアルリッチエディター、下がテキストエディターでの記述です。

デモページ

デモページをご用意しました。
動作確認をしたい方はリンクからどうぞ（リンク先はスタートミーアップが管理する別サイトです）。

TwentyTwenty デモページへ

この記事を書いた人

冨江恵: 2014年個人でデザイン事務所を開業後、2018年3月にスタートミーアップ合同会社へ。現在は、デジタル事業部のメンバーとして茨城県つくば市を中心にホームページ制作・グラフィックデザイン・CAD図面データ作成等を行なっています :‑D

Facebookページ作成時に「市区町村と都道府県を入力してください」と表示され次に進めなくなる問題の原因と解決策。【拡張機能・専用ソフト不要】Google Chrome で縦に長いウェブページ全体のスクリーンショットを撮影する方法

コラム

関連記事

【WordPress 5.0】新エディタ「Gutenberg（グーテンベルグ）」をプラグインを使って簡単に旧エディタに戻す方法とその手順。

【プラグイン不要】WordPressの個別投稿・固定ページに JavaScript を追加する方法

ホームページ運営は作ってからが勝負！突破口を切り開く “PDCA” でアクセスを増やす！

【プラグイン不要】WordPressで構築したホームページにdescriptionタグを簡単に設定する方法

【拡張機能・専用ソフト不要】Google Chrome で縦に長いウェブページ全体のスクリーンショットを撮影する方法

【プラグイン不要】カテゴリーを好きな順番に並び替えてサイドエリアなどに表示する方法