【CSS】pointer-eventsは便利だった【ソース修正不要でaタグ無効】

この記事では、pointer-eventsというCSS記述を使って、ソースを修正することなくaタグなどのクリックを無効化する方法を説明します。

この記事で分かること

有料テーマでいらん所にaタグでリンクが張ってあった

ブログで投稿先頭に自動で表示されるアイキャッチ画像になぜかaタグが付いていてクリックすると画像がpopupする動きになっていました。

また、投稿タイトルにもaタグがついていて、自分自身にリンクが張ってありました。

どちらも全く意味が無いので削除したいと思うわけですが、さすがにphpのテンプレートファイルをいじくる元気はないのでどうしたものかと思っていました。

そんなとき、pointer-eventsというCSSを使うと、phpをいじらずに、CSSだけでクリックを無効化できるという話があって目から鱗が落ちました。

そんなバカな！と思いながら実際試してみると、確かにaタグが無効になりました。aタグのclassをセレクタとするよりも一個上のdivのclassを指定するとうまく機能します。

.セレクタ{
pointer-events : none;
}

海外の有料テーマを使っていると、日本の無料テーマなら余裕で対応しているような内容も対応していなかったりします。

いらない情報が表示されているのであればdisplay : noneで消せばいいのですが、情報は必要だけどaタグを消したいと思った時に、ソースをいじるかどうか迷います。

ソコはなるべくいじらないのが正解なので、今回紹介したpointer-eventsを覚えておくとよいと思います。