【最新2023年11月有料版・無料版】はてなブログの記事中の下線削除方法・コード

こんにちは、産後腰痛になった2児の母、うさです。

普段はInstagramに育児漫画を投稿しています。

まとめ用にブログを立ち上げるにあたり、はてなブログのカスタムを行いました。たくさんのブログを参考にさせていただきましたが、備忘録のため・同じ悩みを解決したい方のため自身でも記事にすることにしました。

さて、はてなブログを始めた方で、自身の記事の中に下線リンクが入ってしまい困っているという方、いらっしゃると思います。

こちらははてなブログのサービスのひとつでキーワードリンク（タグ）と言います。名前の通り言葉の意味を知ったり関連ブログが検索できたりするんですが、正直いらない…。強調したいところでもないのに目が行きます。記事を読んでいても誤ってリンク先に飛んでしまうなんてことも。

一度設定してそのままだったので気づいていませんでしたが、「キーワードリンク」という名称から「はてなブログタグ」に変更になったようです。

理由はSNS等で「ハッシュタグ」が日常的に使われており、わかりやすくする為なんだとか。個人的には今までの名前の方が分かりやすいですが、いかがでしょうか…？

さらにこの変更で、有料版のはてなproだけで使えていた「記事にキーワードリンクを付与しない」という項目がなくなっており、無料版でも使える「はてなブログタグのリンク」という項目になりました。

上記のように2023年7月31日時点で「キーワードリンク」から「タグ」に変更されました。古い記事を参考にしていると、説明されている内容にある「キーワードリンク」や「記事にキーワードリンクを付与しない」のチェックボックスも無くなっています。

後述する新しい方法では有料版・無料版とも共通して使えますので、お試しください。

有料版・無料版とも操作方法は同じです。

①ダッシュボードの設定→②詳細設定→「記事本文にはてなブログタグのリンクを付与しない」にチェック→④ページ下部の「変更する」を忘れずクリック

できたでしょうか。

こちらのボタンひとつで簡単に解決！...と言いたいのですが、実はこれ、設定前に書いた記事には適応されません。有料版の方もです。初めての投稿前に設定を済ませない限り、付きまとってくる問題なのです。（どうせならこれもアップデートして欲しかった…笑）

しかし安心してください！以下のコードをコピペすれば、今までの記事を書き直すことなく解決できます！

責任は負えませんのでコードを触る際は必ずバックアップをお取りください。

CSSで消している方も多いようですが、カーソルを合わせると表示が変わってしまったり隠しリンクのようになって問題があるということで、JavaScriptで消すコードをお借りしました。

<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>

こちらのコードをダッシュボードから①デザイン→②カスタマイズ（スパナマーク）→③ヘッダと進み、「ブログタイトル下」に貼り付けます。忘れず「変更を保存する」を押してご自身のブログをご確認ください。

キーワードリンク（タグ）が消えてすっきりしていますね。

ただ、キーワードリンク（タグ）を辿ってブログに訪問して貰える機会がなくなりますので、そこについては理解した上でご利用ください。

今後も実際に使ったHTML・CSSコードを紹介していきます。参考になれば幸いです。

参考にしたブログはこちらです。

本記事にはフリー素材「ぱくたそ」からダウンロードした画像を使用しています。

腰痛うさぎうぇぶ