こんにちは。シーナと申します。
ブログのカスタマイズ、第8弾になります。
「はてなキーワード」サービスによるキーワードリンクの削除についてです。
「はてなキーワード」サービスは簡単に言うとWikipediaの「はてな」版です。
記事中の単語が「はてなキーワード」内に登録されていると自動でリンクが付きます。
この小さな親切機能は Pro版に移行することでオフにできます。
（Pro版契約前の過去記事は一度更新（内容の変更は不要）が必要になります。）
Pro版への移行も検討したのですが、まだブログを初めたばかりの私には早すぎるという結論になりました。
何かないかと、いつものように先人のお知恵に頼りながら設定したのですが、ちょっと躓いてしまいました。
以下が調べた結果になります。
あなたの参考になれば幸いです。
- はじめに
- 無料版でキーワードリンクを消すために必要な1ステップ
- 参考サイト
- はてなキーワードのリンクについて
- はてなキーワードリンクの書式
- 代表的なCSSを使う方法のいまいちな点
- スマホ用の設定について
- CSSを使用した方法の「ある問題」とは
- 「Lighthouse」ツールによるSEOスコアの確認
- 隠しリンクに対する Google の考え
- 終わりに
- おすすめ記事です。
はじめに
最初に私が採用した方法の設定に必要なことを記載します。
はてなブログ無料版を利用中で、「キーワードリンクを削除」だけしたい方は、そのまま指定の場所にコピペしていただければ動作すると思います。
無料版でキーワードリンクを消すために必要な1ステップ
紹介するコードをコピペする前にすでに追加しているコードのバックアップ（どこかにコピペ）を取っておくことをお勧めします。
ステップ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」さんの以下の記事です。
こちらを基にそのまま設定させていただきました。
後述する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」さんの以下の記事が参考になると思います。
すでに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 の以下の記事が分かりやすいです。
隠しリンクに対する Google の考え
Google の Serch Console のヘルプに以下の記述があります。
隠しテキストと隠しリンク
Google の検索結果でのランキングを操作するためにコンテンツに隠しテキストや隠しリンクを含めることは、偽装行為と見なされることがあり、Google のウェブマスター向けガイドライン（品質に関するガイドライン）への違反にあたります。
出典：隠しテキストと隠しリンク - Search Console ヘルプ
当ブログは、SEOを気にするようなブログではありませんが、
偽装行為であり、違反である
と教えてくれていますので、しっかりと従いたいと思います。
（「白の背景で白のテキストを使用する」も偽装行為なのですね。
テキストサイト全盛時代にネットサーフィンを嗜んだ身としては普通の行為と思っていました。
あやうくこの記事で設定するところでした。）
ということで、CSSを使用した方法は私は採用できないため、設定はあきらめかけていたところ「Ari」さんの記事を見つけて、無事設定することが出来ました。
念のためとなりますが、JavaScriptの処理を追加していますので、体感できるかは別として、設定前よりは記事の読み込みに時間が掛かることが考えられます。
また、この方法にも何か想定外のデメリットがある可能性はあります。
ご利用は自己責任でお願いします。
終わりに
いつかPro版に移行したいとは思っていますが、まだブログを開始して、2ヶ月も経過していません。
これからも続けていけるのか、まだまだ分かりません。
今はまだやる気もありますし、続けられていますが、時間の使い方をもう少し考えないと厳しいとはうすうす感じています。
もっと本も読みたいですし、簿記の勉強もしたいし、株価もチェックしたい。
やりたいことが多すぎます。
やりたいことがあるというのは幸せなのでしょうが。
1年ぐらい続けられれば確信も持てそうです。
＝＝＝後日追記ここから＝＝＝
結局、3ヶ月後にProに移行してしまいました。
65記事ぐらいでしたが、すべて再読み込みするのは大変でした。
あなたがブログを続けていこうと考えているのなら早めにProに移行してしまった方がよいですよ。
参考リンク：「読まれるブログ」は、はてなブログPro
本当に大変（面倒）です。
＝＝＝後日追記ここまで＝＝＝
それでは、また。
おすすめ記事です。
はてなブログにGoogle検索ボックスを設定できます。
iHerb アフィリエイトの始め方です。
格安スマホへ乗り換え前に必要なことを纏めています。
通信費削減のために自宅のネット回線を楽天モバイル（モバイルルーター代わり）にするという選択肢はありですよ。
スキマ時間を使って楽天ポイ活始めませんか。おすすめアプリと獲得ポイント数を見える化しました。
