今回のスキンは先ほど完成したんですが、まだカスタマイズ法を書いていなかったので書いていきます。
この記事では、リンクの文字色変更について。
リンクの色をピンクにします。また、マウスが乗った時は背景色も黄色に変わるようにします。左右サイドバーの幅を入れ替えるでも説明しましたが、ファンブログの３カラムスキンのbodyの中はこういう構造です。
今回は、記事のある真ん中部分だけaタグのリンク色を加工します。
つまり、idがentriesの部分にだけスタイルシートが適用されるようにします。
以前書きましたが
という風に、半角スペースで区切ってあると#entriesの中にあるaにはという意味になります。これが
と、半角のカンマで区切ると、#entriesとa（の両方）にはという意味になってしまいます。
今回は#entriesの中にあるaにだけスタイルを適用させたいので、１つ目の書き方と同じ半角スペースで区切ります。
適用結果がこの下の行のリンクになります。（クリックしても何も起こらないようにしています）
クリックしてもどこにも飛びませんが、色だけはスタイルシートの指示通りに変わります
この記事では、リンクの文字色変更について。
リンクの色をピンクにします。また、マウスが乗った時は背景色も黄色に変わるようにします。左右サイドバーの幅を入れ替えるでも説明しましたが、ファンブログの３カラムスキンのbodyの中はこういう構造です。
id="container"
| ヘッダ id="header" | ||||
id="main"
| ||||
| フッタ id="footer" |
今回は、記事のある真ん中部分だけaタグのリンク色を加工します。
つまり、idがentriesの部分にだけスタイルシートが適用されるようにします。
以前書きましたが
#entries a{
括弧の中でスタイルを指定
}
括弧の中でスタイルを指定
}
という風に、半角スペースで区切ってあると#entriesの中にあるaにはという意味になります。これが
#entries,a{
括弧の中でスタイルを指定
}
括弧の中でスタイルを指定
}
と、半角のカンマで区切ると、#entriesとa（の両方）にはという意味になってしまいます。
今回は#entriesの中にあるaにだけスタイルを適用させたいので、１つ目の書き方と同じ半角スペースで区切ります。
#entries a{ //普段の状態
color:#f0f; //文字の色をピンクに
text-decoration:underline; //文字に下線を引く
}
#entries a:hover{ //マウスが乗った時
color:#f0f; //色は同じくピンク（マウスが乗っても文字の色は変わらない）
background:#ffa; //背景色を黄色にする
text-decoration:none; //文字の下線をなくす
}適用結果がこの下の行のリンクになります。（クリックしても何も起こらないようにしています）
クリックしてもどこにも飛びませんが、色だけはスタイルシートの指示通りに変わります