ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 背景の色を変えたい!

背景の色を変えたい!

ページ全体の背景色やメニューや本文のタイトル部分の背景色の変え方を紹介します

まず最初に覚えて欲しいのは、背景色はbackground-color: 色の値で決められている事です。

全体の背景色を変える方法

テンプレートの設定からスタイルシートの編集を見てみます。
全体を表す要素はBODYなので、body {background-color: 色の値} の部分を検索します。
見つかったら、色の値を変えるだけで全体の背景色が変わります。

全体だと思って変えてみたけど、違うところが変わってしまった人はHTMLの<body>を探してみてください。そのすぐ下などに名前をつけて指定してある要素があると思います。
共通テンプレ-125_simple_3cの場合は、

</head>
<body>
<div id="baseBlock">

<div id="baseBlock">というのがありました。

名前がわかったらスタイルシートで名前を検索してみて下さい。baseBlockだったのでこれで検索すると・・・

#baseBlock {
width: 100%;
margin: 0px auto;
padding: 0px;
background-color: #fff;
}
見つかりました。ここにbackground-colorがあったので、この色の値を変えれば色も変わります。

個別の背景色を変える方法

自分の変えたい場所を変数一覧で探して、その部分を指定してある名前を見つけて、スタイルシートを検索して色の値を見て下さい。

名前を決めて指定してある要素は上記のidの他にもclassやh2などがあります。idなら「#」とclassなら「.」とh2ならそのまま「h2」とスタイルシートと対応しています。

例えば、プラグイン1の背景色を変えようと思った時は、変数一覧で見てみると、<!--plugin_first-->なのでHTMLを探してみると、

<!--plugin-->
<!--plugin_first-->
<div class="menu1BlockBase">

と名前がmenu1BlockBaseで指定されていることがわかりました。

そのままスタイルシートを見てみると・・・

.menu1BlockBase {
width : 100%; margin-bottom: 0px;
}

となっていてbackground-color:がありませんでした。もしここにあれば色の値を変えるだけで背景色は変わります。
ここに何故ないかというと、プラグイン1だけの背景色の指定がしていなくて、本文記事とプラグイン1.2.3などが同じ背景色の指定をしてあり他の所で一括に指定してあるからです。今回はプラグイン1の背景色だけを変えたいので、ここの{~}の中にbackground-color: #5F979F;と付け加えます。

.menu1BlockBase {
width : 100%; margin-bottom: 0px;
background-color: #5F979F;
}

こんな感じになります。これでプラグイン1だけの背景色が変わりました。

自分のは名前を探したけど、そこにbackground-colorがないからわからないし、ないから自分で付け加えたけど背景色が変わらないという人は多分、background-image: url(http://~~~.gif);などが変わりにあると思います。

これは背景を色で指定するのではなくて、画像で指定しているんです。
なのでbackground-image: url(http://~~~.gif);を削除してそこにbackground-color: #5F9F67;と色の指定をしてあげれば、変える事ができます。

例えば公式テンプレ-mame-peopleのプラグインのタイトル部分の背景色を変えたいと思って、HTMLを見たら・・・

<!--plugin_first-->
<div class="menuBlockHead">

だったので、そのままスタイルシートを見てみます。


.menuBlockHead
{
background-image: url("http://blog1.fc2.com/template/mame-people/image/menu-ti.gif");
background-repeat: no-repeat;
background-position: 0 0;
margin: 0 0 0 18px;
padding: 0;
width: 239px;
height: 44px }

と画像で指定してあるのでbackground-colorがありませんでした。この部分を削除してbackground-colorに書き換えます。


.menuBlockHead
{
background-color: #5F9F67;
margin: 0 0 0 18px;
padding: 0;
width: 239px;
height: 44px }

これで、自分の好きな背景色に変える事ができます。書き換えたらすぐ下のbackground-repeatやbackground-positionなどは本当は背景画像の時に使うタグだから、いらなくなったので削除して下さい。

背景色は意外と細かく決められていたり、画像が使ってあったりするといろんな所を一緒に指定してあったりするので、変える所を探すのが大変だし、変えた後も自分で細かく指定しなければならなくなったいするので、少し大変かも知れませんが頑張って見て下さい。

タイトル部分などは色よりも画像を変えたい人の方が多いと思うので、次は画像の変え方です。
<背景の画像を変えたい!へつづく>

関連ページ)
・背景の色を変えたい!
背景の画像を変えたい!
背景に画像を使いたい! 


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
鍵コメさんへ。
初めまして。こんにちは!
ブログの背景色落ち着いた感じでいいですね!
また何かあったら使ってくださいね!こちらこそよろしくお願いします!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/139-85da272f   

Template Designed by DW99