1. TOP
  2. アメブロカスタマイズ
  3. (1)基本のスタイル編 (1-2) 基本背景④背景画像の設定(新CSS編集用デザイン)

(1)基本のスタイル編 (1-2) 基本背景④背景画像の設定(新CSS編集用デザイン)

(1)基本のスタイル編 (1-2) 基本背景③背景色の設定方法を解説します

ここではブログに背景を付ける方法や、背景画像を置く場合の設定方法を解説します。

※ちなみに背景色を設定する場合は、こちらの記事で紹介しています。

→背景色の設定方法

では、さっそくいきましょう。

設定箇所は

(1)基本のスタイル編 (1-2) 基本背景

になります。

今回は以下のコルクの画像を使って、カスタマイズします。

koluku

完成するとこんな感じになります。

haikei2

では設定方法です。

記述するコードは

(1)基本のスタイル編の(1-2) 基本背景

の部分になります。

修正箇所は赤字の部分になります。

/* (1-2) 基本背景
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}

背景に画像を設定する方法

では手順を追って解説しましょう。

手順1 画像をアップロードする

まずはあなたのパソコンにある画像を、アメブロにアップロードするところから始めましょう。まずは「CSSの編集画面」開きます。下にイメージ画像をアップしました。この手順に従って、画像をアップロードしましょう。

haikeigazou

手順2 コードを修正します。

次に上記コードにある、

background-color: #ffffff;

の部分のを以下のように書き換えます。

書き換えると次のようになります。

/* (1-2) 基本背景
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background:url(あなたがアップロードした画像のURLをコピーして貼り付け);
}

手順3 画像のURLを貼り付け

手順1で画像をアップロードした際に、下図のように、「画像のパス」が生成されています。このパスをコピーをし、

image-11042737124-11536561996

 

手順2で書き換えた中にある、「あなたがアップロードした画像のURLをコピーして貼り付け」 とある部分に以下のイメージの手順で画像のコード(URL)をコピーして貼り付けます。

手順2で削除した部分にコードを貼り付けます。

/* (1-2) 基本背景
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background:url(あなたがアップロードした画像のURLをコピーして貼り付け);
}

 

これでプレビューすると、ブログに背景が設定されたのが分かります。

アメブロCSS:コードの解説

background:url(あなたがアップロードした画像のURLをコピーして貼り付け)

これは背景に画像を設定するときのコードでurlの後のカッコの中に画像のURLを入力することで、背景画像を設定することができます。

今回のまとめ

今回は画像を設定する基本編を解説しました。この方法は全てのカスタマイズに使える基本的な技法です。覚えておくとカスタマイズの幅が広がりますよ♪

backgroundプロパティを良く使う場所は、例えば

  • 今回解説した全体の背景
  • ヘッダー画像設定
  • サイドメニュー背景
  • サイドメニュータイトル背景
  • 記事背景
  • 記事タイトル背景
  • コメント欄背景
  • その他・・・

多種多様です。まずは背景の置き方を理解しておきましょう♪

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