(2)ヘッダーエリアのスタイル(2-1) ヘッダー背景・背景画像の設定方法(新CSS)

(2)ヘッダーエリアのスタイル(2-1) ヘッダー背景・背景画像の設定方法(新CSS)

アメブロカスタマイズ

ヘッダー部分に背景画像を設定する

この解説は2016年3月に追加されて新CSS編集用デザイン用のカスタム解説です。旧デザインの変更はこちらのリンクをご参考ください→旧CSS編集用デザイン目次

では解説です。

ヘッダー部分に背景画像を設定するには、CSS編集用デザインの 「(2)ヘッダーエリアのスタイル」の中の以下の部分コードで赤色の文字の部分を修正します。ちなみに、ヘッダー下の背景の設定方法は、こちらで紹介していますのであわせてご確認くださいませ。

アメブロ全体に背景色を設定する

アメブロ全体に背景画像を設定する

/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}

背景にする画像は以下のコルクの画像を使います

koluku

完成するとこんな感じ

haikei4

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

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

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

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

haikeigazou

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

次に上記コードにある、

background-color: #ffffff;

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

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

/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background:url(あなたがアップロードした画像のURLをコピーして貼り付け);
}

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

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

image-11042737124-11536561996

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

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

/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background:url(あなたがアップロードした画像のURLをコピーして貼り付け);
}

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

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

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

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

今回のまとめ

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

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

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

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

>>ページのトップへ

おすすめ

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

« »

コメントは受け付けていません。