WordPress Twenty TwentyテーマのロゴがクリックできないようにCSSを設定する

この記事を書いた背景

会社の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前提の場合は注意が必要です。
今回のサイトはタブレットかスマホだったので、とりあえずよしとしました。

まとめ

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

10年集客し続けられるサイトを、ワードプレスで自作する9つのポイント プレゼント

【最後まで読んでくれたあなたに】

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。
Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で
『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』
について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

・ワードプレスを使いこなせるコツを知りたい!
・自分にピッタリのサーバーを撰びたい!
・無料ブログとの違いを知りたい!
・あとで悔しくならない初期設定をしておきたい!
・プラグイン選びの方法を知っておきたい!
・SEO対策をワードプレスで行うポイントを知りたい!
・自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

※登録後に表示される利用条件に沿ってご利用ください

コメントを残す