Site Calendar

サイトカレンダをスキップ

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

新着情報

記事

-

コメント (7日)

-

リンク (2週)

新しいリンクはありません

新着メディア (7日)

新着メディアはありません。

雑記帳

ログイン

ログイン

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

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

http://uttyan.nuiito3.com/

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

<div style="background-color: #色コード">
     ・     
     ・     
     ・     
(ずらーっと並んだHTMLコード)
     ・     
     ・     
     ・     
</div>

という風にすればよい。

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

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

なお、対象ブロックのcssを修正する、または、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
表示形式
コメント投稿

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

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

静的ページの場合、個別に色付けするでしょうからそれでいいのではないでしょうか
別の方法としては、対象ブロックのcssを修正する、または、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さん
出来ました!!^^v
「 え?なにも変わってへんやないか~! 」 ですか?
<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);
}
をコメントアウトしてっと・・・・できましたぁ!
ありがとうございます!!

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


オンラインユーザ

ゲストユーザ: 2

おっ気がぁるに♪クリック!

ぬいいとさん

ちの晩ごはん
掃除は苦手だ!
なんてこたぁ

ない名言集
ギャラ

リー
アルバム
リンク
プロフィール
ツイッ

ター
・ぬいいとさんちの伝言板

はみがきだいすき
真中に出てくるOKボタンをクリックしてください

QRコード

等身大QRコード
CGちゃうで!( ̄^ ̄)

アクセス解析