今回は、ヘッダーに画像を指定し、ヘッダー背景色に透過指定して、サイト全体の背景画像を透過する設定をしたいと思います。
CSSの指定には、カスタムCSSを使っています。

カスタムCSS

すべてカスタムCSSでいけたので、ご自分が使っているテーマの変更箇所のクラス名などが分かれば、他のテーマでも応用できます。カスタムCSSは、通常のスタイルシート(style.css)の編集とは違います。興味がある方は、以下の記事をご覧ください。

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

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

サイドバーやサブコンテンツバーの構成

3カラム構成の場合、サイドバー(メインサイドバー、プライマリサイドーバー)、サブコンテツバー(コンテンツサイドバー、コンテンツバー)といった名称で呼ばれるウィジェットエリアが配置されます。図は例なので、左側がサイドバー、右側がサブコンテンツバーになっていますが、テーマのデザインによっては逆の場合もあるし、ふたつのサイドバーが横並びに配置されていることもあります。通常、2カラムならメインサイドバーが表示されています。

3-2

現在のヘッダーの設定を確認

今回は、ヘッダーに画像と、サイトの背景画像を透過するヘッダーの背景色を指定ます。
まずは、現在のヘッダーがどのようなデザイン指定になっているか、CSSで確認します。テーマ賢威の場合は、design.cssに指定があります。多くのテーマはstyle.cssにヘッダーに関するデザインが設定されています。

6-16-2

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background: url(./images/common/bg-header.png) center bottom repeat-x #2c2a26;
font-size: 1.2em;
}

* html #header{ background: #2c2a26; } /*IE6*/

これを、カスタムCSSにコピーし、以下のように値を変更してしてみます。

6-3

/*——————————————————–
ヘッダー(design.css)
——————————————————–*/
#header {
background: url(http://majyuteikoku.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png) center bottom repeat-x rgba(65,105,225,0.6);
font-size: 2.4em;
}

* html #header {
background: #4169e1;/*IE6*/

以下の図のように変更されました。

6-4

ヘッダーの背景画像と背景色を指定

『#header {
background:url(http://majyuteikoku.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png) center bottom repeat-x rgba(65,105,225,0.6);』の部分で、背景画像と背景色を指定しています。

background:url()の中身は、自分が指定したい背景画像のURLを記述します。もともとの指定のような相対パス指定でも、変更後のような絶対パス指定でも、どちらでも問題ありません。

もともとのデザインは、ただの黒色に見えましたが、実は、上図のように黒系のグラデーションがかかった図が指定されていました。これをCenterを起点に、bottom(底側)に配置して、repeat-x(横方向に繰り返す)という指定がされ、そのうえで、背景色が『#2c2a26』という黒系の色で指定されていました。

6-6
変更後は、小さなお城の図を、centerを起点にbottomに配置してrepeat-x、背景色をrgba指定で、青系色(#4169e1、ロイヤルブルー)の透過0.6という設定をしています。
ヘッダーの色指定を透過指定したので、サイト全体の背景として指定した魔女の図の顔の部分が、青色の向こうに透過しているのか確認できます。透過しない色指定なら、もともとの指定と同じように#xxxxxxという形で問題ありません。

なおrgbaについては前回の記事を参照してください。

サイドバーやサブコンテンツバーの背景色を透過指定する☆彡CSSのお勉強(5)

 

backgroundのオプション

画像の繰り返しに関するbackground-repeatのオプションは以下のとおりです。

2-6

画像を表示するための基準位置を指定するbackground-positionのオプションは以下のとおりです。

6-7

※たとえば、left topは左上、left bottomは左下の意となります。

 

ヘッダーに表示されるテキストのサイズ指定

『font-size:』がヘッダータイトルの文字のサイズ指定です。もともとは1.2emでしたが、変更後は倍の2.4emにしています。

 

px(ピクセル)とem(エム)

フォントサイズの指定で、よく見かけるのがpxとemです。
pxは、文字通りピクセルで指定しますから、環境によって文字の大きさが変化しません。たとえば1pxと指定したら、文字は1pxで表示されます。
一方、emは環境によって、1emの値が変わってきます。たとえば、bodyの設定で、font-sizeを規定して12pxと設定したのなら、1emは12pxになりますし、とくにfont-sizeの規定をしていない場合は、16pxが1em となります。つまり、pxが絶対的な文字サイズの指定なのに対し、emは相対的な文字サイズの指定です。
個別指定すれば、テキストのサイズを変更できる
今回は、ヘッダーロゴを倍にしたことで、右上、ロゴ下のテキストサイズも大きくなりましたが、個別にサイズを指定すれば、大きさを変更することができます。

6-8

6-9

/*●ヘッダーテキスト・右上の文章*/
#header-in #header-text {
font-size: 12px;
}

/*●ヘッダーテキスト・ロゴ下の文章*/
#header h1 {
font-size: 12px;
}

たとえばこのように、右上とロゴ下の文字の指定を12pxとすれば、どんな環境でも、12pxの大きさで表示されます。ただ、閲覧者がサイトの文字を全体的に大きくしたい、小さくしたいと思っても、12pxに指定したら、相対的に大きくなったり、小さくなったりこともないため、現在は、フォントサイズの指定に、emを用いる場面が増えています。

 

古いブラウザへの対応

『* html #header{ background: #2c2a26; } /*IE6*/』の部分は、古いブラウザへの対応です。
IE6は、背景画像のポジション指定の記述で、ズレてしまうという問題があったため、IEの場合は、バッググラウントに、このように背景色を指定して代替するという方策が取れました。そのため、IE6の場合、ヘッダーの背景をこう表示するという記述が別途付記される記述もみれます。古いブラウザへの対応ですから、変更後は、透過指定も避け、単純に『* html #header{ background: #4169e1; } /*IE6*/』と、ロイヤルブルーの16進数表記をつけておきました。

長くなりましたので、今回はここまで。次回は、記事のタイトル部分のデザインを変更したいと思います。