ブログのタイトル文字色について。

質問

fc2でブログを始めました。
色々検討して、公式テンプレートの「life」というものを選択しました。
ただ、タイトルの背景画像だけ変更しようと思い、色々苦労した結果、変更できました。
しかし、タイトルの文字色が灰色のため、今のままではタイトルがひどく見づらいのです。
そこでタイトルの文字色を変更しようとしましたが、どうにもそれに該当する部分が分かりません。
以下にスタイルシートを貼りますので、どなたかご教授下さい。

body {
font-family: Verdana ,sans-serif,Osaka;
background: #eee;
background-image: url(http://templates.blog.fc2.com/template/life/bacck6.gif);
background-position: 0 0;
background-attachment: scroll;
background-repeat: repeat;
font-size: 83%;
line-height: 1.6;
margin:0;

color:#232323;
}

a:link {
color:#bbb;
text-decoration: none;
}
a:active {
color: #999;
text-decoration: none
}
a:visited {
color: #777;
text-decoration: none
}
a:hover {
color: #d00;
text-decoration: underline;
}

/* h1 を大きくとって、背景画像を見せてます。 */
/* 出来る人は div 要素なんか使って、テンプレ弄った方がいろいろいいかも */
h1 {
background: #070;

/* 背景を差し込む場合は高さ 150px ぐらい推奨 */
background-image: url(http://blog-imgs-59.fc2.com/n/a/m/namakedaruma/201304221809488f4.jpg);
background-position: 0 0;
background-attachment: scroll;
background-repeat: repeat;

margin: 0;
font-size: 150%;

/* 文字の位置を変える場合、上下合わせて 6em 取るといいかも */
padding: 3em 3em;

/* 位置を真ん中にしない場合は以下で文字位置設定 */
/*
padding: 3em 0.7em 3em 0.7em;
*/

border-left: 1px solid #000;
border-right: 1px solid #000;
}
h1 a:link {
color: #fff;
text-decoration: none;
}

/* h2 要素は現時点で、横向きカレンダーで被せてるんで擬似背景設定になってます */
h2 {
background: #000;
background-image: url(http://templates.blog.fc2.com/template/life/back2.gif);
background-position: 0 0;
background-attachment: scroll;
background-repeat: repeat;
margin: 0;
padding: 0.5em;
text-align: center;
font-size: 100%;
font-style: normal;
border-left: 1px solid #000;
border-right: 1px solid #000;
color: #fff;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}

/* h2 要素に被る横カレンダー設定 */
.yokocal {
position: absolute;
left: 10%;
top: 16em;
border: 1px solid #000;
background: #777;
padding: 0.3em;
text-align: center;
margin: 0;
font-size:75%;
}

/* 背景色透過で、h1 要素最下部に表示する場合や、横カレンダーを表示させない場合は、
以下の設定の方がしっくりきます。*/
/* 背景画像によって、文字色の変更 */
/* この場合は h2 要素が見えるようになります */
/* h2 要素の上下のパディング 0.5em が大きくて気になる場合は減らす */
/* 参考までに h2 要素の上下パディングを 0 にした場合、
以下で記述の right 属性の top のプロパティを 14.5em から 13.4em へ変更 */
/*
.yokocal {
position: absolute;
left: 10%;
top: 13em;
padding: 0.3em;
text-align: center;
margin: 0;
font-size:75%;
}
*/

/* 横カレンダーの日付はリストを inline で横に並べてるので、不具合ある人もいるかも。*/
.yokocal li {
color: #000;
display: inline;
margin: 0 0.1em;
}

.yokocal a{
font-weight: bold;
}
.yokocal a:link {
color: #fff;
text-decoration: underline;
}
.yokocal a:visited {
color: #999;
text-decoration: underline;
}
.yokocal a:hover {
color: #f00;
text-decoration: none;
}

/* レイアウト設定 */
/* レイアウト構成は left の中に right を左側に入れ込んでるという感じ。
そのために、left 属性では左に大きくパディングを取ってます。
ので、left でも実際は、右側に表示されることになります。*/

/* 記事表示部分 */
.left {
margin: 0;
margin-left:1px;
padding: 0 0 0 18.7em;
border: 1px solid #000;
background: #fff;
}

/* メニュー部分 */
.right {
background: #ffe;
background-image: url(http://templates.blog.fc2.com/template/life/back3.gif);
background-position: 0 0;
background-attachment: scroll;
background-repeat: repeat;
width: 15.5em;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
position: absolute;
padding: 1.7em 0.7em;
top: 14.5em;
left: 0;
color: #232323;

/* left 属性のボーダーを使うためその分の余白 */
margin-left: 1px;
}

.right p{
margin: 0.3em;
font-size: 80%;
}

.right a:link {
color:#333;
text-decoration: none;
}
.right a:active {
color: #999;
text-decoration: none
}
.right a:visited {
color: #666;
text-decoration: none
}
.right a:hover {
color: #d00;
text-decoration: underline;
}

/* メニューの見出し*/
.right h3 {
font-size: 80%;
font-family: Verdana ,sans-serif,Osaka;
font-weight: normal;
color: #000;
letter-spacing: 0.1em;
margin: 1.7em 0 0 0;
padding: 0.2em 0.2em 0.2em 0.7em;
background: #ffd;
bo

回答No.2

tacop · ベストアンサー

こんにちは。

「a:link」は未訪問のときのリンクの文字色しか指定しませんので、1回でもそのリンクをクリックしてしまうと色が変わってしまいます。

訪問済みのリンクは「a:visted」で指定されますが、タイトルのh1要素に対しては指定がないのでその上で指定されている
a:visited {
color: #777;
text-decoration: none
}
のグレーが有効になっているようです。
なので、ここの「#777」を別の色に変えれば訪問済みのリンク色が変更されるはずです。
あるいは下記のようにh1要素のリンク用の記述を追加すればタイトル文字だけの色指定にすることも可能です。

h1 a:link {/*未訪問のリンク*/
color:#カラーコード;
}

h1 a:visited {/*訪問後のリンク*/
color:#カラーコード;
}

h1 a:hover {/*マウスをのせたとき*/
color:#カラーコード;
}

h1 a:active {/*クリック中*/
color:#カラーコード;
}

ご参考まで。

お礼

回答ありがとうございます。

ああ…なるほど…
タイトルの色指定がないのに、なぜ灰色なのかと疑問に思っていたのですが…リンクとして扱われていたのですね。

無事、タイトルの色変更ができました。ありがとうございました。

回答No.1

slimebeth

>/* 位置を真ん中にしない場合は以下で文字位置設定 */
>/*
> padding: 3em 0.7em 3em 0.7em;
>*/
>
> border-left: 1px solid #000;
> border-right: 1px solid #000;
>}
>h1 a:link {
> color: #fff;　　←ここです。
> text-decoration: none;

color: #fff;
を
color: #ff0000;
に変更すると、タイトルは赤になります。

お礼

返信ありがとうございます。

さっそく試してみたのですが、何も変わりませんでした…
色の指定を変えているはずなので、どこかしらは変化すると思うのですが…

変更前、変更後を2つ並べてみても、どこも「赤色」になっている場所がないのです。
どういうことなのでしょうか…