杜の里から

日々のつれづれあれやこれ

ブログをカスタマイズする(8) ~はてなリンクの下線を消す~

はてなブログを始めて違和感を感じた事は多々ありますが、その中でも記事の見た目で勘弁してほしかったのが、いわゆる「はてなリンク」というものでした。

はてなブログには記事中に登場する単語に「はてなキーワード」への自動リンクキーワードリンク)が設定されていて、初めは細かな破線で表示されていましたが、数々の設定をしている内にいつの間にかリンク部は実線となっていました。

そしたらまあ、見づらいの何の…w。 ↓ 

f:id:OSATO:20190721151419j:plain

ゴシック部分にはがっちりの太線、こりゃ何とかせねばという事で早速検索、以下のブログを見つけました。

ここではキーワードリンクについても分かりやすく解説してくれていました。どうもありがとうございます。

pea-nut.hatenablog.com

具体的なCSSコードはこの記事からリンクするこちらのブログ記事に紹介されていて、今回はそのまま流用させてもらいました。どうもありがとうございます。

akiueo.hatenablog.com

はてなリンクの下線を消す

/* はてなリンクの下線を消す */

.keyword{

border: 0 !important;

text-decoration: none !important;

pointer-events: none !important;

}

ブログ先では【cursor: default;】(カーソル:標準)と【color: #5A5A5A;】(色:グレー)という行もありましたが、ここでは変更する項目だけを採用する事にしました。

そうして出来上がった画面がこちら。↓ 

f:id:OSATO:20190721151422j:plain

下線が消え、すっきりした画面になりました。

でも実際は「はてなリンク」そのものが消えた訳ではなく、あくまで見た目上で消えただけなのでカーソルを重ねるとリンクも分かり、そこをクリックするとリンク先に飛ぶ様になっています。

でも考えたら、ブログを読む時はわざわざカーソルをなぞりながら読む訳じゃないし、こちらが指定したリンクは色違いで分かりますから、別にこれで問題ない訳ですね。

 

見た目だけじゃなく、本体から完全にリンクを取り去りたい場合はこちらのブログ記事が参考になります。

www.inside-shiina.com

ブログの体裁もこれで大分すっきりしました。

 

後はいよいよ最後の追い込み、カスタマイズはもう少しです。