2012年8月27日月曜日

背景画像を指定する

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

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

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

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

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

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


画像をアメブロの背景にするCSS
/* 画像を背景に固定 */
body{background-image:url(画像URL);
background-repeat:no-repeat;
background-position:0% 0%;
background-attachment:fixed;
/* 背景画像をスクロールさせない */}


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

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

0 件のコメント:

コメントを投稿