Twenty20 Image Before-Afterの使い方:2枚の画像を重ねてスライドで比較

Twenty20 Image Before-After

プラグインTwenty20 Image Before-Afterの設定と使い方をまとめています。

2枚の画像をスライド(Before・After)で比較させるプラグインです。用途は限られていますが、写真のレタッチ前後等、画像を比較させたい時に使うと便利です。

目次

設定と使い方

プラグインを有効化すると、エディター画面に専用のボタンが追加されます。

ブロックエディター非対応なので、ブロックエディターで使いたい方はショートコードで挿入して下さい。

使い方

クラシックエディターを開いて、「Add twenty20」ボタンをクリックします。

「Add twenty20」ボタンをクリック

比較させたい画像を2枚選択して、「Insert」をクリックします。

1枚目が左(Before)、2枚目が右(After)に表示されます。

画像を2枚選択して「Insert」をクリック

お好みで設定を変更して、「Insert Shortcode」をクリックします。

カスタマイズ
スクロールできます
設定詳細
Before TextBefore画像の左下に表示させるテキスト
After TextAfter画像の右下に表示させるテキスト
Width横幅(初期値は100%)
Offsetスライダーの初期位置
Directionスライドさせる方向(横or縦)
Alignment画像の配置
Move slider on mouse hover?マウスホバーによる操作

デフォルトでも機能しますが、メインカラムより小さな画像を挿入する時は、「Width」で画像と同じ横幅を指定して下さい。そのまま挿入すると、画像がメインカラムの幅に引き伸ばされて画質が劣化します。

ショートコードが挿入されれば完了です。

ショートコードが挿入される

ウィジェットエリアにも専用ウィジェットが追加されます。

実際に表示される画像

設定に問題がなければ、下記の様なスライド可能な画像が表示されます。

現像後
現像後
現像後
現像前
現像前

縦方向のスライドはスマホで操作し辛いのでおすすめしません。

また、縦横の長さが異なる画像を使用すると、レイアウトが崩れるので注意して下さい。

よくある質問

実際に使ってみて気になった点をまとめてみました。

画像が表示されません

テーマ備え付けの機能やプラグインの設定をオフにしてみて下さい。SWELLを使っている方は、「SWELL設定 > jQuery > jQueryをwp_footerで登録するのチェックを外す」と機能します。

また、画像等のLazyloadで「スクリプト(lazysizes.js)」を選択するとレイアウトが崩れます。

画像を中央寄せにしたいです

下記のCSSを追加してみて下さい。

.twenty20 {
    margin-left: auto;
    margin-right: auto;
}
画像がメインカラムからはみ出ます

下記のCSSを追加してみて下さい。

.twenty20 {
    max-width: 100%;
}
矢印がずれます

恐らくテーマのCSSの影響を受けています。SWELLの場合は下記CSSで改善されました。

.post_content .twentytwenty-left-arrow {
    top: 13px;
}

最後に

2枚の画像を比較させたい時は、画像を縦に並べたり、横に並べるよりも、重ねてスライドさせた方が比較しやすいのでおすすめです。特に、写真の現像前と現像後の比較には最適です。

ただ、相性の悪いテーマやプラグインも多いので、上手く動作しない時は、疑わしいプラグインをオフにしてみるまたは他のテーマに変更して正常に動作するか確認してみて下さい。

シェアしてね!

この記事を書いた人

2024年9月4日、Googleのコアアップデート完了。
このサイトは回復の兆しなし。2023年末からずっと投稿しているパチンコ・パチスロ搭載楽曲一覧の記事でなんとかアクセスを保っているだけ。ジャンルごとにドメインを分けて雑記ブログをやめる。パーマリンクを分かりやすく変更する。アイキャッチ画像のサイズを大きくする。等、SEOで改善できる点はいくつか思いつくけど、恐らくそんな単純な問題じゃないと思う。個人でもユーザーに役立つ記事を書けば上位表示できた時代は完全に終わった気がする。

コメント

コメントする

目次