2016年3月22日design.css今回は、ヘッダーに画像を指定し、ヘッダー背景色に透過指定して、サイト全体の背景画像を透過する設定をしたいと思います。CSSの指定には、カスタムCSSを使っています。古いブラウザへの対応カスタムCSSすべてカスタムCSSでいけたので、ご自分が使っているテーマの変更箇所のクラス名などが分かれば、他のテーマでも応用できます。カスタムCSSは、通常のスタイルシート(style.css)の編集とは違います。興味がある方は、以下の記事をご覧ください。『テーマ固有のCSS』編集と『カスタムCSS』編集の違い(1)『テーマ固有のCSS』編集と『カスタムCSS』編集の違い(2)サイドバーやサブコンテンツバーの構成3カラム構成の場合、サイドバー(メインサイドバー、プライマリサイドーバー)、サブコンテツバー(コンテンツサイドバー、コンテンツバー)といった名称で呼ばれるウィジェットエリアが配置されます。図は例なので、左側がサイドバー、右側がサブコンテンツバーになっていますが、テーマのデザインによっては逆の場合もあるし、ふたつのサイドバーが横並びに配置されていることもあります。通常、2カラムならメインサイドバーが表示されています。今回は、ヘッダーに画像と、サイトの背景画像を透過するヘッダーの背景色を指定ます。現在のヘッダーがどのようなデザイン指定になっているか、CSSで確認します。テーマ賢威の場合は、design.cssに指定があります。多くのテーマはstyle.cssにヘッダーに関するデザインが設定されています。/*IE6*/これを、カスタムCSSにコピーし、以下のように値を変更してしてみます。#4169e1;/*IE6*/以下の図のように変更されました。rgba(65,105,225,0.6);』の部分で、背景画像と背景色を指定しています。background:url()の中身は、自分が指定したい背景画像のURLを記述します。指定のような相対パス指定でも、変更後のような絶対パス指定でも、どちらでも問題ありません。デザインは、ただの黒色に見えましたが、実は、上図のように黒系のグラデーションがかかった図が指定されていました。これをCenterを起点に、bottom(底側)に配置して、repeat-x(横方向に繰り返す)という指定がされ、そのうえで、背景色が『#2c2a26』という黒系の色で指定されていました。変更後は、小さなお城の図を、centerを起点にbottomに配置してrepeat-x、背景色をrgba指定で、青系色(#4169e1、ロイヤルブルー)の透過0.6という設定をしています。ヘッダーの色指定を透過指定したので、サイト全体の背景として指定した魔女の図の顔の部分が、青色の向こうに透過しているのか確認できます。透過しない色指定なら、もともとの指定と同じように#xxxxxxという形で問題ありません。rgbaについては前回の記事を参照してください。サイドバーやサブコンテンツバーの背景色を透過指定する☆彡CSSのお勉強(5)backgroundのオプション画像の繰り返しに関するbackground-repeatのオプションは以下のとおりです。画像を表示するための基準位置を指定するbackground-positionのオプションは以下のとおりです。bottomは左下の意となります。『font-size:』がヘッダータイトルの文字のサイズ指定です。1.2emでしたが、変更後は倍の2.4emにしています。px(ピクセル)とem(エム)フォントサイズの指定で、よく見かけるのがpxとemです。pxは、文字通りピクセルで指定しますから、環境によって文字の大きさが変化しません。1pxと指定したら、文字は1pxで表示されます。emは環境によって、1emの値が変わってきます。pxが絶対的な文字サイズの指定なのに対し、emは相対的な文字サイズの指定です。個別指定すれば、テキストのサイズを変更できる今回は、ヘッダーロゴを倍にしたことで、右上、ロゴ下のテキストサイズも大きくなりましたが、個別にサイズを指定すれば、大きさを変更することができます。12px;}たとえばこのように、右上とロゴ下の文字の指定を12pxとすれば、どんな環境でも、12pxの大きさで表示されます。閲覧者がサイトの文字を全体的に大きくしたい、小さくしたいと思っても、12pxに指定したら、相対的に大きくなったり、小さくなったりこともないため、現在は、フォントサイズの指定に、emを用いる場面が増えています。/*IE6*/』の部分は、古いブラウザへの対応です。IE6は、背景画像のポジション指定の記述で、ズレてしまうという問題があったため、IEの場合は、バッググラウントに、このように背景色を指定して代替するという方策が取れました。そのため、IE6の場合、ヘッダーの背景をこう表示するという記述が別途付記される記述もみれます。/*IE6*/』と、ロイヤルブルーの16進数表記をつけておきました。長くなりましたので、今回はここまで。次回は、記事のタイトル部分のデザインを変更したいと思います。『BIOS/UEFI(EFI)』って何だ?関連コンテンツよろしくお願いします(*^_^*)訪問ありがとうございます。