1. TOP
  2. アメブロカスタマイズ
  3. ブログの背景のカスタマイズ③・(3-1) ボディ(全体)・初級アメブロカスタマイズガイド

ブログの背景のカスタマイズ③・(3-1) ボディ(全体)・初級アメブロカスタマイズガイド

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

今回はCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-1) ボディ(全体)」のその3です。前回の記事はこちらです。まだ見ていない方はこちらから見ていただくとより理解が深まるかと思います。

「(3-1) ボディ(全体)」のその3を解説します

いきなり応用編と行きたいところですが、今回は背景画像の設定方法と、コーディングの約束をまず解説します。今回は私が用意した背景の素材を実際に使って解説したいと思います。その前にこのコラムと次回のコラムまでの最終的なゴールを確認しましょう。

image-11042737124-11536015248

このコラムを学びながら、実際に確かめたいというあなたのために上記の画像素材をダウンロードできるようにしてありますので、こちらよりダウンロードをして解説を見てもらえるとよいと思います。

ここをクリックして画像素材のダウンロードをします。→画像ダウンロード
画像素材は3点
①ブログ上部のグラデーション
②ブログ下部のグラデーション
③葉っぱの画像

画像はzipファイルで圧縮してありますので、あなたのパソコンに保存してお使いください。このコラムでは既にあなたのパソコンに画像があるということを前提で解説します。

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

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

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

まずはあなたのパソコンにある画像を、アメブロにアップロードするところから始めましょう。まずはクイックリンクより「CSSの編集」をクリックします。下にイメージ画像をアップしました。このイメージ画像の手順でダウンロードした3つの画像を全てアップロードします。

image-11042737124-11536461534

手順2 CSSにコードを記述します。

今回はCSSに上部のグラデーションの部分の画像を設定します。まず以下のようにCSSの画面の「(3-1) ボディ(全体)」の部分にコードを追加してください。赤い部分が追加箇所。

/* (3-1) ボディ(全体)
--------------------------------------------*/

/* skinBody ボディ */
.skinBody{background-image:url(あなたがアップロードした画像のURLをコピーして貼り付け);
background-repeat:repeat-x;
background-position:left top;
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

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

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

image-11042737124-11536561996

これでプレビューすると、ブログの画面上部に緑色のグラデーションが設定されたのが分かります。

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

今回のコードは3種類です。

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

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

② background-repeat:repeat-x

英語でリピートとあるように、画像の繰り返しをどうするかを設定しています。repeat-xというのは横方向に画像を繰り返しなさいと指示しています。大きな容量の画像を使用すると、読者のパソコンでの読み込みが遅くなってしまうために、今回の画像でも横幅は1pxと限界まで狭くしています。この横幅1pxの画像を横方向に繰り返すことで、1面がグラデーションの背景が実現できるわけです。

ちなみに repeat-y なら縦方向に繰り返し。そして no-repeat は繰り返さない。つまり一度だけ表示という指示になります。backgroune-repeatを指定しない場合は、縦横に画像の繰り返しが起こります。なにも指定しないときはこれが標準設定です。

③ background-position:left top;

画像の開始位置を指定しています。left topでブログの左上から(現実には違うのだが、ここはあえて分かりやすく表現しています)開始するように指示しているわけです。開始位置の設定は他にもあるのですが、次回のコラムでまた別の方法を解説します。チェックしてくださいね。

今回のまとめ

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

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

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

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

>>ページのトップへ

おすすめ

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