【CSS】コピペでOK！リンクに合わせたカーソルを指マークにする方法

当ブログではcocoonを使用してますが、最近リンク付き画像などにカーソルを当てても指にならないことに気づきCSSを修正したのでその方法を書いておこうと思います。

※最初からなのか更新で無くなったのかわからなかったのですが、ユーザビリティを考えると自分でCSSを修正できた方が良いですね。

DEMO

デフォルトのテーマではカーソルを当てると👆になるようなっていますが、テーマによってはついていないものもあるかもしれないのでチェックしてみてください。

とりとん

とても簡単なのでやってみましょー

この記事の内容は・・

コード

CSS

a:hover{
    cursor: hand;
    opacity: 0.8;
}

今回はaタグのホバー時のスタイルなので、クラス名は「a:hover」です。

cursorでマウスカーソルのマークを指定します。

今回は「hand」という指マークにしていますが、他にもロード中のマークやヘルプマークなどがあります。

興味のある方は、「cursor css」などで調べるとすぐ出てきますよ！

opacityは透明度を0(透明)～1(不透明)の数値で指定するプロパティなので、ホバーしている状態がわかりやすくなるように「0.8」で少し透明にしています。

ちなみに、上のデモのようにするにはaタグのhrefでリンク先を設定しなければなりませんが、クリックしてもページの遷移をしないようにするには下記のようなコードでできます。

HTML

<a href="javascript:void(0);">こんな感じ</a>

WordPressのカスタマイズ方法として、既存のHTMLにCSSを追加・修正する手順を書いてみました！

CSSやclassについての簡単な説明から便利なデベロッパーツールの使い方など・・

初心者向けに書いたのでよかったら参考にしてみて下さい⬇️

簡単なのでぜひやってみてください〜

最後まで読んでいただきありがとうございました！