背景画像を指定する

背景に大きな固定画像を設定するやり方をまとめます。画面スクロールしても画像が動かないのがミソです。

まず、ワイドモニターに対応するために１６９０ｐｘ程度の大きさの画像を用意しましょう。オリジナリティを出すためにも、自分でデジカメで撮影することをお勧めします。ファイル形式はgif、jpg、pngがよいでしょう。アメブロだと、１ＭＢまでという制限があるので気を付けてください。

アメブロの場合、マイページやクイックリンクから「デザインの変更」→「ＣＳＳの編集」とクリックしましょう。

ブログデザインヘッダ・背景用画像の追加という枠で、先ほど用意したファイルをアップロードしましょう。

アップロードされた画像の欄に出てくるアドレス（http:・・・・）をコピーです。

最後に、ＣＳＳの一番下に、下の枠内の文を追加します。「画像ＵＲＬ」っていうのは先ほどコピーしてもらったアドレスです。＊ＵＲＬもアドレスも同じ意味で使ってます。

画像をアメブロの背景にするＣＳＳ

/* 画像を背景に固定 */
body{background-image:url(画像ＵＲＬ);
background-repeat:no-repeat;
background-position:0% 0%;
background-attachment:fixed;
/* 背景画像をスクロールさせない */}

これでアップロードされた画像が背景になっていれば完成です。

注意点
・「/*」と「*/」の間のスペースは半角スペースです
・改行する直前がセミコロン（；）、文の途中はコロン（：）です
・{}の閉じ忘れにご注意を