みなさんこんにちは2001Y(@Y20010920T)です。
アイキャッチ画像だけ、リンクを無効化したかったので調べて見ました。そしたら、CSSだけでできるんですね。(できると思ってましたけどw)
僕は単純なリンク無効化がしたかったのですが他にも色々あったのでまとめて見ました。
具体的にはクリックしても通常テキスト通りにリンクを開きません。これだけを入れるだけで、ほかの下線・アニメーションなどが効いていてもリンクを無効化することができます。
逆に、どんなにデザインを通常テキスト通りにしても、このセレクタを入れなければリンクとして機能してしまいます。
多くのブラウザではリンクにカーソルを合わせると指マークになるんですが、それを通常通りにしてくれます。
当ブログでもサイドバーなど記事に関係ないところでは下線を消しています。
アイキャッチ画像だけ、リンクを無効化したかったので調べて見ました。そしたら、CSSだけでできるんですね。(できると思ってましたけどw)
僕は単純なリンク無効化がしたかったのですが他にも色々あったのでまとめて見ました。
リンクを完全に無効化できるCSS
これで全てのリンク機能がなくなります。
.link-off {
pointer-events: none;
cursor: default;
text-decoration: none;
}
pointer-events: none;
ここの部分が今回のミソのリンク機能を無効化するセレクタです。具体的にはクリックしても通常テキスト通りにリンクを開きません。これだけを入れるだけで、ほかの下線・アニメーションなどが効いていてもリンクを無効化することができます。
逆に、どんなにデザインを通常テキスト通りにしても、このセレクタを入れなければリンクとして機能してしまいます。
cursor: default;
ここで出てくるかあ〜 といった感じですが、カーソルを通常のものに戻すセレクタです。多くのブラウザではリンクにカーソルを合わせると指マークになるんですが、それを通常通りにしてくれます。
text-decoration: none;
今までもよく使ってきた、下線を消すセレクタです。当ブログでもサイドバーなど記事に関係ないところでは下線を消しています。
ブラウザ対応状況
参考
リンクを無効にするスタイル - CSS
note
HTML -
:first-of-typeで特定のaタグにpointer-events: none;を(56194)|teratail