WEBマスターの手帳 > 2つの画像を比べるのに便利なスライダー表示ができるWPプラグイン「Twenty20 Image Before-After」

2017年6月2日

2つの画像を比べるのに便利なスライダー表示ができるWPプラグイン「Twenty20 Image Before-After」

先日投稿した「JPEG、PNG、GIF、Webサイトで使う画像ファイル形式の違いをサクッと解説。」でも使った、画像を1箇所に2つ表示させて、スライダーを動かすことで、表示される画像や写真を変えるアレですが、どうやっているの?と聞かれたので、紹介したいと思います。

こういうの↓

特別なことをしているわけではなく、WordPressのプラグインを使っています。



WordPressプラグイン「Twenty20 Image Before-After」

Twenty20 Image Before-After

使用するプラグインは「Twenty20 Image Before-After」です。

同じようなプラグインに「TwentyTwenty」がありますが、最終更新が3年前なので、使わないのが賢明です。

Twenty20 Image Before-Afterの使い方

Twenty20 Image Before-Afterの使い方はとても簡単です。

まずは、いつも通りにプラグインから新規追加で、Twenty20 Image Before-Afterを探してインストール&有効化をしましょう。

Twenty20 Image Before-Afterを有効化したら、投稿の編集画面を開きましょう。「Add Twenty20」というボタンが表示されているはずです。

Add Twenty20

「Add Twenty20」をクリックすると、画像の選択画面が表示されます。新たに画像や写真をアップロードしてもいいですし、すでにアップロードされているものから選んでもOKです。

先に選んだものが「左側」に表示されます。画像を2枚選んだら、画面下の「Insert」をクリックします。

Add Twenty20で画像を選ぶ

表示の設定画面が表示されますので、必要に応じて設定をしましょう。

Twenty20 Image Before-Afterの表示設定

  • Width:画像の横幅指定
  • Offset:スライダーの表示位置(0.5が画像の中央)
  • Direction:スライダーする向き(Horizontalが横にスライド、Verticalが縦にスライド)
  • Alignment:右寄せ、左寄せ

最後に「Insert Shortcode」をクリックすると、ショートコードが投稿内に貼り付けられます。

画像サイズは同じにするのがコツ

キレイに表示させるコツは、2枚の画像のサイズを同じにしておくことです。

プラグインさえ入れてしまえば、簡単に使うことができるので、写真や画像を比較するときにオススメです。

関連用語:

この記事をシェアして頂けると嬉しいです


【オンライン講座】会社の売り上げに貢献するSNS活用 基礎講座

会社の売り上げに貢献するSNS活用 基礎講座

企業が集客や売り上げUPに役立つためのFacebook、Twitter、Instagram、YouTube、企業ブログなどSNS(ソーシャルメディア)を活用するために必要や知識や理解を徹底解説!

企業ブログ(オウンドメディア)の重点解説も付いているので、SNS活用の初心者だけでなく、ビジネスでブログを活用したい!という方にもオススメの講座です!

あなたにオススメする記事

WEBマスターの手帳をフォローして最新情報をゲットしよう!

この記事を書いた人

遠藤 聡

中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を承っております。
無料のメール相談も受け付けております。詳細は無料メール相談ページをご覧ください。

コメント

最新記事一覧

カテゴリー

ピックアップ記事

寄稿記事

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事