この記事を書いた背景

会社のCIの都合でサイトロゴにリンクを設定してはならないという要件を後付けで言われたことに対する対応のまとめです。

WordPressでTwenty Twentyテーマを使っていて、JavaScriptが切られている環境でもどうにかしたい、というものです。

もちろんテーマファイルをいじるのは論外。
子テーマは作っていません。これもダメ(苦笑)。

対応方法

CSSで対応する必要があったので、pointer-eventsプロパティを利用しました。
このプロパティは、クリックおよびタッチイベントを制御するものです。

デフォルト値はautoですが、noneにすることでクリックおよびタッチイベントを無効化できます。

詳細：pointer-events – CSS | MDN

今回はTwenty Twentyテーマが対象なので、開発者ツールでclassを確認し、次の値を「追加CSS」で設定しました。

.custom-logo-link {
    pointer-events: none;
}
.footer-copyright a {
    pointer-events: none;
}

注意点

• IE10以下はサポート外
• キーイベントは無効化されない

IE10以下はサポート外

Internet Explorer 10以下では、このCSSはサポートされてません。
別途JavaScriptで無効にするなどが必要です。

キーイベントは無効化されない

TABキーとエンターキーの組み合わせでリンクを選択することはできるので、PC前提の場合は注意が必要です。
今回のサイトはタブレットかスマホだったので、とりあえずよしとしました。

まとめ

顧客要件が変わることはよくある話なので、いかにあとからいじれるように考えるか、というところですね。