インサイド シーナ

日々の備忘録(40代男性の場合)

はてなブログ無料版でキーワードリンク(下線)を記事から消す方法

キーワードリンク

こんにちは。シーナと申します。

ブログのカスタマイズ、第8弾になります。

「はてなキーワード」サービスによるキーワードリンクの削除についてです。

「はてなキーワード」サービスは簡単に言うとWikipediaの「はてな」版です。

記事中の単語が「はてなキーワード」内に登録されていると自動でリンクが付きます。

この小さな親切機能は Pro版に移行することでオフにできます。

(Pro版契約前の過去記事は一度更新(内容の変更は不要)が必要になります。)

Pro版への移行も検討したのですが、まだブログを初めたばかりの私には早すぎるという結論になりました。

何かないかと、いつものように先人のお知恵に頼りながら設定したのですが、ちょっと躓いてしまいました。

以下が調べた結果になります。

あなたの参考になれば幸いです。

最初に私が採用した方法の設定に必要なことを記載します。

はてなブログ無料版を利用中で、「キーワードリンクを削除」だけしたい方は、そのまま指定の場所にコピペしていただければ動作すると思います。

無料版でキーワードリンクを消すために必要な1ステップ

Point

紹介するコードをコピペする前にすでに追加しているコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。

ステップ1 デザイン => カスタマイズ => ヘッダ => タイトル下にコピペ

デザイン => カスタマイズ => ヘッダ => タイトル下

の最後に以下のコードをコピペし、[変更を保存する]をクリックして確定します。

 

<script type="text/javascript">// <![CDATA[
addEventListener("DOMContentLoaded",function(){var a=document.getElementsByClassName("entry-content");if(a)for(var i=0;i<a.length;i++)for(var b=a[i].getElementsByClassName("keyword");b.length;)b[0].outerHTML=b[0].textContent},!1);
// ]]></script>

※改行しているかもしれませんが3行です。

 

以上で設定は完了です。

いかがでしょうか。

設定の意味など詳しくは後述しています。

興味がある方は最後までお付き合いください。

参考サイト

なお、オリジナルは「Ari」さんの以下の記事です。

こちらを基にそのまま設定させていただきました。

holic.hateblo.jp

後述するCSSを使用する方法を試していて、どうも私にはいまいちだったときに見つけることが出来ました。

さらりと必要なことが書かれています。

エクセレント!

以下は、はてなキーワードリンクや他の方法についての補足です。 

はてなキーワードのリンクについて

当初から見ずらいし、正直気にはなっていたのですが、無料で利用させて貰っていますので、仕方がないと納得していました。

いつかPro版に移行できるようになったら消そうと考えていました。

しかし、ある記事でソート付きの表を作成していたところ、列名にまでキーワードリンクが挿入されるに至り、どうにかならないか(ソートできずにリンクに飛んでしまう)と考えたことが発端です。

そのときは一時的に文字の間にスペースを入れて凌ぎました。

「糖質」→「糖 質」のようなイメージ。

はてなキーワードリンクの書式

以下のような書式でリンクが埋め込まれています。

キーワードが「はてなブログ」の場合

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

これは Google Chrome で記事を右クリックし、[検証]から確認できます。

前述のJavaScriptのコードは、ブラウザが記事を読み込む際(DOMContentLoadedイベント)に、「はてなキーワード」サービスのリンク(a タグのクラス名"keyword"のhref(hypertext reference))のみを記事内から検索して削除しています。

記事がブラウザで読み込まれる前はリンクは設定前と同様に残ったままになります。

ブログ内から完全に削除するものではありません。 

代表的なCSSを使う方法のいまいちな点

「はてなブログ キーワード リンク 削除」で検索すると、すぐにCSSを利用する方法が見つかります。当ブログも過去にCSSに設定を追記していますので、同じように簡単に出来るのだなと思いました。

PC用とスマホ用で設定箇所が異なるのですが、コピペする内容は基本同じ。

当ブログが利用させていただいている「こどみす」さん作成のテーマ「Minimalism」は、

レスポンシブ対応ですので、PC用と同じで「デザインCSS」にコピペします。

 

デザイン => カスタマイズ => デザインCSS

まず、よく見かけるコードです。

当初、コードの意味も深く考えず、そのままコピペしました。

 

a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
color: #5A5A5A;
}

 

早速確認してみましたが、以下の点が私にはいまいちでした。

  • リンクを示す下線は消えるがリンク自体は消えない
  • カーソルをポイントするとカーソルがリンクの時と同じになる
  • 実際にクリックすると、はてなキーワードのリンクに飛ぶ

書き手からすると見た目はきれいになりますので、その点はまあよいかと思います。

しかし、読み手からとすると単なる隠しリンクになってしまい、不意打ちでリンク先に飛ばされているように感じてしまいます(私個人の感想です)。

これであれば、まだリンクと分かるようになっていた方がよいです。

期待する結果にならないため、初めてコピペしたコードの意味を調べました。

どうやら設定の一部しか反映されていないようです。

はてなブログで利用しているテーマに合った指定の仕方が必要らしいことが分かりました。 

テーマ毎の設定を調べる方法は、「Milk」さんの以下の記事が参考になると思います。

www.milkmemo.com

すでにCSSに何か設定している人は、他の設定を見てもよいと思います。

私は見出しの設定を見て気づきました。

改めて、以下のコードを設定しました。

「Minimalism」テーマを利用している方は、以下のままで大丈夫です。

