(3-3) コンテンツエリアのカスタマイズ 初級アメブロカスタマイズガイド

(3-3) コンテンツエリアのカスタマイズ 初級アメブロカスタマイズガイド

アメブロカスタマイズ コンテンツエリアのカスタマイズ

では早速はじめましょう。今回は、タイトルにもあるように、CSS編集画面の中の「(3-3) コンテンツエリア」の解説です。
(3-3) コンテンツエリア」の解説
コンテンツエリアとはどの部分?

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

image-11057898085-11567979062

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

/* (3-3) コンテンツエリア
——————————————–*/

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/* 注 ベースのcssにwidth:980px;の記述有り */
}

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

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

/* (3-3) コンテンツエリア
——————————————–*/

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{background-color:#FFFF66;

/* 注 ベースのcssにwidth:980px;の記述有り */
}

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

image-11057898085-11570004068

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

解説
background-color

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

サイドバーや記事の背景色が変わらないのは?

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

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

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

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

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

/* (3-4) メインエリア
——————————————–*/

.skinMainArea{}

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

以上です。

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

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

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

 

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ

« »

コメントは受け付けていません。