【はてなブログ】はてなキーワードを目立たなくする方法

使用するテーマによてっ違うのか、それともはてな側がCSSを変更しているのかネットで調べるCSSではうまくいかない感じだったので自力でやってみました。CSSでいくら頑張ってもリンク（a)は消えません。HTML上ではリンクのままです。

はてなブログPRO（有料）にすると、ブログの文中のはてなキーワードをオフにできます。この場合は、HTML上でもリンクが消えます。ただし、PRO申し込み前に投降した記事は再投稿しない限りはキーワードリンクはついたままです。過去の過去記事を手動で１つずつ再投稿するのは大変なのでCSSで暫定的に対策するというのもありかと思います。

下線を消す

a.keyword {
    border-bottom: 0!important;
    text-decoration: none!important;
}

「カスタマイズ」-＞「デザインCSS」に上記を追加

私が調査したテーマでは、border-bottom: 1pxで下線をつけていましたのでそれを打ち消すCSSを書きます。もしかすると、text-decorationを使用しているものもあるかもしれませんので、念のため書いておきます。

リンクだと分からないように、マウスの形状を変えない

.entry-content .keyword {
    cursor: default!important;
}

「カスタマイズ」-＞「デザインCSS」に上記を追加

私が調査したテーマでは、.entry-content .keywordでimportantを付けて設定したありました。ということでこれを打ち消す属性を書きます。
ネットで調べたところでは、「cursor: default!important;」は書いてありましたが、違うセレクタに書いてあるために、実際には反映できてませんでした。たぶん、はてな側が対策らしきことをしたのでは？と思います。

キーワードをクリックしても、リンク先に飛ばないようにする（リンク無効）

.entry-content .keyword {
    pointer-events: none !important;
}

・pointer-events - CSS | MDN

動作はそうなりますが、リンクはHTML上では残ったままです。また古いブラウザではサポートされていません。
無料ではてなブログを利用してる場合は、ここまでやらないほうが良い気もする

たぶん、こちらもたぶん、はてな側が対策らしきことをしているような雰囲気です。CSSで!important;を付けたりはしないと思うので・・・。

はてなが対策してるような個所？は、規約違反にならなくても頑張らないほうが良いかもとは思います。

キーワードリンクの文字色関係

.entry-content a.keyword,
.entry-content a.keyword:visited{
    color:#222; /*文字色*/
}

もし、文字の色を変えたいのなら、このあたりを追記すればOKだと思う。

JavaScriptでaタグを消す

できるけど、無料版でそこまでやると規約違反のような気が個人的にはします。