はじめに

賢威では、テーマ全体に関わるCSSの多くが『design.css』にまとめられています。管理画面『外観』>『テーマの編集』から、design.cssを開いてみると、図のように設定項目が分類されています。見出し代わりのコメントも日本語ですから、CSSの勉強もしやすいです。そこで、賢威を使って、CSSのお勉強をしていきたいと思います。
テーマ自体は賢威を使いますが、CSSの書式自体は共通していますから、他のテーマのスタイルシートにも応用できます。

2-1

カスタムCSSの利用

このブログでは、CSSの編集に、『カスタムCSS』を使います。オリジナルのCSSを編集するわけではありませんから、ガンガン適当な値に書き直して、どんな影響が出るのか確認しなら、理解を深めていきたいと思います。

なおカスタムCSSについては、説明が長いので、別記事にまとめておきました。
カスタムCSSが何か知りたい方は、以下の記事を参考にしてください。

『テーマ固有のCSS』編集と『カスタムCSS』編集の違い(1)

『テーマ固有のCSS』編集と『カスタムCSS』編集の違い(2)

 

サイト全体の共通設定(文字色、リンク文字の設定)

現在はこのような設定になっています。
3-1

それでは、

/*——————————————————–
2、サイト全体の共通設定
——————————————————-*/

body{ color: #dedede; }

/*●リンク文字*/
a{ text-decoration: underline; }

a:link,
a:visited{ color: #a38853; }
a:hover,
a:active{ color: #bea455; }

という部分をカスタムCSSにコピペして、

/*——————————————————–
2、サイト全体の共通設定(design.css)
——————————————————-*/
body {color: #ff0000;}

/*●リンク文字*/
a {text-decoration: none;}

a:link,
a:visited {color: #ff00ff;}
a:hover,
a:active {color: #0000ff;}

と書き換えてみます。
結果は以下のようになりました。
3-2

 

body {color: #ff0000;}

これが、サイト全体の文字色に関わる指定です。bodyタグで囲まれた部分のテキスト色を指定しています。当初、白っぽい色だったのを赤に変えました。つまり、赤に変わった部分の文字が、指定が及ぶ範囲内の文字ということになります。

 

リンク文字のテキストデコレーション

リンク文字には、テキストデコレーションの設定がかかっています。

オリジナルは、a{ text-decoration: underline; }という値が設定されていましたが、noneという値に変えたので、リンク文字のアンダーラインが消滅しています。

3-3
ブラウザによってはうまく表示されないものもありますが、テキストデコレーションには、以下のような値が設定できます。

3-4

訪問、訪問済みのリンク指定

また、リンクの文字色指定を変えたので、リンク先を訪れた後はマジェンダ(ピンク系の色)、リンクの上にマウスカーソルを当てたときは、青色で表示されるようになりました。

 

ユーザーアクションを伴うリンク設定

マウスなどのポインティングデバイスが、リンク上に乗っているときに、どのように表示するかをしていするのが、hoverの部分になります。