- トップ>
- アメブロカスタマイズ>
- 背景画像のCSS
CSS編集用デザインで背景画像を設置
CSS(スタイルシート)でヘッダー画像を設置の続きと、オリジナル背景画像の設定です。CSS 編集用デザインのカスタマイズです。
ヘッダー画像の上には、ブログのタイトルと説明文が表示されます。
ヘッダー画像にもタイトルを記載している場合、タイトルが重なって表示されてしまいます。
対処方法は、ステップ3「タイトルと説明を消す(非表示)」に2パターン掲載しております。※補足と詳細もご確認ください。
新しくなった CSS 編集用デザインでは、以下が編集箇所となります。
変更前の CSS コード
/* (1-2) ブログタイトル文字
--------------------------------------------*/
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}
スポンサーリンク
CSS でオリジナルの背景画像を設定
背景用の画像を用意して、ファイルを選択からアップロードします。
変更前の CSS コード
/* (3-1) ボディ(全体)
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
変更後の CSS コード(赤字が編集部分です)
/* (3-1) ボディ(全体)
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{
background-image: url(背景画像のパスを貼り付けてください);
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
「背景画像のパスを貼り付けてください」の文字を「この画像のパス」に変更します。この画象のパスを、コピー&ペーストして下さい。
以前の「【カスタム可能】ベーシック」ではパスを貼り付けるだけでしたが、CSS 編集用デザインでは「background-image:url();」を自分で記載する必要があります。
背景画像をリピート表示したくない(1回だけ表示する)場合は、以下のように CSS コードを記載します。
背景画像を1回だけ表示(赤字が編集部分です)
.skinBody{
background-image: url(背景画像のパスを貼り付けてください);
background-repeat: no-repeat;
}/*
背景画像を横方向か縦方向だけに繰り返し表示する場合は、以下のように CSS コードを記載します。
背景画像を横方向にだけ繰り返し表示(赤字が編集部分です)
.skinBody{
background-image: url(背景画像のパスを貼り付けてください);
background-repeat: repeat-x;
}/*
背景画像を縦方向にだけ繰り返し表示(赤字が編集部分です)
.skinBody{
background-image: url(背景画像のパスを貼り付けてください);
background-repeat: repeat-y;
}/*
背景画像の開始位置を指定したい場合は「background-position」を指定します。
背景画像を右上に表示(赤字が編集部分です)
.skinBody{
background-image: url(背景画像のパスを貼り付けてください);
background-repeat: no-repeat;
background-position: right top;
}/*
最初に横方向を指定して、スペースで区切って縦方向を指定します。
上の例では「background-position: right(横方向の指定) top(縦方向の指定);」なので、右上に背景画像が表示されます。
left/right/top/bottom/center といった指定もできますし、50px 30px というように数値で指定することもできます。
背景画像の設定についてまとめますと、繰り返して表示する背景画像の場合は「background-image:url();」に画象のパスを貼り付けるだけで完了です。
繰り返して表示しない背景画像(1枚の画像として表示)は、リピート(background-repeat)と開始位置(background-position)の設定が必要です。
背景画像の開始位置は、表示を確認する(プレビュー表示)を使って調整すると分かりやすいです。
スポンサーリンク