写真を並べて比較する『Twenty20 Image Before‐After』

2枚の画像の間にスライダーを設置して、自由に動かして比較出来るプラグインが『Twenty20 Image Before‐After』です。
非常に便利なプラグインなのですが、一つ問題があります。

2021.1現在
ブロックエディタに対応していません

クラシックエディタの場合は、ツールバーにボタンが設置され、それを押すことで画像の選択を始めとする設定項目の入力パネルが表示されます。
しかしブロックエディタの場合は見た目の変化は何もありません。だからといって使えないわけではありません。
ショートコードとして入力することで使うことが出来ます。

目次

使い方

百聞は一見に如かず。
実際に設置してみます。

以下のように記述することでこの様な表示になります。

ちなみにサンプルとして使用した画像は、私がリアルな色鉛筆画の練習として描き別サイトにアップしたものとそれを画像編集ソフトでセピアカラー加工したものです。

お千代

出来が微妙なのは見逃してください

各設定項目は以下のようになります。

項目設定値規定値内容
twenty20ショートコード名
img1=””左側画像のID
img2=””右側画像のID
ofset=””0~10.5スライダーの初期位置
width=””px または %100%横幅
direction=””horizontalまたはverticalhorizontalスライダーの方向
before=””テキスト左側画像の説明
after=””テキスト右側画像の説明
algin=””noneまたはrightまたはleftnone表示位置
hover=””trueまたはfalsefalseスライダーの動かし方
trueだとカーソル追随になります

画像IDはメディアライブラリで画像を表示すると、以下のようにアドレス欄に表示されます。

上の設定に『direction=”virtical”』と『hover=”true”』を追加してみました。

表示されないこともある

私はテーマにSWELLを使っているサイトでテストしたのですが、最初表示されませんでした。
調べてみたところ、jQueryの読み込みが関係しているとのことでした。

「SWELL設定」の「jQuery」タブにある「jQueryをwp_footerで登録する」のチェックを外すことで表示されるようになりました。

お千代

SWELL以外のテーマでは試していないので分かりません

よかったらシェアしてね!
  • 着せ替えデータが豊富に用意されています
  • SEOプラグインは必要ありません
Classic Editorをお使いの方にお薦め
  • 更新が頻繁で新しい機能も続々追加されています
  • 当サイトはSWELLで作成しています
ブロックエディタをお使いの方にお薦め

この記事を書いた人

杜の都に住んでいます。
いくつになっても好奇心だけはあります。

目次
閉じる