上のようなデザインを、下のようなデザインに変更する方法を書いていきます。今日は、前回設定した丸角の枠線(サイドバーとコンテンツバーの領域)に、サイト全体の背景画像を透過する背景色を設定したいと思います。

3-1

カスタムCSS

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

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

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

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

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

3-2

 

サイドバーとコンテンツバーの背景色を指定する

前回は、サイドバーとコンテンツバーに周囲を丸角枠線で囲みました。
今日は、前回設定したサイドバーとサブコンテンツの設定の下に、背景を指定していきます。
カスタムCSS編集の前回設定の下に以下のような記述を追加します。

5-1

#sidebar {
background-color: rgba(0,255,0,0.1);
}

#sub-contents {
background-color: rgba(255,0,0,0.1);
}

 

5-2
背景が指定されました。
この背景色の指定は、よく見ると、サイト全体の背景となっている画像が、透けて見える設定になっています。背景色の指定に、rgbではなく、rgbaを用いているからです。

RGB( )と16進数表記

色の三原色は、シアン、マジェンダ、イエローのCMYですね。CMYを100%ずつ混ぜると、黒(ブラック)になりますが、実際は綺麗な黒が発色しないため、インクジェットプリンタでは、CMYのインクにくわえて、ブラックインクを搭載します。また、写真などの印刷を、より鮮明に行うため、カラーインクの色見を、もっと細かく分けたインクを搭載するプリンタも、多く出回るようになりました。
CMYに対し、RGBとは、レッド、グリーン、ブルーの光の三原色をさします。テレビやPCのモニタは、光の三原色を使って色を表示しているのです。Webサイトはモニタ上に表示しますから、光の三原色を指定しますが、CSSでの色指定では、16進数表記のほうを見慣れている方が多いと思います。
たとえば、原色の赤は『rgb(255,0,0)』ですけれど、これを16進数に変換して、『#ff0000』と指定することができます。

 

RGBA( )

rgba()は、RGBにalphaという色の透明度を加えた指定です。
まずRGBで色を指定したあと、alphaチャンネルと呼ばれる最後の領域に、0(透明)~1(不透明)かの設定をします。例では、『0.1』に設定しているわけです。

ネット上には、16進数表記のカラーコードを、RGB、ひいてはRGBAの値に変換してくれるツールを提供しているサイトもたくさんあります。
たとえば、以下のサイトでは、色見本も一緒に見せてくれるので視覚的にもみやすいです。

http://j-press.info/16torgba/
5-3
きりが良いので、今回はここまで。
次回はヘッダー部への画像の埋め込みを行います。