消えた!?リンクを無効化するCSSプロパティpointer-eventsを使ってみた&ブラウザごとの検証を少々

2014年09月29日

リンクを消すCSS「pointer-events」

け、消せた、リンクが消せたよぉ〜。

ありがとう、pointer-events
( ;∀;) カンドーシタ



ども、思った以上に仰々しい画像(↑)をつけてしまい、ちょっぴり後悔しているピアノ教室管理人です。
(;´Д`)


最近このブログを改装して、トップページに複数の新着記事の概要が並ぶスタイルに変更しました。
(こういう形式って何て呼べばいいんだろう?)


そして概要内の画像をクリックするとその記事へ飛べるようにリンクしたかったんですが、その機能はSeesaaブログには用意されていないんですよね。


そこで記事を書くとき、あらかじめ画像に対して記事へのリンクを仕込んでおくようにしたんです、こんな感じに。

pointer-events-image-link01_mini.jpg


しかし当然のことながら、記事ページでも画像に仕込んだリンクは残ったまま、なんですよね〜。

・・・邪魔っ!


そこでトップページではリンクを有効にしたまま、記事ページではそのリンクを無効にしたいと思ってググッていたら・・・ありました、ありましたよ。w

便利なCSSのプロパティが!




アンカーリンクを無効にしてくれる便利なCSSプロパティ「pointer-events」


アンカーリンクを無効にするpointer-events

リンクを無効にするには、CSS3で登場したpointer-eventsプロパティを使います。


pointer-eventsはその名の通り「pointer」、つまりマウスカーソルによるイベントに関わるプロパティです。


デフォルト値は「auto」となっているので、何も設定していないとマウスカーソルによるイベントが有効になり、「none」にすると無効になるというわけですね。


pointer-events:auto; /*有効*/
pointer-events:none; /*無効*/




さらにもうひとつ、マウスカーソルの形状を指定するプロパティ「cursor」も併用し、リンクの上でもカーソルの形が変わらないようにします。

値は標準カーソルを表す「default」を指定。



あとは<a>タグにclass属性をつけて・・・
<a class="goArticle" href="記事URL">
<img src="画像URL" width="640" height="410" alt="">
</a>


CSSでリンクを無効にするだけ!
.goArticle{
pointer-events:none;
cursor:default;
}


これでトップページではリンクを有効にしたまま、記事ページではそのリンクを無効にできました。
ヽ(*´∀`)ノ キャッホーイ!!



テキストリンクを無効化する場合


無効化する対象がテキストリンクの場合は、アンダーラインや文字色も指定しておくのをお忘れなく。

.goArticle{
pointer-events:none;
cursor:default;
text-decoration:none;
color:#000000; /*通常の文字と同じ色を指定*/
}



またリンクの文字色をブラウザ任せではなく、別途独自にCSSで指定している場合は...

a.goArticle{
color:#000000; /*通常の文字と同じ色を指定*/
}

が必要なこともあります。



Seesaaでトップページと記事でCSSを分けるには?


ちなみに、このSeesaaブログでトップページと記事ページとを明示的に指定する方法がわからなかったので、「デザイン > コンテンツ」で自由形式を追加し、先ほどのCSSを直書きし、記事ページだけで読み込むように設定しています。

seesaa-css01_mini.jpg

ちょっと強引。
(;´∀`)




ブラウザごとの挙動検証!実はまだ不安定なpointer-eventsプロパティ


pointer-eventsのブラウザごとの挙動検証

リンクを無効にできる便利なpointer-eventsプロパティですが、ブラウザによって挙動がマチマチな部分があって実装状況はまだ不安定みたいです。

IEは11からのサポートだったりしますし。


そこでちょっとブラウザごとの挙動を軽〜く調べてみました。



Google Chrome ver.37.0 & Opera ver.24.0


・テキストリンク
無効化問題なし

・画像リンク
無効化問題なし

画像をダブルクリックすると、画像が選択状態になる。
しかも親要素の幅いっぱいに青い選択範囲が広がる模様...。


Firefox ver.32.0.3


・テキストリンク
無効化問題なし

・画像リンク
無効化問題なし

画像をワンクリックすると、画像が選択状態になる。
選択範囲は画像のみ。


Internet Explorer11


・・・お察しの通りです。orz

・テキストリンク
無効化問題なし(?)

ただし画像と併用したリンクだと無効化されていないことがあります。

い、いや、もしかしたらまったく無効化されていないかもしれない...。
(ill゚д゚)


・画像リンク
無効化問題なし(?)

画像をダブルクリックすると、画像が選択状態になる。
選択範囲は画像のみ。

ただし条件によっては無効化されていないこともあります。
またマウスオーバーによる透過などの装飾は無効化されないことがあります。

つまり、状況によっては中途半端にリンクだという判定。
(´;ω;`) またIEだけ...

詳しい条件等はちょっとわかりません。汗


iOS,Max OS XのSafariなど


調査中...。


pointer-eventsプロパティの挙動テストページ


pointer-events-test01.html

※それぞれのブラウザの挙動の確認にご利用ください。



それではまた。
(´∀`*)ノシ バイバイ


【オヌヌメ】
よくわかるHTML5+CSS3の教科書【第2版】
「Webの知識が今、必要」で、「これからのWebの基礎力をつけたい」人のためのHTML5+CSS3本。amazon

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。