« 第4回:タイトルにオリジナルの画像を設定してみよう | トップページ | 第6回:背景に画像を表示してみよう »

2006/02/16

第5回:背景の色を変えてみよう

タイトル、サイドバー、記事本文の部分はデザインの「スタイル」で変更できますが、その周囲「背景」部分の設定は出来ません。
ここでいよいよ「CSS」の登場です。

今回はCSSを使って背景に色を付けてみましょう。

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。
    ※CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は下記の記事を参照して下さい。
    第3回: カスタムテンプレートを作ってみよう
  2. 「編集」画面のCSS記述欄に

    body{background-color :  #●●●●●●; }

    全て半角英数で記述する。
    ●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては こちらを参照して下さい。
  3. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

私の場合はタイトル画像の菜の花に合わせて淡いグリーンを選んでみました。

背景色設定サンプル


ここがポイント

  • CSSを記述するときは、必ず下記のような書き方になります。

    セレクタ { プロパティ : 値 }

    セレクタで適用する場所、 プロパティでスタイル、 値で具体的な形を指定します。
    全て半角英数での記述になります。
    プロパティと値の間には必ずコロン( : )が入りますので忘れずに。
  • bodyはブログの表示範囲全体を表す要素(セレクタ)です。
    このbody部分に色や画像を設定すると、その色や画像が背景として表示されます。
  • background-colorは背景色を指定するプロパティです。
    ここにカラーコードで値を指定することで背景色を変更します。

お世話になりました

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。


<関連記事>
第6回: 背景に画像を表示してみよう


*この記事にコメントを書く*


|

« 第4回:タイトルにオリジナルの画像を設定してみよう | トップページ | 第6回:背景に画像を表示してみよう »

カスタマイズ」カテゴリの記事

背景」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/731332

この記事へのトラックバック一覧です: 第5回:背景の色を変えてみよう:

« 第4回:タイトルにオリジナルの画像を設定してみよう | トップページ | 第6回:背景に画像を表示してみよう »