アメブロ ブログの背景画像を固定する方法とは?

アメブロ ブログの背景画像を固定する方法とは?

アメブロの既存デザインスキンでは、
全体に背景画像を固定してありますね。

これは、最初に設定してあるんですね。
CSSで背景画像を固定しましょう。

 

 

 

私も新しいアメブロをまた立ち上げたんですが、
背景画像がなかなか設定できなくて、
ちょっと困ったんですね。

 

ステキな背景画像がちょぴっと小さかったり、
サイズが果てしなく大きかったり・・・・

 

 

せっかく素敵な無料画像をゲットしたのに、
なんかイメージ通りに背景画像が飾れてもなんか動くぞよ!!

 

そんな時にCSSにチョイ足しで、回避できます。

 

 

ただ、ここでポイントなんですが、
大き目の画像を用意できたらば、その方がいいのですが、
その時に、アメブロの記事投稿の画像アップロードでは、
ちょっと画像が美しくない!!ということも判明。

 

 

以前記事でも書いたんですが、
サーバーなども持っていなくて、
画像もたくさん使っているし・・・という方は、
ドロップボックスを使ってみて!!
無料で使えるWEB上の保管箱みたいな役割です。
私も、PC上にある使わないけど、とっておきたいファイルや、
画像などは、ドロップボックスに保管してあります。
DropBoxを利用して、ファイルを保存・共有する方法

 

 

ドロップボックスは、ちょっと読み込むのが遅いですが、
一度キャッシュされれば、割と早く読み込むことができますよ。

※キャッシュとは?
ブラウザで表示したWEBサイトの情報を一時的に記憶しておくことです。

外部のメディアを使って、画像をアップロードしたほうが
画像自体美しく、ブログに反映します。

 

 

画像がアップロードできたら、
ブログ全体に背景を表示させます。

 

 

CSSでは、ブログ全体をbody とするので、
ここに下記CSSを追加です。

 

 

 

 

CSSの解説です。

アップロードした画像が大きい場合はno-repeatを付けます。

no-repeat 繰り返さないという意味です。

 

小さい画像の場合は、
repeat で、下に横に画像を繰り返すという意味です。

 

また

background-attachment というのが、画像をスクロールさせるかどうか?
という設定になっているので、

background-attachment:fixed; とすることによって、
画像を固定するという命令をしています。

 

大きな画像の場合はこれだけです。

 

意外に簡単ね。

 

その他に、補足として背景画像をブラウザの大きさに合わせて、
自動で縮小・拡大できる方法もあるそうです。

 

これには、ちょいとビックリね。

 

私もお世話になっているアメブロのカスタマイズのわざめーばさんの
サイトで解説してあります。
ブラウザの表示サイズ合わせて自動で拡大・縮小する背景画像の設定方法

 

これは、すごし!!っていうか簡単。

 

小さい画像の場合はできませんので、
この設定をする場合は、ちょっと大きめな背景画像が必要となります。

 

下記のコード(ソース)をフリースペースか、
フリープラグインに貼るだけです。

 

フリースペースにコードを貼るときは、
改行や空白があると、表示できませんので、
注意してくださいね。

 

美しい背景画像が見つかったら、
ブログ全体に貼っても素敵ですよね。

 

それが、あなたのブログの代表的なカラーになりますよ。

 

ぜひお試しあれ!!

 
 
 
A6A6

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