静的ペ－ジに背景色をつける

2018年 06月	«	»
日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

2018年6月19日(火) 02:06 JST

2009年2月 3日(火) 18:26 JST
投稿者:

ぬいいとさん
閲覧数

2,168

http://uttyan.nuiito3.com/

アドバンストエディタで出来上がった静的ページの
ＨＴＭＬコードを（そのまま投稿モードをＨＴＭＬに切り替えると良い）

<div style="background-color: #色コード">
　　　　　・　　　　　
　　　　　・　　　　　
　　　　　・　　　　　
（ずらーっと並んだＨＴＭＬコード）
　　　　　・　　　　　
　　　　　・　　　　　
　　　　　・　　　　　
</div>

という風にすればよい。

<div>を使うコードがイマイチ解らず、けっこう検索に手間取った。

「もっとスマートな方法がある。」
と、テーマのおっしょはんは、おっしゃってたけど。
聞きそびれてしまった。（T_T)
ので、未だこれで乗り切る。
☆。.:*:・'゜★。.:*:・'゜☆。.:*:・'゜★。.:*:・'゜☆。.:*:・'゜★。*
複数ある静的ページを個別に色分けする時は、この方法でもよいとのこと。
同じベースで統一したい場合は
<div class="abc">～</div>
としてcustom.cssに
.abc {
background:#色コード;
}
と書いておけばどの静的ページでも
<div class="abc">～</div>と使いまわすことが出来る。

なお、対象ブロックのｃｓｓを修正する、または、custom.cssで上書きする方法もあり
たとえば
div#centerblocks {
background:red none repeat scroll 0 0;
}
と書くとセンターブロックの背景が赤くなり
div#centerblocks {
background:url(./images/custom/壁紙ファイル名);
}
とすると、センターブロックに壁紙が貼れる。

Thank　you，teraさん、AugeBangさん。

トラックバック

このエントリのトラックバックURL:: http://nuiito3.com/trackback.php/20090203182635127

この記事にはトラックバック・コメントがありません。

静的ペ－ジに背景色をつける
11件のコメント
アカウント登録

サイト管理者はコメントに関する責任を負いません。

静的ペ－ジに背景色をつける
投稿者:ゲストユーザ on 2009年2月 4日(水) 01:13 JST

静的ページの場合、個別に色付けするでしょうからそれでいいのではないでしょうか
別の方法としては、対象ブロックのｃｓｓを修正する、または、custom.cssで上書きする方法があります
たとえば
div#centerblocks {
background:red none repeat scroll 0 0;
}
と書くとセンターブロックの背景が赤くなります

静的ペ－ジに背景色をつける
投稿者:ゲストユーザ on 2009年2月 4日(水) 01:22 JST

これでも間違いではないですがこの方法だと毎回
<div style="background-color: #色コード">～</div>
と書かないとダメですよね。

これを
<div class="abc">～</div>
としてcustom.cssに
.abc {
background:#色コード;
}
と書いておけばどの静的ページでも
<div class="abc">～</div>と使いまわすことが出来ます。
上手くいかなかったらSNSで聞いてください(。・_・。)ノ

静的ペ－ジに背景色をつける
投稿者:ぬいいとさん on 2009年2月 4日(水) 02:04 JST

おふた方ともこんなところまでお越しくださり、ありがとうございます。<(_ _)>

