2枚の画像を重ねて表示し、スライダーで切り替えながら比較できるようになるWordPressプラグイン「Twenty20 Image Before-After」

2枚の画像を重ねて表示し、スライダーで切り替えながら比較できるようになるWordPressプラグイン「Twenty20 Image Before-After」

2枚の画像を重ねて表示し、スライダーで切り替えながら比較できるようになるWordPressプラグイン「Twenty20 Image Before-After」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Twenty20 Image Before-Afterは、2枚の画像を重ねて表示し、スライダーで切り替えながら比較ができるようになるWordPressプラグインです。

画像のビフォーアフターを紹介する時に便利です。

スポンサードリンク

Twenty20 Image Before-Afterのインストール

インストール手順は以下の通りです。

  1. Twenty20 Image Before-Afterをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Twenty20 Image Before-Afterを有効化します。

Twenty20 Image Before-Afterの使い方

投稿編集画面で以下のようなショートコードを挿入します。画像IDはメディアライブラリにて事前に調べておきましょう。

[twenty20 img1="画像1のID" img2="画像2のID" offset="0.5" width="100%"]

ショートコードで指定できるパラメーターは以下の通りです。

img1 画像1のID
img2 画像2のID
direction 分割の向き(horizontal|vertical)
offset スライダーの位置
align 画像の配置(none|right|left)
width 横幅(デフォルト100%)
before 画像左下に表示されるキャプション
after 画像右下に表示されるキャプション
hover マウスホバーによる操作(true|false)

クラシックエディターを使っている場合は、[Add Twenty20]というボタンが表示されるので、ボタンから画像を選択してショートコードを挿入できます。

Add Twenty20

[Add Twenty20]をクリックしたら、まず2枚の画像を選択して挿入します。

画像の選択

続いて、パラメーターの設定画面が開くので、各種パラメーターを設定して[Insert Shortcode]をクリックしショートコードを挿入します。

パラメーターの設定

ショートコードを挿入した箇所に、以下のようなスライダー付の比較画像が表示されます。

比較画像

あとがき

非常にわかりやすく2枚の画像を比較できるようになりますね。ちゃんとスマホでも動作します。

なお、プラグインを使わずに実装したい場合は、Beer Sliderというスクリプトが便利です。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。