twentytwenty〜ビフォーアフターのような比較画像ができるWordPressプラグイン〜

ダイエットの前後の写真や家のリフォーム、お部屋の片付き具合など過去と現在とで劇的に変わっている写真はアッと驚きますよね。

WordPressでビフォー・アフターのように2枚の写真をワンセットで比較できるプラグインを見つけました。

「twentytwenty」のインストール方法と使い方をまとめてみたので紹介します。

ビフォー・アフターのような写真を挿入できるプラグインtwentytwenty

参考TwentyTwenty — WordPress Plugins

▲ダイエット、家のリフォーム、断捨離など今までと現在とで劇的に変わるとアッと驚きますよね。

ブログの写真も、同様にインパクトを与えられる事はできないかな探していました。

調べたところ、TwentyTwentyというプラグインをインストールするとできることがわかりました。

TwentyTwentyのインストール方法

スクリーンショット 2017 09 07 16 23 40

WordPressのダッシュボードに入り「プラグイン」→「新規追加」に進みます。

スクリーンショット 2017 09 07 16 26 22

検索窓にTwenty Twentyと入力するといつくかの関連プラグインが表示されます。

Twenty Twentyを選択して「今すぐインストール」→「有効化」をすれば完了です。

TwentyTwentyの使い方

スクリーンショット 2017 09 07 16 37 35

▲使い方ですが、記事編集画面を開きます。

ビジュアルエディタモードでしたら、テキストエディタモードに変更しておいてください。

▲このようにタグで囲んで使います。

画像①、②は便宜上つけているのであしからず。

スクリーンショット 2017 09 07 16 40 01

▲画像は「メディアを追加」から選択できます。

というタグの中にメディアから画像を2つ選んだ挿入すれば完成です。

▲同じ写真ですが、カラーと白黒のビフォー・アフター写真。

写真は、高知県でもとりわけお気に入りの地酒しらぎく。

▲どちらもカラー写真ですが、加工でまた雰囲気が変わりますよね。

シークバーを動かしながら微妙な違いを確認できるのも面白い。

ちなみに、撮影場所は高知県にある日本三大ガッカリスポットの1つはりまや橋。

▲Twitterに夜間モードが実装されたとのことなので試しにビフォー・アフター。

同じサイトでもだいぶ雰囲気が変わりますね。

beforeとAfterの文字を非表示する方法

/* twentytwenty beforeAfter非表示 */
.twentytwenty-before-label{display:none}
.twentytwenty-after-label{display:none}

▲デフォルトだと左にBefore右にAfterと表示されます。

それが、いらない場合は、CSSに上記のコードを挿入して保存すると表示されなくなります。

☞まとめ

  • ビフォー・アフターの様子を1枚の画像に収めたい。
  • 写真の加工などの比較の様子を表現したい。

そんな方にWordPressのプラグインはオススメです。

この機会にインストールしてみてはいかがでしょうか。

以上、「ビフォー・アフターのような比較画像ができるプラグインtwentytwenty」と題して記事をお送りしました!!

Twitterでコーヘイを

▲SNSでこの記事をシェアする▲