Before Afterスライダー（BEAF）が崩れるときの修正方法

美容系サイトで脱毛の写真を前後比較する時、Before Afterプラグイン探してみました！英語版のみであり無料で導入できますが、機能制限解除は有料となります。でも無料でほぼほぼ問題なく使えます。

プラグイン名はこちら。
BEAF – Ultimate Before After Image Slider & Gallery

ちなみに以前のプラグイン名がTwenty20 Image Before-Afterです。
旧称をご紹介する理由は最後の方で判ります。

BEAFの使い方

まずはBEAFの使い方を流れでお伝えしていきます。

BEAFの設置方法

作成したBefore Afterの画像を設置するには、BEAFのプラグインにてショートコードを取得します。
BEAFの一覧や作成したページにもあるのですぐわかると思います。コピーしておきましょう。

挿入したいページにブロックを配置し、ショートコードを呼び出します。

さきほどコピーしてあるショートコードをそのまま貼り付けます。
プレビューでは見れないため、記事を公開します。

設置した箇所で見てもらえばわかりますが、めちゃくちゃでかいです。
画面いっぱいに表示してド迫力があります！！（迫力いるんか？）
あと、お気づきかもしれませんが、左の矢印がちょっとずれてますね？

BEAFの調整

画像の大きさを適切なサイズにしましょう。
外観＞カスタマイズ＞追加のCSSにこちらのコードを入れます。
ここでプラグインの旧称である twentytwenty-left-arrow を指定しているんですね。BEAFではなく。
解説は省略しますが、詳しく知りたい方はAIに聞いてみてください。

/* BEAFプラグイン用：PCサイズ（769px以上）の時だけ幅を制限する */
@media screen and (min-width: 769px) {
    .twentytwenty-wrapper.bafg-twentytwenty-wrapper {
        width: 350px !important; /* 固定値、あるいは 60% 等 */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* BEAFプラグイン用：スマホ（768px以下）は横幅いっぱいを維持 */
@media screen and (max-width: 768px) {
    .twentytwenty-wrapper.bafg-twentytwenty-wrapper {
        width: 100% !important;
    }
}

結果はこちらです。いい感じの大きさになりましたね。

BEAFの左矢印を修正

左矢印もさきほど同様の追加のCSSに入力し直せます。

/* BEAFスライダーの矢印位置調整 */
.post_content .twentytwenty-left-arrow {
    top: 13px;
}

軽微な修正とはいえ、これは絶対にやっておいた方が良いです！
サイトを訪問された人に少しでも違和感を与えず、信頼感が増すからです。