Cafi Netつながる情報技術

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)の設定が必要です。

背景画像の開始位置は、表示を確認する(プレビュー表示)を使って調整すると分かりやすいです。