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

2-1

カスタムCSSの利用

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

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

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

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

 

サイト全体の背景設定

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

2-2

2-3

ここでは、コンテナ部の背景画像や色が定義されていています。
では、実際に値を変えてみましょう。

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/
#container{
background: url(./images/common/bg-main.png) repeat #292539;
}

の部分を、カスタムCSSにコピペして、

/*——————————————————–
1、サイト全体の背景設定(design.css)
——————————————————*/
#container{
background: url(http://majyuteikoku.com/……./066-08.png) repeat #ff0000;

と書きかえてみます。すると以下のように表示されました。途中省略していますが、urlの次に来るのは、挿入したい画像のURLです。オリジナルでは相対パス指定が使われていますが、httpから書き始める絶対パス指定でも問題ありません。

2-42-5

 

オリジナルを参照しやすくする

カスタムCSSを使っているので、オリジナルのスタイルシートは設定変更していません。
コメントに(design.css)と加えたのは、後でカスタムCSSのスタイルシートを確認したときに、どのCSSファイルにオリジナルの記述があるか分かるようにするためです。
賢威は、ひとつのスタイルシート(style.css)を読み込んでいるわけではありません。そのため、変更箇所がたくさんになると、あとで、オリジナルを確認したいと思ったとき、ファイル名を記述していたほうが分かりやすい。見出し代わりのコメント部分も、そのままコピペしているので、オリジナルのファイルさえ分かれば、元の設定が簡単に分かります。

 

サイト全体の画像と色、繰り返し設定

サイト全体に表示される背景画像や、色に変化があるのが確認できます。
また、画像には、リピートのオプションが設定されているので、縦方向、横方向に同じ図柄が繰り返されることになります。値を変更すれば、横方向、縦方向、リピートなしなどの指定もできます。

2-6
画像の背景が透明な場合は、背景色に指定された色が表示されます。もともと黒っぽい色(#292539)だったのを、赤色(ff0000)に変更したため、図のような表示になりました。