MENU

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

WordPressカスタマイズ
swell-tap-image

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

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

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

サンプル

目次

著者

motokiのアバター motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

WordPressテーマ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にするとよいです。

サンプル

まとめ

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

ちょっと気が付きにくくなるカスタマイズですが、クイズのようなものには逆に友好的なカスタマイズだと思います。

是非、本記事を参考にしてみてください。

WordPressカスタマイズ
  • URLをコピーしました！
目次