(3-3) コンテンツエリア」の解説

コンテンツエリアとはどの部分？

まずコンテンツエリアというのがどの部分のことを言っているのかをイメージにしていますので、見てください。

上のイメージのように、コンテンツエリアはブログの記事とサイドメニューを包括する部分になります。CSS編集用デザインのコードは以下のようになります。

コンテンツエリアに背景の設定をしてみる

この部分に背景色を設定してみます。上のコードに以下のように追記してみます。赤字が追記箇所

背景に黄色を設定しました。

これでコンテンツエリアに黄色の背景色を設定することができました。

解説

background-color

このプロパティは、お馴染みのプロパティ。背景設定のプロパティです。：（コロン）のあとに#（ナンバー）に続く6ケタのカラーコードを入力して、色を変えることができます。#FFFF66で黄色の設定になります。カラーコードのサンプルはこちらのサイトでも紹介していますので、よろしければごらんください。

記事やサイドバーの色が黄色にならないのはどうしてなんでしょう？答えは単純です。それは、記事とサイドバーの背景色が白色に設定されているからです。CSS編集用の中の、(3-6)記事のエリアと、(3-8)サイドバーのエリアにbackground:#ffffffというものがありますが、これが白色の背景のもととなるコードです。こちらのカラーコードを一緒に変更してみると・・・。色々楽しめるかと思います。こちらはとりあえずあなたにおまかせします♪

どこにあるのか探してみてください・・・。ってそんなに時間がある方はいませんよね・・・

ということで、「(3-3) コンテンツエリア」のブロックはひとまず終了します。

つづいて・・・(3-4) メインエリアの解説

と行きたいところですが・・・個別論点として説明するのは割愛します。応用して使うときにでてくるかもしれませんが、汎用的に使うところではないと言う私の判断です。すみません・・・とりあえず的にCSS編集用画面のコードだけを以下に記述します。

これがメインエリアです。

以上です。

次回はメッセージボードの部分の解説をします。

メッセージボードとは、ブログヘッダーの下の部分の告知板のような役割をするエリアです。

マニアックな論点も含めて次回解説しますのでお楽しみに♪