はてなブログ無料版でキーワードリンク(下線)を記事から消す方法2018-08-14はてなブログ無料版でキーワードリンク(下線)を記事から消す方法ブログデザインこんにちは。ブログのカスタマイズ、第8弾になります。「はてなキーワード」サービスによるキーワードリンクの削除についてです。「はてなキーワード」サービスは簡単に言うとWikipediaの「はてな」版です。記事中の単語が「はてなキーワード」内に登録されていると自動でリンクが付きます。Pro版に移行することでオフにできます。(Pro版契約前の過去記事は一度更新(内容の変更は不要)が必要になります。)Pro版への移行も検討したのですが、まだブログを初めたばかりの私には早すぎるという結論になりました。何かないかと、いつものように先人のお知恵に頼りながら設定したのですが、ちょっと躓いてしまいました。以下が調べた結果になります。あなたの参考になれば幸いです。考え終わりにおすすめ記事です。はじめに最初に私が採用した方法の設定に必要なことを記載します。はてなブログ無料版を利用中で、「キーワードリンクを削除」だけしたい方は、そのまま指定の場所にコピペしていただければ動作すると思います。無料版でキーワードリンクを消すために必要な1ステップPoint紹介するコードをコピペする前にすでに追加しているコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。タイトル下の最後に以下のコードをコピペし、[変更を保存する]をクリックして確定します。]]></script>※改行しているかもしれませんが3行です。以上で設定は完了です。設定の意味など詳しくは後述しています。興味がある方は最後までお付き合いください。参考サイトなお、オリジナルは「Ari」さんの以下の記事です。こちらを基にそのまま設定させていただきました。holic.hateblo.jp後述するCSSを使用する方法を試していて、どうも私にはいまいちだったときに見つけることが出来ました。必要なことが書かれています。エクセレント!以下は、はてなキーワードリンクや他の方法についての補足です。はてなキーワードのリンクについて当初から見ずらいし、正直気にはなっていたのですが、無料で利用させて貰っていますので、仕方がないと納得していました。いつかPro版に移行できるようになったら消そうと考えていました。ある記事でソート付きの表を作成していたところ、列名にまでキーワードリンクが挿入されるに至り、どうにかならないか(ソートできずにリンクに飛んでしまう)と考えたことが発端です。そのときは一時的に文字の間にスペースを入れて凌ぎました。質」のようなイメージ。以下のような書式でリンクが埋め込まれています。記事を右クリックし、[検証]から確認できます。reference))のみを記事内から検索して削除しています。記事がブラウザで読み込まれる前はリンクは設定前と同様に残ったままになります。ブログ内から完全に削除するものではありません。削除」で検索すると、すぐにCSSを利用する方法が見つかります。当ブログも過去にCSSに設定を追記していますので、同じように簡単に出来るのだなと思いました。PC用とスマホ用で設定箇所が異なるのですが、コピペする内容は基本同じ。当ブログが利用させていただいている「こどみす」さん作成のテーマ「Minimalism」は、レスポンシブ対応ですので、PC用と同じで「デザインCSS」にコピペします。デザインCSSまず、よく見かけるコードです。当初、コードの意味も深く考えず、そのままコピペしました。#5A5A5A;}早速確認してみましたが、以下の点が私にはいまいちでした。リンクを示す下線は消えるがリンク自体は消えないカーソルをポイントするとカーソルがリンクの時と同じになる実際にクリックすると、はてなキーワードのリンクに飛ぶ書き手からすると見た目はきれいになりますので、その点はまあよいかと思います。読み手からとすると単なる隠しリンクになってしまい、不意打ちでリンク先に飛ばされているように感じてしまいます(私個人の感想です)。これであれば、まだリンクと分かるようになっていた方がよいです。期待する結果にならないため、初めてコピペしたコードの意味を調べました。設定の一部しか反映されていないようです。はてなブログで利用しているテーマに合った指定の仕方が必要らしいことが分かりました。テーマ毎の設定を調べる方法は、「Milk」さんの以下の記事が参考になると思います。www.milkmemo.comすでにCSSに何か設定している人は、他の設定を見てもよいと思います。私は見出しの設定を見て気づきました。以下のコードを設定しました。「Minimalism」テーマを利用している方は、以下のままで大丈夫です。テーマでも同様と思いますので、試しに設定してみてもよいと思います。上手く反映されなければ、前述のサイトを参考に確認してみてください。#5A5A5A;}今度は設定が反映されており、先ほどのいまいちな部分も以下のように解消しています。カーソルをポイントしてもカーソルが変わらない実際にクリックしても、はてなキーワードのリンクに飛ばないこれなら読み手から見るとよいですね。書き手としてはある問題が残ったままです。スマホ用の設定についてちなみに利用中のテーマがレスポンシブ未対応の場合で、スマホ用に設定するには、デザイン=>カスタマイズ=>記事=>記事上下のカスタマイズ=>記事上にコピペします。CSSを追記する場合は<style></style>も記載して、間に上記のCSSを追記する必要があります。以下のような感じです。適時、CSS部分は読み替えてください。チェックを入れる必要があるようです。私は未確認ですので動作しなくてもご了承ください。CSSを使用した方法の「ある問題」とはそれは結局、読み手が見ている記事内に隠しリンクがあることに変わりがないことです。このCSSを利用する方法を紹介している記事では必ずと言ってよいほど「隠しリンクはSEO的にマイナスになる(らしい)」との言及があります。Optimization(検索エンジン最適化)にマイナスの影響が、どの程度あるのかは、はっきりとは分かりませんが、何らかの影響はありそうです。検索界の圧倒的シェアを誇るGoogle純正のツールである「Lighthouse」を使用して、当ブログのSEOスコアを確認してみました。結果は、CSS設定前後でスコアに変化はありませんでした(同点でした)。(ちなみに当ブログが採用したJavaScriptの設定前後でも同様でした。)(あくまでこのツールの)チェック項目にも「隠しリンク」についてはありません。リンクに対する説明という項目はありました。隠しリンクがあることによるSEOへの影響がどれほどあるのかを確認することは、私には難しそうです。以下の記事が分かりやすいです。ヘルプに以下の記述があります。ウェブマスター向けガイドライン(品質に関するガイドライン)への違反にあたります。偽装行為であり、違反であると教えてくれていますので、しっかりと従いたいと思います。(「白の背景で白のテキストを使用する」も偽装行為なのですね。テキストサイト全盛時代にネットサーフィンを嗜んだ身としては普通の行為と思っていました。あやうくこの記事で設定するところでした。)ということで、CSSを使用した方法は私は採用できないため、設定はあきらめかけていたところ「Ari」さんの記事を見つけて、無事設定することが出来ました。念のためとなりますが、JavaScriptの処理を追加していますので、体感できるかは別として、設定前よりは記事の読み込みに時間が掛かることが考えられます。この方法にも何か想定外のデメリットがある可能性はあります。ご利用は自己責任でお願いします。終わりにいつかPro版に移行したいとは思っていますが、まだブログを開始して、2ヶ月も経過していません。これからも続けていけるのか、まだまだ分かりません。今はまだやる気もありますし、続けられていますが、時間の使い方をもう少し考えないと厳しいとはうすうす感じています。本も読みたいですし、簿記の勉強もしたいし、株価もチェックしたい。やりたいことが多すぎます。やりたいことがあるというのは幸せなのでしょうが。1年ぐらい続けられれば確信も持てそうです。===後日追記ここから===結局、3ヶ月後にProに移行してしまいました。65記事ぐらいでしたが、すべて再読み込みするのは大変でした。www.inside-shiina.comあなたがブログを続けていこうと考えているのなら早めにProに移行してしまった方がよいですよ。参考リンク:「読まれるブログ」は、はてなブログPro本当に大変(面倒)です。===後日追記ここまで===それでは、また。はてなブログにGoogle検索ボックスを設定できます。アフィリエイトの始め方です。www.inside-shiina.com格安スマホへ乗り換え前に必要なことを纏めています。www.inside-shiina.com通信費削減のために自宅のネット回線を楽天モバイル(モバイルルーター代わり)にするという選択肢はありですよ。www.inside-shiina.comスキマ時間を使って楽天ポイ活始めませんか。おすすめアプリと獲得ポイント数を見える化しました。08:00この記事が少しでもいいな、と思ってくれたら、知り合いやSNSにシェアしたり、ブックマークなどしてくれるとうれしいです。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。