はてなブログのデザインテーマを見ていると、リンクの文字色は圧倒的に青系統が多いみたいに見えます。
そして調べてる内にこういう記事を見つけてなるほどねぇ～と思いましたが、僕のブログの基本カラーは緑（グリーン）と決めてますから、まあ関係ないやと我が道を進みます（笑）。
その中で見つけたのがこのブログ、求めていたものがどんぴしゃでした。
管理人さん、どうもありがとうございます。
brcxy.hatenablog.jp後は記事内で紹介されてるCSSコードから希望する色コードだけ変更し、〔デザイン〕→〔カスタマイズ〕→〔CSSコード〕に貼り付ければOKという手軽さです。
以下、ブログ記事を参考に今回変更したCSSコードを紹介します。
クリック前の色は濃いグレー［#666666］（クリック後も文字色は変えず）、マウスを乗せた時はライトグリーン［#00cc00］に変える様にしました。
・サイドバーのプロフィールのリンク色を緑色にする
/*クリック前の色*/
.hatena-module-profile a:link {color:#666666;}
/*クリック後*/
.hatena-module-profile a:visited {color:#666666;}
/*マウスを重ねた時*/
.hatena-module-profile a:hover {color:#00cc00;}
・サイドバーのカテゴリーのリンク色を緑色にする
/*クリック前の色*/
.hatena-module-category a:link {color:#666666;}
/*クリック後*/
.hatena-module-category a:visited {color:#666666;}
/*マウスを重ねた時*/
.hatena-module-category a:hover {color:#00cc00;}
・サイドバーの最新記事のリンク色を緑色にする
/*クリック前の色*/
.hatena-module-recent-entries a:link {color:#666666;}
/*クリック後*/
.hatena-module-recent-entries a:visited {color:#666666;}
/*マウスを重ねた時*/
.hatena-module-recent-entries a:hover {color:#00cc00;}
・サイドバーの月別アーカイブのリンク色を緑色にする
/*クリック前の色*/
.hatena-module-archive a:link {color:#666666;}
/*クリック後*/
.hatena-module-archive a:visited {color:#666666;}
/*マウスを重ねた時*/
.hatena-module-archive a:hover {color:#00cc00;}
なるほど、/*～*/ で囲まれた文節は無視される訳ですね。
ここには自分が分かる様に好きなタイトルを書き込めばいいという訳ですか、これは便利。
こうして新たな知識を得る事が出来ました。この調子で、今度は本文のリンクに行きましょう。
また色々探して、本文記事内のリンク色の変更はこちらのブログを参照しました。
midori32.hatenablog.comこの記事を参考に、以下のCSSコードを作って貼り付けました。
記事ではマウスを乗せた時にアクションを起こす様ですが、こちらではただ色だけの変更とし、リンク文字は黄緑色［#00cc00］、マウスを乗せた時にライムグリーン［#00ff00］に変わる様にしてみました。
・記事本文のリンク色を緑色にする
/*リンクされた文字*/
a{ color:#00cc00;
}
/*未訪問のリンク*/
a:link {
color:#00cc00;
}
/*訪問後のリンク*/
a:visited {
color:#00cc00;
}
/*マウスをのせたとき*/
a:hover{
color:#00ff00;
}
ついでに前回派手すぎた記事タイトルの色と大きさも、以下の様に変更しました。
日付・タイトルはシックな濃緑色［#009900］に、でかすぎたタイトルはフォントサイズを20pxとしました。
・記事タイトルの色と大きさの変更
/*日付・タイトル色変更*/
div.date a{
color: #009900;
}
h1.entry-title a{
font-size: 20px;
color: #009900;
}
またこの機会に、ブログ上部に黒く表示されているはてなのヘッダーメニューバーの色も、黒から濃緑色［#009900］に変えてみました。
参考にしたブログはこちらです。
katamarichan.hatenablog.jp・ヘッダーメニューバーの色の変更
#globalheader-container {
/* 文字の色の設定*/
color: #fff;/*ヘッダーメニューの色を設定*/
background: #006600!important;
}
【!important】というのは、元々の書式命令が優勢でCSSコードをコピペしただけでは変わらなかった時、強制的にこちらのコードに変更出来る絶対的な命令書式だそうです。
そうして出来上がったのがこの画面です。
（変更前）
（変更後）
サイドバーはシンプルなグレーとなり、カーソルを当てると緑色に、本文リンク部分も皆ブルーからグリーンになりました。
でもよくよく見ると、見出し下部のカテゴリー表記の文字まで緑色になっています。
そして何よりも、実はこれだけでは済まない事が起きていました。
（～続きます～）
