はてなブログのサイドバーのリンク色を変更する

うちのはてなブログのサイドバーですが、表示している各モジュールのリンクの色が薄くてちょっと見えにくい。ので、視認性を良くするためにカスタマイズ方法を調べました。以下メモ書き。

 

・サイドバーのプロフィールのリンク色を青色にする

/*クリック前の色*/

.hatena-module-profile a:link {color:#0040FF;}

/*クリック後*/

.hatena-module-profile a:visited {color:#9F81F7;}

/*マウスを重ねた時*/

.hatena-module-profile a:hover {color:#81F7F3;}

 

・サイドバーのカテゴリーのリンク色を青色にする

/*クリック前の色*/

.hatena-module-category a:link {color:#0040FF;}

/*クリック後*/

.hatena-module-category a:visited {color:#9F81F7;}

/*マウスを重ねた時*/

.hatena-module-category a:hover {color:#81F7F3;}

 

・サイドバーの最新記事のリンク色を青色にする

/*クリック前の色*/

.hatena-module-recent-entries a:link {color:#0040FF;}

/*クリック後*/

.hatena-module-recent-entries a:visited {color:#9F81F7;}

/*マウスを重ねた時*/

.hatena-module-recent-entries a:hover {color:#81F7F3;}

 

・サイドバーの月別アーカイブのリンク色を青色にする

/*クリック前の色*/

.hatena-module-archive a:link {color:#0040FF;}

/*クリック後*/

.hatena-module-archive a:visited {color:#9F81F7;}

/*マウスを重ねた時*/

.hatena-module-archive a:hover {color:#81F7F3;}

 

上記の緑色部分のコードをデザイン設定画面→「カスタマイズ」タブ→「デザインCSS」に記述するとできました。