画像をタップすると別の画像へ切り替わり、もう一度操作すると元に戻る作り方です。
HTMLのdetails要素を使うためJavaScriptは不要です。
SWELLのカスタムHTMLブロックで使えます。
以前のCSSの:activeを使う例は、押している間だけ変化するものでした。
この例は切り替えた状態を保持し、キーボードのTabで操作部へ移動してEnterまたはSpaceでも切り替えられます。
動くサンプル
画像Aと画像Bを切り替える
2枚の画像を用意する
WordPressのメディアライブラリへ切り替え前と切り替え後の画像をアップロードし、それぞれのファイルURLを取得します。
比率をそろえると切り替え時の高さの変化を抑えられます。
サンプルは既存の画像A・画像Bを使っています。
カスタムHTMLブロックへ貼り付ける
変更前のブロックと追加CSSを保存してから、投稿または固定ページの「カスタムHTML」ブロックへ以下を貼り付けます。
2か所のsrcを自分の画像URLへ、altを各画像の内容を説明する文へ変更してください。
PHPやfunctions.phpへの追記は不要です。
<details class="waza-image-switch">
<summary>画像Aと画像Bを切り替える
<img class="waza-image-before" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/image_01.jpg" alt="切り替え前の画像A">
</summary>
<img class="waza-image-after" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/image_02.jpg" alt="切り替え後の画像B">
</details>追加CSSへ貼り付ける
以下を追加CSSまたは子テーマのstyle.cssへ貼り付けます。
.waza-image-switchの中だけに適用します。
古い.switch-image用のHTMLとCSSを使っていた場合は、この例へ置き換えてください。
.waza-image-switch { width:100%; max-width:600px; margin:1em auto; border:1px solid #777; }
.waza-image-switch > summary { cursor:pointer; padding:.75em; color:#222; background:#f5f5f5; font-weight:700; }
.waza-image-switch > summary:focus-visible { outline:3px solid #075aab; outline-offset:3px; }
.waza-image-switch img { display:block; width:100%; height:auto; margin:0; }
.waza-image-switch[open] .waza-image-before { display:none; }操作と表示を確認する
公開画面で操作部をクリックまたはタップし、画像AからBへ変わること、もう一度操作するとAへ戻ることを確認します。
キーボードではTabで枠へ移動し、EnterまたはSpaceを押します。
スマホ幅で横にはみ出さないこと、両方の画像が読み込めることも確認してください。
2026年10月1日の確認では、公開記事のPC幅とスマホ幅で両方の画像の読み込みとEnter・Spaceによる切り替えを確認しています。
実機でのタッチ操作とスクリーンリーダーによる読み上げは未確認です。
これは画像比較のスライダーではありません。
画像Bを表示した後は、上の「画像Aと画像Bを切り替える」を操作して戻します。
ページを再読み込みすると閉じた状態へ戻ります。
CSSが読み込まれない場合も標準の開閉は使えますが、開いた状態では画像AとBが両方表示されます。
元に戻す方法
追加したカスタムHTMLブロックと.waza-image-switch用のCSSを取り除き、元の画像ブロックへ戻します。
メディアライブラリの画像を削除する必要はありません。
旧実装はGitHubの過去コードに残っています。
このページのdetails版とは実装が異なります。
よくある質問：WordPressでタップすると画像が変化するカスタマイズをするとき
この方法では、画像はどう切り替わりますか？
記事では、画像をタップすると別の画像へ切り替わり、もう一度操作すると元に戻ります。HTMLのdetails要素を使うため、JavaScriptは不要です。SWELLのカスタムHTMLブロックで使えます。
以前のCSSの:activeを使う例と、何が違いますか？
記事では、以前の:activeを使う例は押している間だけ変化するものでした。この例は切り替えた状態を保持し、キーボードのTabで操作部へ移動してEnterまたはSpaceでも切り替えられます。
用意するものは、何ですか？
記事では、WordPressのメディアライブラリへ切り替え前と切り替え後の2枚の画像をアップロードし、それぞれのファイルURLを取得します。比率をそろえると、切り替え時の高さの変化を抑えられます。
HTMLとCSSは、どこに貼りますか？
記事では、変更前のブロックと追加CSSを保存してから、投稿または固定ページの「カスタムHTML」ブロックにHTMLを貼り付けます。2か所のsrcを自分の画像URLへ、altを各画像の内容を説明する文へ変更します。CSSは追加CSSまたは子テーマのstyle.cssへ貼り付けます。PHPやfunctions.phpへの追記は不要です。
画像比較のスライダーとして使えますか？
使えません。記事では、これは画像比較のスライダーではありません。画像Bを表示した後は、「画像Aと画像Bを切り替える」を操作して戻します。ページを再読み込みすると閉じた状態へ戻ります。
CSSが読み込まれないと、どうなりますか？
記事では、CSSが読み込まれない場合も標準の開閉は使えますが、開いた状態では画像AとBが両方表示されます。
公開前に、何を確認しますか？
記事では、公開画面で操作部をクリックまたはタップし、画像AからBへ変わること、もう一度操作するとAへ戻ることを確認します。キーボードではTabで枠へ移動し、EnterまたはSpaceを押します。スマホ幅で横にはみ出さないこと、両方の画像が読み込めることも確認します。
どこまで確認されていますか？
記事では、2026年10月1日の確認で、公開記事のPC幅とスマホ幅で両方の画像の読み込みとEnter・Spaceによる切り替えを確認しています。実機でのタッチ操作とスクリーンリーダーによる読み上げは未確認です。元に戻すときは、追加したカスタムHTMLブロックとCSSを取り除き、元の画像ブロックへ戻します。
