CSSの話

はてなダイアリーのキーワードリンクと通常のリンク(例：こういう見栄えのリンク)が同じ見栄えだとものすごく読みづらいし、どれがダイアリー執筆者の意図的リンクなのかわからないし、ひどい人になると「誤爆UZEEEEEEE!!!!!!」とか言ってキーワード削除屋に変身したりしがちなので、CSSで見栄えを変えましょうよ、という提案を何度かしてるわけなのですけども、具体的にどうやったらいいかわからない人が意外に多いんじゃないかと思ったので、やり方をレクチャっちゃいます。CSS神とかを差し置いてこのデザインセンスゼロのくされ外道が。

ダイアリ右上の「設定」をクリック。「スタイルシート」と書かれているテキストボックスに以下を追加する

a.keyword {
color: #000000;
text-decoration: none;
border-bottom: 1px solid #E1E1E1;
}

こうするとキーワードリンクの場合は文字色が黒で、薄いグレーの下線が引かれるようになる。#000000 ←これとか #E1E1E1 ←これが色を表していて、どういう数字にしたらどういう色になるのかがわからないならGoogleで「カラーパレット」を検索してくだちゃい。目立たない色にすれば読む際にキーワードは気にならなくなる。ちなみにここ模倣犯ではもうちょっと細かく指定していて、以下のようになってる。最初の囲みが通常のリンク用のCSSで、下の囲みがキーワードリンク用のCSS。丸ごと真似してくれて構いません。あ、でもこれは正しいHTMLをもりもり頑張ってる人からするとvalidじゃなくて死ぬほどみすぼらしいCSSなので、本当は真似しないで正しいCSS使いになるのが望ましいです。
通常リンク

a:link,a:visited,a:active {
padding : 2px 2px 0px 2px;
color : #0A587E;
text-decoration : none;
border-bottom : 1px solid;
}

a:hover {
padding : 2px 2px 0px 2px;
text-decoration : none;
color : #0A587E;
background : #F8FEFE;
border : none;
}

キーワードリンク

a.keyword:link,a.keyword:visited,a.keyword:active{	
color: #333333;
background:#FFFFFF;
text-decoration: none;
border-bottom: 1px solid #E1E1E1;
padding: 0;
}

a.keyword:hover {
text-decoration: none;
border: none;
color : #0A587E;
background : #F8FEFE;
padding: 0;
}