koblog

高校生のWEBデザインブログ

はてなキーワードのリンクを消す方法

サムネイル

はてなブログを使っていると、どうしても特定のキーワード(はてなキーワード)にリンクとアンダーラインが付いてしまいます。このリンクはブロガーだけでなく、見る人にとっても面倒なのです。そこで今回は「はてなキーワードのリンクを無効にする方法」を紹介します。

 

はてなキーワードとは

これ(下の画像)のことです。

f:id:somethingreview:20190208175005j:plain

 

見づらいので拡大してみました。

Twitterの文字の下にアンダーライン(点線)が引いてあるのが分かると思います。

f:id:somethingreview:20190208175008j:plain

 

これを間違えて押してしまうとキーワードの解説記事に強制的に移ってしまいます。 

はてなキーワードのリンクを消してみる

ここからはてなキーワードのリンクを無効にする方法を紹介していきます。

今回はCSSの「pointer-events」を使います。

 

元々はaタグのリンクを消すものですが、はてなキーワードにもaタグが使われているので、同じようにリンクを無効にすることができます。下のコードをデザインCSSに記述してください。

CSS
a.keyword {
  text-decoration: none;/* アンダーラインを無効 */
  pointer-events: none;/* リンクを無効 */
}

 

これだけでOKです。

ただ、これでも反映されない場合は直接CSSを変更する必要があります。

詳しくは下の記事を参考にしてください。 

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる