杜の里から

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

ブログをカスタマイズする(3)~リンク色の変更(その2)~

様々なブログを尋ね、記事タイトル、日付、サイドバーリンク、本文リンク、これらの色をカスタマイズして、ここまで変える事は出来ました。

f:id:OSATO:20190714144852j:plain

ところが、ずらずらと画面を下にスクロールしていくと、サイドバーのコメント欄・カテゴリー欄はこんな状態になっていました。

 

f:id:OSATO:20190715131345j:plain

あああ~そうか~、前回のコード変更だと、リンクの部分すべてが緑色〔#00cc00〕になってしまうのか~!

(前回)

・記事本文のリンク色を緑色にする

/*リンクされた文字*/

a{ color:#00cc00;

}

/*未訪問のリンク*/

a:link {

color:#00cc00;

}

/*訪問後のリンク*/

a:visited {

color:#00cc00;

}

/*マウスをのせたとき*/

a:hover{

color:#00ff00;

}

どうやら【a】というのは、本文だけじゃなくすべてのリンク部分を指していたのですね。

これで自分のプロフィールidの文字や、タイトル下部のカテゴリーの文字まで緑になってしまった訳が分かりました。

 

これでまた一つ知識が増えたw、などと喜んでる場合じゃない!

 

さてどうすべぇと焦ってまたあちこち探し回り、ようやくこちらのブログを見つけました。

blog.minimal-green.com

 

「まとめて色を変更する」! これだぁ~~!

 

まさに天の助け、ありがとうございます!

ここをよくよく読んでみますと、記事中に以下のコードが紹介されていました。

(ブログ記事より引用 ↓)

/* urllist module
リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます
*/
.hatena-urllist li a {
color: #E9546B;
}

 そこで試しに、サイドバー・本文の基本色を濃いグレー[#666666]として、以下のCSSコードを貼り付けてみました。

 

・サイドバーのリンク文字をまとめて変更する

.hatena-urllist li a{
color: #666666;
}

すると無事、サイドバーのリンク部分はすべてグレーに変更されました。ああ良かった。

f:id:OSATO:20190715152746j:plain

結局、CSSコードを貼る順番(この場合は見つけた順番ですが)を間違えていたのですね。

まずは〔サイドバーリンクの文字色変更〕、次に〔リンク先クリック表示変更〕としていけば良かった訳です。

 

と、これで安心するのもつかの間、今度はサイドバー【最新記事】の〔もっと見る〕から記事一覧画面を開いてみたら…、

 

f:id:OSATO:20190715160255j:plain

はぁぁ~、タイトルがすべてデフォルトのまま! これは……。

 

これでまたあちこち探す事になるのですが、今回は中々見つからない!

 

一体どうすればいいんだ……。

 

(~また続きます~)