CSSで簡単！サイト全体または部分的にリンクを無効化する方法

2018/12/03マークアップ言語

サイト上のリンクを無効にしたい場合、静的サイトならソースを開いてその部分のaタグを削除すれば済む話ですが、WordPressのようなCMSを利用して作成したサイトとなると話はまた別で、なかなか簡単にはいかない事もあります。

そこで、当エントリーではCSSだけで簡単にサイト全体、または部分的にリンクを無効化する方法を紹介したいと思います。

マウスイベントを無効化する

リンクを無効にすると言いましたが、正確にはマウスイベントの無効化になります。なので、クリックだけで無くホバー時のエフェクトなども無効化される事に注意して下さい。

サイト全体のリンクを無効化

さすがにこれを使う事はまず無いと思いますが一応。

a {
	pointer-events: none;
}

サイト全体のリンクに対するマウスイベントが無効化されるので、全てのリンクでマウスポインタをホバーした時やクリックした時に無反応になります。

部分的にリンクを無効化

こちらはピンポイントで部分的にリンクを無効化する方法になります。クラスを指定する事で任意の要素内に効果を限定するわけですね？ただし、汎用的にそこら中で使われているセレクタしか無い場合は自分で専用クラスを追加した方がいいかもしれません。

.class名 a {
	pointer-events: none;
}

必要に応じてクラスセレクタの部分を

#id名 a
a.class名

のように臨機応変に使い分けて下さい。

おまけのサンプル（Luxeritasのカルーセルスライダー編）

そんな使い方をする人は稀だと思いますが、実際の使用例として当サイトで利用中のテーマLuxeritasのカルーセルスライダーのリンクを無効化する場合、こんな感じになります。

.thk_swiper_widget a {
	pointer-events: none;
}

これだとサイト上の全てのカルーセルスライダーでマウスイベントが無効になってしまうので、個別に指定したい場合は次のようにします。

#thk_swiper_widget-3 a {
	pointer-events: none;
}

マウスイベントの無効化でした

当エントリーではリンク先のページに移動出来ないようaタグのマウスイベントを無効化する事で対応しましたが、冗長なエフェクトやムダなアニメーションを抑制する事も出来るので覚えておいて損は無いカスタマイズかと思います。