はてなブログは公開するとキーワードが勝手にリンクになり下線が引かれてしまいます。
読者としては、コレが結構読みづらいです。
できれば消したい…
今回は、有料版の方はもちろん!無料版の方も勝手に入るキーワードリンクを消す方法をご紹介します!
2つあるので両方見てみて下さいね。
キーワードリンクの下線を消したい!
はてなブログの無料版を使っていると、不便だなーと感じる悩みの1つに”何故かついてしまうキーワードのリンク”があると思います。
何から何までどんな言葉でもキーワードリンクの下線があると非常に読みにくいというのが読者目線だと思います。
今回は、このキーワードリンクの下線の消し方をご紹介できればと思います。
これは、はてなブログの仕様のようで、消す方法は2つあります。
はてなブログのPro(有料版)にしてチェックボックスに✔を入れる!
はてなProにすれば消す事ができます。
方法は簡単で、下記の手順で変更ができます。
「ダッシュボード」→「設定」→「詳細設定」
キーワードリンクの部分のチェックボタンをクリック。
「変更する」ボタンを押して終了です。
ただ、この方法だと問題点があります。
はてなブログProにお申込みした以前に書いていた記事には反映されないのです。
ほんとこの仕様はやめて欲しいと思うんですけど仕方ないですね。
とは言っても、このキーワードリンク邪魔で読みづらいと思いませんか?
どうしても消したいという私と同意見の方は、下記の方法をオススメします。
無料版必見!CSSでキーワードリンクの下線を消す方法
下記の手順で設定をすれば、無料版であっても無くても、キーワードの下線がなくなります。!
「ダッシュボード」→「設定」→「デザイン」
スパナマークをクリックデザインCSSを開く
デザインCSSに下記のCSSを貼り付けて下さい。
コピペで大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="synComment" style="margin: 2px 0px 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #4f80e5;">/* 勝手につくキーワードリンクを消す */</span> <span class="synStatement" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #d88a17;">a</span><span class="synIdentifier" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #51cfcf;">.keyword</span> <span class="synIdentifier" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #51cfcf;">{</span> <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">border</span>: <span class="synConstant" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #ff6666;">0</span> <span class="synSpecial" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #c000c0;">!important</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">text-decoration</span>: <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">none</span> <span class="synSpecial" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #c000c0;">!important</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">pointer</span>-events: <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">none</span> <span class="synSpecial" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #c000c0;">!important</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">cursor</span>: <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">default</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">color</span>: <span class="synConstant" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #ff6666;">#5A5A5A</span>; <span class="synIdentifier" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #51cfcf;">} </span> |
スマホページがある方は、下記の部分にもCSSを入れましょう。
ダッシュボード→デザイン→スマホマーク→記事上
入れるCSSは下記です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="synComment" style="margin: 2px 0px 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #4f80e5;"> /* 邪魔なキーワード下線を消す */ <span style="color: #2196f3;"></script></span></span> <span class="synStatement" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #d88a17;">a</span><span class="synIdentifier" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #51cfcf;">.keyword</span> <span class="synIdentifier" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #51cfcf;">{</span> <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">border</span>: <span class="synConstant" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #ff6666;">0</span> <span class="synSpecial" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #c000c0;">!important</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">text-decoration</span>: <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">none</span> <span class="synSpecial" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #c000c0;">!important</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">pointer</span>-events: <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">none</span> <span class="synSpecial" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #c000c0;">!important</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">cursor</span>: <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">default</span>; <span class="synType" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #3ec63e;">color</span>: <span class="synConstant" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #ff6666;">#5A5A5A</span>; <span class="synIdentifier" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; background: transparent; color: #51cfcf;">} <span style="color: #2196f3;"></script></span></span> |
まとめ
この方法を使えば、無料版であっても、有料版であっても勝手にキーワードリンクが貼られる事がなくなります。やっぱり読者さんの事を考えるとコレは結構邪魔ですからね…※特にスマホの場合。
また、最初から有料版にしようとしている方は、最初のチェックボックスだけで解決する方法をおすすめします。余計なCSSを追加しないで済みますからね。
最後までありがとうございました。