はてなブログタグのキーワードのリンクを消す

hatenaロゴ

追記（2023/07/31）

はてなブログでは、記事内に含まれるキーワードに対して「はてなブログタグ」のリンクが自動で付与される仕様となっております。

このリンクを付与しない設定は、これまで、はてなブログの有料プラン「はてなブログPro」に限定された機能として提供しておりましたが、このたび、その制限を解除し、無料プランでもリンクを付与しない設定ができるようにしました。
引用：はてなブログ開発ブログ - はてなブログタグの自動リンク付与をオフする機能を無料プランでも使えるようにしました

はてなブログの無料版は、はてなブログタグ（はてなキーワード）に登録されている単語が自動的にリンクされてしまうので、とても見やすいとはいえないです...。
そこで、そのキーワードを消すためにCSSとJavaScriptを設定してみました。

まずCSSですが、隠したキーワードリンクにマウスを乗せてもカーソルが指マークではなく通常どおりIビームで表示されます。

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
.entry-content p {
    cursor: text !important;
}

.entry-content .keyword,
.entry-content .keyword:hover {
    pointer-events: none !important;
    border: 0 !important;
    text-decoration: none !important;
    padding: 0;
}

参考になるブログ・Webサイト

pointer-events: none と cursor: not-allowed を同時に使う

一部機能の提供廃止に伴い、既存のボタンをクリックできないようにする。また、そのボタンがクリックできないことを視覚的にもわかりやすくしたい。

クリック・タッチを無効化するCSS「pointer-events: none;」…

皆様はpointer-eventsというCSSプロパティーやその使い道をご存じでしょうか。マイナーな部類だとは思うのですが私はこのCSSプロパティーが好きなので、今回はこのpointer-eventsの概要について少し説明した後に、実例をいくつか載せていきます。

次にJavaScriptですが、キーワードリンクのaタグそのものを消すことができます。
（ページのソース上のタグは変わっていませんが、Chromeなどの検証ツールで確認するとちゃんと変更されています）

（デザイン→カスタマイズ→フッタにコードを入力）

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    if ($('.entry-content')[0]) {
        $('.keyword').contents().unwrap();
    };
});
</script>

参考になるブログ・Webサイト