引用ブロック内がクリックできない原因と対処
この記事について
WordPressページ内で使った引用ブロック内のリンクがクリックできない事に気づいた。その時の対応を次のように残す。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
引用ブロック内がクリックできない原因と対処
クリックを妨げている部位
引用ブロックblockquoteタグ内のみクリックできず、htmlコードを見ると何かしらのcssが::beforeや::afterという疑似要素を作っていた。
その為、引用ブロック内の以下の場所で事故が起きている可能性が考えられた。
- blockquoteタグ
- blockquoteタグに関わる疑似要素
クリックを妨げている要因
リンクにマウスカーソルの焦点が当たらない事から、下の何れかの可能性が考えられた。
- クリックやマウスイベント受付拒否
- タグ要素がリンクに覆い被さりクリックを妨害
ただし、blockquoteタグ辺りはマウスカーソルが合うと反応する為、リンクに被っている可能性が高いと考えられる。
css追加でクリック可能に
以下のcssを追加したらクリック可能になった。
<style>
blockquote::before{
pointer-events: none
}
blockquote::after{
pointer-events: none
}
</style>pointer-eventsについて
マウスカーソルやタッチなどについて、焦点が当たる時の反応を設定できる、cssパラメータ。noneにする事で焦点が当たらないようになる。通常(指定なし)の挙動にする場合はauto。
まとめ
cssでblockquoteタグの疑似要素にカーソルの焦点が当たらないようにしたら解決した。またcssによる影響という事でもあるので、設定しているWordPressテーマまたはプラグインによってこのような事態になったと思われる。
プラグインやテーマ毎に動作確認する必要がありそうだが、治外ニートにとっては面倒な作業。
よろしく