(1)基本のスタイル編 (1-2) 基本背景④背景画像の設定(新CSS編集用デザイン)
(1)基本のスタイル編 (1-2) 基本背景③背景色の設定方法を解説します
ここではブログに背景を付ける方法や、背景画像を置く場合の設定方法を解説します。
※ちなみに背景色を設定する場合は、こちらの記事で紹介しています。
では、さっそくいきましょう。
設定箇所は
(1)基本のスタイル編 (1-2) 基本背景
になります。
今回は以下のコルクの画像を使って、カスタマイズします。
完成するとこんな感じになります。
では設定方法です。
記述するコードは
(1)基本のスタイル編の(1-2) 基本背景
の部分になります。
修正箇所は赤字の部分になります。
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}
背景に画像を設定する方法
では手順を追って解説しましょう。
手順1 画像をアップロードする
まずはあなたのパソコンにある画像を、アメブロにアップロードするところから始めましょう。まずは「CSSの編集画面」開きます。下にイメージ画像をアップしました。この手順に従って、画像をアップロードしましょう。
手順2 コードを修正します。
次に上記コードにある、
background-color: #ffffff;
の部分のを以下のように書き換えます。
書き換えると次のようになります。
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background:url(あなたがアップロードした画像のURLをコピーして貼り付け);
}
手順3 画像のURLを貼り付け
手順1で画像をアップロードした際に、下図のように、「画像のパス」が生成されています。このパスをコピーをし、
手順2で書き換えた中にある、「あなたがアップロードした画像のURLをコピーして貼り付け」 とある部分に以下のイメージの手順で画像のコード(URL)をコピーして貼り付けます。
手順2で削除した部分にコードを貼り付けます。
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background:url(あなたがアップロードした画像のURLをコピーして貼り付け);
}
これでプレビューすると、ブログに背景が設定されたのが分かります。
アメブロCSS:コードの解説
background:url(あなたがアップロードした画像のURLをコピーして貼り付け)
これは背景に画像を設定するときのコードでurlの後のカッコの中に画像のURLを入力することで、背景画像を設定することができます。
今回のまとめ
今回は画像を設定する基本編を解説しました。この方法は全てのカスタマイズに使える基本的な技法です。覚えておくとカスタマイズの幅が広がりますよ♪
backgroundプロパティを良く使う場所は、例えば
- 今回解説した全体の背景
- ヘッダー画像設定
- サイドメニュー背景
- サイドメニュータイトル背景
- 記事背景
- 記事タイトル背景
- コメント欄背景
- その他・・・
多種多様です。まずは背景の置き方を理解しておきましょう♪