背景に色を付ける方法

 

今までテンプレートテンプレートと言ってきましたが、
WordPressではテーマと言うのでしたね。
失礼しました(´・ω・`;)
これからはテーマと言いたいと思います。
(MTでテンプレートと癖が付いてるから心配デス)

a1180_007394_m

テーマGushでは背景にうすーく色が付いているものの、ほぼ白です。
個性を出すためにもちょいと色を付けてみたいと思います。

編集前はこんな感じです。

backgroundcolor1

テーマGushで説明していきます。
他のテーマでも大体同じと思うので参考になると思います。

背景色を指定するタグ

これです。

background: #fff;

または

background-color: #fff;

backgroundはbackgroundに関するものを一括指定できるタグです。
background-colorはbackgroundの中でも色のみの指定で使います。

まぁ、どちらでも大丈夫なのです。
今回はbackgroundの方でやっていきます。

#xxxxxxの部分で色を指定します。
普通は6文字で書きますが、
同じ数字が2つずつ並ぶ場合、3つに省略することができます。

例:
#ffffff → #fff
#336699 → #369

スタイルシートを編集する

背景色を変えたいidのタグを編集します。
折角なのでヘッダー、全体の背景、メイン部分、サイドバー、フッターと
色を変えたところをご紹介します。

ヘッダーの背景色を変える

#header {
	text-align: center;
	padding-top: 24px;
	background: #ff6699;
}

初期状態でヘッダーには色の指定が無いので、赤文字の部分を追加します。
ここでは分かりやすいように#ff6699この色に変えます。

backgroundcolor2

ここが変わります。

全体の背景色を変える

html {
	font-family : verdana, sans-serif;
	font-size : 100%;
	line-height : 1.5;
	background: #fdfdff;
	color: #333;
}

赤文字の部分を#ff6699この色に変えてみます。

backgroundcolor3

サイドバーには背景色の指定が無いので、透過になっています。
ヘッダーも初期状態では指定が無いので透過となり、
この全体の背景色と同じ色になります。
ここでは白で指定してあるのでこうなっています。

メイン部分の背景色を変える

#contents #main {
	background-color: #fff;
	padding: 20px 10px;
	margin-bottom: 24px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

ここは最初からbackground-color: #fff;で指定してあるのでこれを利用します。
赤文字の部分を#ff6699この色に変えてみます。

backgroundcolor4

やっぱりこの部分は白かほぼ白がいいですねっ(;`Д´)

サイドバーの背景色を変える

初期状態ではサイドバーに枠が無いので、
枠を付けて色を付けたいという方は
サイドバーに枠をつける方法を参考にしてください。

#sub {
	font-size: 100%;
	margin-bottom: 24px;
	overflow: hidden;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #ff6699;
}

青文字部分は枠を付けるために初期状態から足した部分です。
サイドバーには色の指定が無いので、赤文字部分を追加します。

backgroundcolor5

フッターの背景色を変える

私はまだいじっていませんが、
Gushのフッターは色々と追加できるので個性を出せる場所だと思います。

#footer {
	padding: 24px 0;
	color: #fff;
	text-align: center;
	background-color : #444;
	overflow: hidden;
}

最初から指定してあるbackground-color : #444;を変更します。
背景色に合わせて文字色color: #fff;も変えると良いです。

backgroundcolor6

以上、主な場所をご紹介してみました。
色々と試してみて、サイトの個性を出してくださいね。

おつかれさまでした。

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. tkj より:

    はじめまして。
    なんという親切な記事でしょうか!
    ありがとうございます。
    私のような超がつく初心者はCSS修正で数時間やって失敗…。の連続です(涙)
    今度はプラグインが参照しているサイドバーのテキスト位置修正方法を記事にしていただけると助かります。

  2. tkj より:

    すいません。「サイドバーに枠を付ける方法」に細かく書いてありました。失礼しました。

    • ゆのん より:

      *tkj様

      お役に立てたようで嬉しいです(^-^)

      私も今でこそ少しは分かるようになりましたが、独学なせいもあって最初は何もできず、tkj様と同じように失敗を繰り返していました。

      でもだんだんと分かってきました。
      失敗してもめげない諦めないtkj様はすぐにサササッとできるようになるはずです。

      また分からないところがあればお聞きください。
      私に分かることであればお答えいたします。
      その際、返事に時間がかかるかもしれないことをご了承ください(´・ω・`)

ゆのん にコメントする コメントをキャンセル

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。