リンクの文字を変更する

今回のスキンは先ほど完成したんですが、まだカスタマイズ法を書いていなかったので書いていきます。

この記事では、リンクの文字色変更について。
リンクの色をピンクにします。また、マウスが乗った時は背景色も黄色に変わるようにします。

左右サイドバーの幅を入れ替えるでも説明しましたが、ファンブログの３カラムスキンのbodyの中はこういう構造です。

今回は、記事のある真ん中部分だけaタグのリンク色を加工します。
つまり、idがentriesの部分にだけスタイルシートが適用されるようにします。

以前書きましたが

という風に、半角スペースで区切ってあると#entriesの中にあるaにはという意味になります。これが

と、半角のカンマで区切ると、#entriesとa（の両方）にはという意味になってしまいます。

今回は#entriesの中にあるaにだけスタイルを適用させたいので、１つ目の書き方と同じ半角スペースで区切ります。

#entries a{ //普段の状態
	color:#f0f;  //文字の色をピンクに
	text-decoration:underline;  //文字に下線を引く
}
#entries a:hover{  //マウスが乗った時
	color:#f0f;  //色は同じくピンク（マウスが乗っても文字の色は変わらない）
	background:#ffa;  //背景色を黄色にする
	text-decoration:none;  //文字の下線をなくす
}

適用結果がこの下の行のリンクになります。（クリックしても何も起こらないようにしています）

クリックしてもどこにも飛びませんが、色だけはスタイルシートの指示通りに変わります