>teraさん
上のソースをそのままコピペしたら、ものげっつーえぐいサイトになってしまいました。（笑）
試しに壁紙なんぞ貼ってみましたところ、このようなできばえに・・・
只今自己満足の世界に浸っております。( ´ー`)
しかしこれでは少し記事が見づらいですよね。気が済んだら他の方法を考えてみます。

>AugeBangさん
同じベースのものをあちらこちらで使いたい時は、この方法ですね。
わかりました！(`ヘ´ゝ
動作確認は・・・これからいたします！＾＾；

静的ペ－ジに背景色をつける
投稿者:ぬいいとさん on 2009年2月 4日(水) 02:24 JST

>AugeBangさん
出来ました！！＾＾ｖ
「え？なにも変わってへんやないか～！」　ですか？
<div class="abc">～</div>
で、くくり、custom.css内に
.abc {
background:url(./images/custom/壁紙ファイル名) ;
}
といたしました。
これでこの壁紙、使い放題です。＾＾

静的ペ－ジに背景色をつける
投稿者:ゲストユーザ on 2009年2月 6日(金) 01:47 JST

body{}
div#leftblocks{}
div#rightblocks{}
div#navigation{}
で　background　使うと・・・

静的ペ－ジに背景色をつける
投稿者:ぬいいとさん on 2009年2月 6日(金) 22:26 JST

( ´ー`)　ん～～♪
1年前、ここのテーマを変えたいと思った時に、頭の中に思い描いていたテーマに
グンッっ・・・と近づいています。
ありがとうございます。m(_ _)m

一度に書き換えず、ひとつひとつ動作確認しながら書き換えたのですが

div#navigation{
background:url(./images/custom/ファイル名) ;
}

だけが、どこが変わったのか判りません。
何か書き間違いなのか、私が気付けずにいるのか・・・・（？_？）

静的ペ－ジに背景色をつける
投稿者:ゲストユーザ on 2009年2月 9日(月) 19:38 JST

navigation ですから　ホーム　サイト情報　・・・とあるヘッダー下の部分です
現在は　#B0E0E6 none repeat scroll 0 0　になっています？ね

静的ペ－ジに背景色をつける
投稿者:ゲストユーザ on 2009年2月 9日(月) 19:42 JST

div#container div#wrapper {
background-image:url(../images/css/bg_wrapper_left-center-right.gif);
}
を消してしまうほうがいいかも

静的ペ－ジに背景色をつける
投稿者:ゲストユーザ on 2009年2月 9日(月) 19:47 JST

あと
div#container div#footer{}
div#comments div.block-comment-content ul.status li.title {}

静的ペ－ジに背景色をつける
投稿者:ぬいいとさん on 2009年2月11日(水) 00:11 JST

ナビゲーション部分にこの壁紙はあまり意味がないですよね。
知っている範囲で一番近い色を塗ってみました。
ナビゲーション部分もいろいろ変えてみたいんですが・・・。

>div#container div#footer{}
はいはい♪＾＾
あとは文字色を変えなくちゃいけませんね。
たしかテーマクッキングに出ていたなぁ・・・。今日はパス。＾皿＾

>div#comments div.block-comment-content ul.status li.title {}

へー、こんなところの色も変えられるんですね。
ココは白のままの方がわかりやすいんでこのままにしておきます～。

>div#container div#wrapper {
background-image:url(../images/css/bg_wrapper_left-center-right.gif);
}
>を消してしまうほうがいいかも

これはファイル開いて直接本体コードを書き変えないといけませんね
でもまだこのノーパソにバックアップファイルもFTPツールも入ってないんですよね。＾＾；
今日は裁判所ツアーの引率でお疲れモードなので明日にします。
（「あしたやろう」は「ばかやろう」ですかぃ？）

静的ペ－ジに背景色をつける
投稿者:ぬいいとさん on 2009年2月13日(金) 05:54 JST

>div#container div#wrapper {
background-image:url(../images/css/bg_wrapper_left-center-right.gif);
}
>を消してしまうほうがいいかも

/ProfessionalCSS/css/layout.css
を修正すればいいんでしょうか？
162行目あたり、
body.left-center-right div#container div#wrapper {
background-image: url(../images/css/bg_wrapper_left-center-right.gif);
}
をコメントアウトしてっと・・・・できましたぁ！
ありがとうございます！！

ナビのままに動いたので
「構造はすべて理解出来た！」
とまではまだまだ言い切れませんが
「ココを動かしたい時はこのあたり」
というのはおぼろげながらわかってきました。
感謝いたします。（－人－）