背景用画像をCSSで設定

アメーバブログ（アメブロ）の CSS を編集して、無料でデザインをカスタマイズする方法の解説です。

今回は、「ブログを書く」-「デザインの変更」-「カスタム可能」から、カスタム可能ベーシックの 2カラム右メニューを適用して編集を行ないます。（他のカラム数でも結構です）

「デザイン変更」-「CSSの編集」から CSS の編集を行う前に、デフォルトの CSS を「右クリック」-「全て選択」で選択し、メモ帳に保存しておくといつでもコピー&ペーストで初期状態に戻すことができます。

CSS の編集を失敗した時などに便利なので、メモ帳に保存しておかれると良いと思います。もちろん、ブログデザインを再適用することでも初期状態に戻すことは可能です。同じデザインの同じカラム数を適用したい場合は、一度他のデザインか他のカラム数を適用してから再適用して下さい。

アメブロの背景用画像を追加する

ヘッダ用画像の追加は解説しましたので、続いて CSS の編集から背景用画像を追加します。

画像は、フリー写真素材のPhoto Chips 様からダウンロードしました。最新の利用規約は公式サイトでご確認ください。

ブログデザインヘッダ・背景用画像の追加は、CSS の編集画面からアップロードできます。記載の通り、gif / jpg / png のみ、5枚（各1MB以内）までアップロード可能です。

「ファイルを選択」-「アップロード」で、自分のパソコンにダウンロードした画像をアップロードします。

アップロードすると「この画像へのパス」が表示されますので、「右クリック」-「全て選択」か、Ctrl+A でパスを選択しコピーします。（そのまま右クリックでも選択できます）

/*５）ページ背景に画像を入れる*/
body{
background-image:url();
}

へ画像のように、() 内にコピーした画像へのパスをペースト（貼りつけ）します。

CSS の編集の画面下へ進み、「表示を確認する」（プレビュー）をクリックします。OK なら「保存」をクリックします。プレビューを確認して、背景画像を変更したい場合は同作業をマッチするまで繰り返します。

このままだと、背景画像が何度も繰り返して画面上に表示されます。画像のつながりなどの関係から、繰り返して表示したくない場合は、「background-repeat: no-repeat;」を追記します。

表示を確認する（プレビュー）で背景画像を確認すると、テンプレートとマッチしていませんでしたので、テクスチャのフリー写真を3枚アップロードしプレビューで確認しました。

最終的に芝生の画像が明るくて良かったので、プレビューで確認した後「保存」しました。

「background-repeat: no-repeat;」は、削除し背景画像がリピート表示される設定に戻しました。

もちろん、gif / jpg / png （各1MB以内）なら色々な画像が背景画像として使用可能で、画像加工ソフトで編集した画像も背景画像として利用できます。