⚓
Qiita のユーザースタイルも書いてみた #CSS
前回は Zenn をもっと丸くしたくてユーザースタイルを書いてみてました。
今回は Qiita の記事を眺めててストレスを覚えた事があったので、同じ感じでユーザースタイルを書いてみました。
具体的には…
- 見出しでカーソルが pointer になるが何も出来ずストレス
と言う程度です。
pointer になるならクリックも反応して欲しいと思ったので、ちょっとスタイルをアレンジしてみました。
ざっくりやった事としては…
- リンク範囲を拡張
テキストを含むブロック全体、横幅いっぱい。-
:target(クリックした時) は拡張を無効化
-
-
:targetではアンカーを可視化- アイコンもアンカーに変更
調整に際し
アクセシビリティ寄りの観点でテキスト選択ができなくなってしまったので、:target の時だけ無効化して選択できるようにしました。
左が:target あり (見出しクリック時)、右が :target なし。
気になる点などあればフィードバックくださいませ🫡
おわりに
Zenn は今回の件で見出しのアンカー挙動を比較すると、そんなにストレスなく操作できました。
一点、scroll-behavior: smooth; を指定しても良いかな、と思ったので前回の記事で紹介したスタイルに追加しておきました🤓
scroll-behavior に関しては、Google Chrome でページ内検索の動作にも影響してしまうなど、個人的に以前は嫌悪感を示すほどに嫌いだったんですが、いつからか影響しなくなっていたので、割とポジティブに利用推奨するスタンスになっています。
記事としては以上になります。
何かの参考になりましたらば。
ではでは、良きユーザースタイルライフを🎉
Discussion