大抵のテーマでも同様と思いますので、試しに設定してみてもよいと思います。

上手く反映されなければ、前述のサイトを参考に確認してみてください。

 

.entry-content a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
color: #5A5A5A;
}

 

今度は設定が反映されており、先ほどのいまいちな部分も以下のように解消しています。

  • カーソルをポイントしてもカーソルが変わらない
  • 実際にクリックしても、はてなキーワードのリンクに飛ばない

これなら読み手から見るとよいですね。

しかし、書き手としてはある問題が残ったままです。

スマホ用の設定について

ちなみに利用中のテーマがレスポンシブ未対応の場合で、スマホ用に設定するには、

デザイン=>カスタマイズ=>記事=>記事上下のカスタマイズ=>記事上

にコピペします。 
初めてCSSを追記する場合は<style></style>も記載して、間に上記のCSSを追記する必要があります。

以下のような感じです。適時、CSS部分は読み替えてください。

 

<style>
.entry-content a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
color: #5A5A5A;
}
</style>

 

そして、デザイン=>カスタマイズ=>スマートフォン=>記事=>記事上下のカスタマイズ=>[PCと同じHTMLを表示する] にチェックを入れる必要があるようです。

私は未確認ですので動作しなくてもご了承ください。

CSSを使用した方法の「ある問題」とは

それは結局、読み手が見ている記事内に隠しリンクがあることに変わりがないことです。

このCSSを利用する方法を紹介している記事では必ずと言ってよいほど

「隠しリンクはSEO的にマイナスになる(らしい)

との言及があります。 

Search Engine Optimization(検索エンジン最適化)にマイナスの影響が、どの程度あるのかは、はっきりとは分かりませんが、何らかの影響はありそうです。

「Lighthouse」ツールによるSEOスコアの確認

検索界の圧倒的シェアを誇るGoogle純正のツールである「Lighthouse」を使用して、当ブログのSEOスコアを確認してみました。

結果は、CSS設定前後でスコアに変化はありませんでした(同点でした)。

(ちなみに当ブログが採用したJavaScriptの設定前後でも同様でした。)

(あくまでこのツールの)チェック項目にも「隠しリンク」についてはありません。

リンクに対する説明という項目はありました。

隠しリンクがあることによるSEOへの影響がどれほどあるのかを確認することは、私には難しそうです。 

「Lighthouse」については、GIGAZINE の以下の記事が分かりやすいです。

gigazine.net

隠しリンクに対する Google の考え

Google の Serch Console のヘルプに以下の記述があります。

隠しテキストと隠しリンク

Google の検索結果でのランキングを操作するためにコンテンツに隠しテキストや隠しリンクを含めることは、偽装行為と見なされることがあり、Google のウェブマスター向けガイドライン(品質に関するガイドライン)への違反にあたります。

出典:隠しテキストと隠しリンク - Search Console ヘルプ 

当ブログは、SEOを気にするようなブログではありませんが、

偽装行為であり、違反である

と教えてくれていますので、しっかりと従いたいと思います。

(「白の背景で白のテキストを使用する」も偽装行為なのですね。
 テキストサイト全盛時代にネットサーフィンを嗜んだ身としては普通の行為と思っていました。
 あやうくこの記事で設定するところでした。)

ということで、CSSを使用した方法は私は採用できないため、設定はあきらめかけていたところ「Ari」さんの記事を見つけて、無事設定することが出来ました。

念のためとなりますが、JavaScriptの処理を追加していますので、体感できるかは別として、設定前よりは記事の読み込みに時間が掛かることが考えられます。

また、この方法にも何か想定外のデメリットがある可能性はあります。

ご利用は自己責任でお願いします。

終わりに

いつかPro版に移行したいとは思っていますが、まだブログを開始して、2ヶ月も経過していません。これからも続けていけるのか、まだまだ分かりません。

今はまだやる気もありますし、続けられていますが、時間の使い方をもう少し考えないと厳しいとはうすうす感じています。

もっと本も読みたいですし、簿記の勉強もしたいし、株価もチェックしたい。

やりたいことが多すぎます。

やりたいことがあるというのは幸せなのでしょうが。

1年ぐらい続けられれば確信も持てそうです。

 

それでは、また。

おすすめ記事です。

結局、3ヶ月後にProに移行してしまいました。

65記事ぐらいでしたが、すべて再読み込みするのは大変でした。

www.inside-shiina.com

ブログ更新のお供に体重に優しい飲み物はいかがでしょうか。

www.inside-shiina.com

おやつもあります。特にラスクはおすすめです。

www.inside-shiina.com

ローソンにはおいしい低糖質パンもあります。

www.inside-shiina.com

普段の商品選択の参考になれば幸いです。

www.inside-shiina.com

おいしく食べた後はお口のお手入れも忘れずに行いたいです。

www.inside-shiina.com

メインのネット回線を変えることで通信費を下げることに成功しました。

www.inside-shiina.com

ブログ更新のお供にYouTubeはいかがでしょうか。

作業用に雑談がおすすめです。

www.inside-shiina.com

素晴らしい音楽もあります。

www.inside-shiina.com

食事ネタ多めの森羅万象日常系ギャグ漫画です。

www.inside-shiina.com

日常系ギャグ漫画の古典にして名作です。約30年ぶりの新刊も今年発売しています。

www.inside-shiina.com

大号泣間違いなしの名作テニス漫画です。劇場版アニメもおすすめです。

www.inside-shiina.com