fc2ブログ

リンク色のカスタマイズ

さあ完成イメージにほとんど近づいてきました。でも細かいところが結構残っていますので、がんばっていきましょう。それでは今回はリンク色をカスタマイズしていきたいと思いますので、CSS編集画面より以下のアンカー部分を見つけ出してください。

/* ===== アンカー ===== */
a { text-decoration : none; }
a:link {
color : #07b;
}
a:visited {
color : #07b;
}
a:hover {
color : #5483bc;
background-color : #eaeff7;
}
a:active {
color : #5483bc;
background-color : #eaeff7;
}

これをみてみるとページ全体にわたり同じように設定されていますので、それを個別の場所に対してそれぞれ指定するようにしたいと思います。

このブログの場合ですと、ヘッダーのリンク色は白(#fff)にしてあり、記事の部分はピンク色でアンダーラインが。サイドメニューのリンク色はピンクでラインなしで設定しますので、同じようにしてするには、次のようにしてください。

#header a {
text-decoration : none;
}

#header a:link {
color : #fff !important;
text-decoration : none;
}

#header a:visited {
color : #fff !important;
}

#header a:hover {
color : #fff !important;
text-decoration: none;
}

#header a:active {
color : #fff !important;
}

.entry-header a {
 text-decoration : none;
}

.entry-header a:link {
color : #09f !important;
text-decoration : none;
}

.entry-header a:visited {
color : #09f !important;
}

.entry-header a:hover {
color : #f69;
background-color : #eaeff7;
text-decoration: none;
}

.entry-header a:active {
color : #09f !important;
}

.secondary-column a { text-decoration : none; }
.secondary-column a:link, .secondary-column a:visited {
color : #f69;
}

.secondary-column a:hover {
color : #f69;
background : #eaeff7
}

.secondary-column a:active {
color : #f69;
}

.entry-state a {
 text-decoration : none;
}

.entry-state a:link {
color : #000 !important;
text-decoration : underline;
}

.entry-state a:visited {
color : #000 !important;
text-decoration: underline;
}

.entry-state a:hover {
color : #000;
background-color : #eaeff7;
text-decoration: underline;
}

.entry-state a:active {
color : #000 !important;
text-decoration: none;
}

.entry-body a {
 text-decoration : none;
}

.entry-body a:link {
color : #f69 !important;
text-decoration : underline;
}

.entry-body a:visited {
color : #f69 !important;
text-decoration: underline;
}

.entry-body a:hover {
color : #ff3f8c;
background-color : #eaeff7;
text-decoration: none;
}

.entry-body a:active {
color : #f69 !important;
text-decoration: underline;
}

ちょっとあちこち色を変えすぎっ!って声も聞こえてきそうですが、好みの問題なので仕方ありません(笑)
まぁ~こんな感じで一番最初のアンカー部分を上記のように書き換えてみてください。それぞれの場所に対応した色が設定されているはずですよ。

スポンサーサイト




この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/169-6289cde0

0件のトラックバック

4件のコメント

[C148] アウトドア

アウトドアを探すなら http://www.bigwatersrealty.com/101070/101975/

[C134] コーヒー・ココア

コーヒー・ココアを探すなら http://www.carrot-import.com/100316/100356/

[C117] カギを探すなら

カギの検索サイト。カギ屋、防犯、交換、自転車、編みなどカギに関する各種情報をお届けしています。 http://daiquiri4.portocallrestaurant.com/

[C77] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

スポンサードリンク


Recent-enries