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