た け の こ 生 活

アクセスカウンタ

zoom RSS CSS編集・背景色を変えてみる

<<   作成日時 : 2005/01/04 00:49   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 3 / トラックバック 1 / コメント 0

少し時間が空いてしまいましたが、前記事の続きです。以下この前記事を読んでくださっていることを前提にお話していきます。

背景の色の変え方は、設定の画面でも「CSS編集例」の一番上に掲載されていますし、CSSの一番上に設定するところがあるので、まず背景の色を変えてみて、うまくいったら、他の部分もカスタマイズされればいいんではないかと思います。

ウェブリブログのCSSは、設定した背景が自分のブログの全てのページに反映されますし背景が同じというだけで、統一感と個性が出ると思います。

では、設定画面に行って、CSSのテキストエリアの中にある次の部分を見つけてください。一番上にあります。


/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}



見つけたら以下のように変更して見ましょう。コロンとセミコロンを間違えないように。
backgroundの後ろはコロン、行の終わりはセミコロンです。


body{
background:#ffffdd;
}



この書き加えたのが何であるかということは、設定画面の下部の「CSS編集例」に説明があります。背景の色をカラーナンバーで指定しているんですね。
この#ffffddはクリーム色です。とりあえず無難な色で。英字は大文字でも小文字でもかまいません。

変更したら、「更新」ボタンをクリックし、、ブログを確認してみましょう。
すべてのページの背景がクリーム色になっていますね。
CSSの編集は、「編集(入力)」「更新」「確認」の繰り返しです。


注意:編集例の説明では以下のように、backgroundの前が空いています。


body{
        background:#ffffdd; /* 背景色をカラー名やRGB値で指定する */
}


これは前記事でも記述したように、通常CSSの編集には、テキストエディタを使うので、わかりやすくするためにタブを利用しているからです。今回のように直接テキストエリア内で編集するときは、タブが使えないので、左寄せのままでかまわないニ思います。(スペースで空けたりしないよう)

全てのページの背景が水色に変更されていたら、今度はご自分の好きな色を代わりに入れてみましょう。少しだけカラーチャートを記載しておきます。が、もちろん色は限りなくあるので、「カラーチャート」のキーワードで検索して、紹介してくれているウェブページを探していただくか、市販のホームページ作成の本などにも載っています。


#F0F8FF #FAEBD7 #E6E6FA 
#7FFFD4 #E9967A #DCDCD1 
#ADD8E6 #FFF0F5 #CCFF9D 
#87CEFA #FFB6C1 #ADFF2F 
#6495ED #FFFF99 #98FB98 


うまくいきましたでしょうか?

元の既定の背景に戻す場合は、テキストエリア右上の、「>>初期値をフォームに入力」をクリックすると、CSSは編集されていない状態に戻ります。

次回は背景色の代わりに、画像を背景に配置してみようと思います。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス

トラックバック(1件)

タイトル (本文) ブログ名/日時
CSS編集・背景画像を敷き詰める
またまた時間が空いてしまいました。前回は背景に色を指定しましたが、今回は画像(壁紙)を配置したいと思います。 ...続きを見る
た け の こ 生 活@WebryBlo...
2005/01/22 02:45

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
CSS編集・背景色を変えてみる た け の こ 生 活/BIGLOBEウェブリブログ
文字サイズ:       閉じる