WordPress│タップすると画像が変化するカスタマイズ

2022.07.162024.03.05

ビフォア・アフターでタップすると画像を切り替えたい！ということはないでしょうか？

本記事ではタップすると画像が変化するカスタマイズを紹介します。

SWELLと書いていますが、どのテーマでも可能なカスタマイズです。

サンプル

タップすると画像が変化するカスタマイズ

HTMLとCSSだけでできる簡単なカスタマイズです。

画像の用意

AとBという2枚の画像を用意しました。

カスタムHTMLの作成

記事を作成してカスタムHTMLのブロックに下記のコードを記述します。

<div class="switch-image"></div>

CSSの記述

CSSを記載しましょう。

左上にキャプションも記載しておきました。

※padding-topの部分は(画像の高さ / 画像の横幅) × 100の値を入れてください。これでレスポンシブの対応ができます。

.switch-image {
    background-image: url('https://motoki-design.co.jp/wordpress/wp-content/uploads/image_01.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100%;
    text-align: center;
    width: 100%;
    height: 0;
    padding-top: 100%;
}
.switch-image:active {
    background-image: url('https://motoki-design.co.jp/wordpress/wp-content/uploads/image_02.jpg');
}
.switch-image::before {
    content: "タップしている間、画像が変化します";
    color: #000;
    font-size: .8em;
    text-shadow: 1px 1px 0 #fff;
}

以上です。

これだけでタップしている間、画像が切り替わります。

タップではなくマウスカーソルを合わせている間に変化させたい時は:activeを:hoverにするとよいです。

サンプル