画像リンクにマウスを重ねたとき、またはTabキーで選択したときに、光が一度だけ横切るCSSです。SWELLのキラっとボタンに似た見せ方ですが、テーマ内のアニメーション名には依存しません。常時点滅させず、動きを減らすOS設定では装飾を出さない構成にします。
動く見本：画像へマウスを重ねるかTabで選択
画像をクリックするとSWELLカスタマイズの目的別一覧へ移動します。光は装飾なので、表示されなくてもリンクを使えます。スマホのタップではホバー効果の再生を保証しません。
画像リンクのHTMLを用意する
カスタムHTMLブロックに次のHTMLを貼り、移動先・画像URL・代替テキストを自分の内容に置き換えます。widthとheightは画像本来の寸法を指定してください。クラスはimgではなく、画像を包むa要素に付けます。
<a class="waza-shiny-image" href="/destination/">
<img src="/path/to/image.jpg" alt="移動先の内容が分かる説明" width="800" height="450">
</a>画像自体に疑似要素を付ける方法ではありません。リンクでない画像なら、外側をdivに変更して使えます。その場合は不要なtabindexを追加せず、キーボードで選択する対象にはしません。
CSSを追加する
追加CSSか子テーマのstyle.cssへ貼ります。既存のリンクを重ねてa要素を入れ子にしないでください。
.waza-shiny-image {
position: relative;
display: block;
overflow: hidden;
isolation: isolate;
}
.waza-shiny-image img {
display: block;
width: 100%;
height: auto;
}
.waza-shiny-image:focus-visible {
outline: 3px solid #155b75;
outline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
.waza-shiny-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(110deg, transparent 35%, #ffffff80 50%, transparent 65%);
transform: translateX(-110%);
}
.waza-shiny-image:hover::after,
.waza-shiny-image:focus-visible::after {
animation: waza-image-shine .7s ease-out 1;
}
}
@keyframes waza-image-shine {
to { transform: translateX(110%); }
}仕組みと適用範囲
光はリンクの疑似要素です。pointer-events: noneでクリックを妨げず、親要素の内側で切り取ります。再生は1回で終わり、ポインターを外して重ね直すと再び再生します。テーマ標準のボタンや、クラスのない画像の見た目は変えません。
この例は画像だけを包む要素を対象にしています。画像キャプションや入力欄を含む複雑なブロック全体に付けると、装飾の重なりや切り取りが変わるため、そのまま流用しないでください。
確認と戻し方
PCではホバー、Tabのフォーカス枠、Enterでの移動を確認します。スマホでは画像の横はみ出しとリンク先を確認してください。OSの「視差効果を減らす」などの設定でも元の画像とリンクが利用できることを確認します。
元に戻すにはwaza-shiny-imageクラスと追加CSSを削除します。画像とリンクは残せます。この記事の見本は公開ページで確認していますが、すべての端末やテーマの組み合わせで検証したものではありません。
