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

はてなブログを使っていて、前から気になっていたキーワード下線。

なんど、書きなおしても同じように下線がつくので、なんなんだろうと思ってました。

はてなプロならば、すぐにボタン一つでけせるみたいですね。

特に、スマホで見ると文字が見づらいので、なんとかならないかと思ってました。

はてなキーワードとは

はてなキーワードの説明ははてなブログのヘルプにありました。

はてなキーワードは、特定の言葉の意味や、そのキーワードを使っているブログ(口コミ)情報を効率よく知ることができるサービスです。それぞれの言葉についての情報ページを「キーワードページ」と呼び、ブログサービス「はてなブログ」「はてなダイアリー」のユーザーによって、新しいキーワードページが日々作成・編集されています。

ヘルプ - はてなキーワード

はてなブログだけの機能のようで、はてな市民だけが使えるとなってます。

でも、いらないですね。

はてなキーワードも編集出来るようですが、改編が行われていなようです。

また、その説明も中途半端なものが多いように思えます。

はてなキーワードのリンク下線を消す

これについては、CSSに貼り付けて私も一応実施しておきました。

引用元は、akiueoさんです。ありがとうございます。

akiueo.hatenablog.com

この中のソースを管理画面→デザイン→記事上下→記事上に書き込み

/* 邪魔なキーワード下線を消す */
a.keyword {
    border: 0 !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default;
    color: #5A5A5A;
}

これで、スマホも奇麗な表示になりました。 

キーワードリンクのリンクは残ってないのでは

上記のCSS追加で、表面上は消えているのですが、HTMLにはリンクは残っています。

と、色々な記事で書いてあるのですが、実際にHTML編集にして見てみても、リンクは残ってないように見えます。

本当にそうなのか検証してみますね。

以前の記事のキーワードリンク

さらに、皆さんの記事を見てみると、はてなプロに契約しても、それ以前の記事は治らないと、なっているのですが、私の記事では消えてます。

一番、最初の頃の記事をみても、消えているので解消されたのではないでしょうか。

キーワードリンクの仕組みを確認 

再度、デザインCSSに書き込んだ、ソースを消してみて、はてなキーワードに登録されている、文字のリンクがどうなるか確認してみることにしました。

はてなブログ　は、

<p>はてなブログ</p>　　　と、HTML編集では表現されています。

では、画面を右クリックして検証を押してみました。

すると以下のようにリンクがついているのがわかりました。

<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%ED%A5%B0">はてなブログ</a>

さて、再度、検証の為に記事上にCSSを書きこんでみます。

書き込み後は

はてなブログ　を　右クリックして検証を押してみると

<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%ED%A5%B0">はてなブログ</a>

やっぱり、残ってましたね^^;

ただ、過去記事は修正されないのではなくて、表面上は治っている状態にはなるようです。この点は改善されたようです。

ただ、隠れリンクは残ってます*1

確実に消す方法は

やはり、はてなプロにするのが一番のようです。

けれども、手間をかければ出来るようですね。

以下のサイトのワトソンさんが記事にされてますね。

0-chromosome.hatenablog.jp

以下のサイトに、はてなブログが自動リンク停止記法を書いています。

ただ、あまりにも制約が多くてやる気にはなりませんでした。

自動リンクを止める（自動リンク停止記法） - はてなダイアリーのヘルプ

 とりあえず、自分の場合には隠しリンクのまま、いくことにしました。

色々と無料ブログは制約がありますね!

*1:+_+