こんにちはorこんばんは![]()
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/139.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/139.gif)
ブログカスタマイズやパソコン初心者の方が
パソコン1台で独立を達成
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/039.gif)
女性起業家のための集客力や
デザイン力を身につける
愛されるブログ作りのための
ブログデザイン・パソコン教室
ブログデザイナー:水本紗輝です。
お客さまの目と心をワシ掴む
魅力的なブログデザイン・
ヘッダーカスタマイズも
たったの1,0000円で承ってます
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/176.gif)
この度はご閲覧下さり、ありがとうございます。
どうぞ、よろしくお願いしますUU
-----------------------------------------------------------------------------------------
『アメブロ 背景画像をカスタマイズしよう!』
①背景画像のカスタマイズは、
ブログ管理ページ⇒
デザイン変更⇒CSS編集⇒
現在使用中のブログデザインCSS
(カスタマイズ可能なテンプレートを使用
している場合に限ります)
から行います。
ブログ管理ページ⇒
デザイン変更⇒CSS編集⇒
現在使用中のブログデザインCSS
(カスタマイズ可能なテンプレートを使用
している場合に限ります)
から行います。
【 繰り返さないデザインに適した画像を使う場合 】
②(3-1)ボディ(全体)欄 の
②(3-1)ボディ(全体)欄 の
.skinBody
{
}
を削除して
下記のコードをコピーして、
貼り付けて保存してください。
*カラーコード一覧
③背景にしたい画像を幅300px以下なら
ブログ管理ページの画像フォルダから
画像をアップロード。
それ以上ならば、
デザインの変更ページの
「ブログデザインヘッダ・
背景画像の追加」欄から
画像をアップロードします。
アップ後、画像のURLをコピーします。
④赤文字の部分に
背景にしたい画像のURLを
入れて、保存してください。
オレンジ文字の部分は
背景画像を繰り返すか、繰り返さないかを
決めるコードです。
繰り返しのコードは
● 背景画像を全体に敷き詰める⇒repeat
● 画像を配置した位置から横方向のみ⇒repeat-x
● 画像を配置した位置からから縦方向のみ⇒repeat-y
{
}
を削除して
下記のコードをコピーして、
貼り付けて保存してください。
/* 背景を繰り返さない場合のコード */
.skinBody
{
background-image: url(画像のURL);/* 配置したい画像のURL */
background-repeat: no-repeat;/* 背景画像を繰り返さない*/
background-position: left top;/* 背景画像の位置 */
backgroud-color: #cc99cc;/* 背景色 (背景画像の色に合わせてください)*/
backgroud-color: #cc99cc;/* 背景色 (背景画像の色に合わせてください)*/
}
*カラーコード一覧
③背景にしたい画像を幅300px以下なら
ブログ管理ページの画像フォルダから
画像をアップロード。
それ以上ならば、
デザインの変更ページの
「ブログデザインヘッダ・
背景画像の追加」欄から
画像をアップロードします。
アップ後、画像のURLをコピーします。
④赤文字の部分に
背景にしたい画像のURLを
入れて、保存してください。
.skinBody
{
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20140106/11/92/46/j/o09701217world-paper-craft1388975996208.jpg);/* 配置したい画像のURL */
background-repeat: no-repeat;/* 背景画像を繰り返さない*/
background-position: left top;/* 背景画像の位置 */
backgroud-color: #cc99cc;/* 背景色 (背景画像の色に合わせてください)*/
backgroud-color: #cc99cc;/* 背景色 (背景画像の色に合わせてください)*/
}
オレンジ文字の部分は
背景画像を繰り返すか、繰り返さないかを
決めるコードです。
繰り返しのコードは
● 背景画像を全体に敷き詰める⇒repeat
● 画像を配置した位置から横方向のみ⇒repeat-x
● 画像を配置した位置からから縦方向のみ⇒repeat-y
の3種類があります!
グリーン文字の部分は“カラーコード”と言い、
“背景の色”を表します。
背景画像を使わず、背景の色のみ
変更したい場合は、
下記のコードのみでOKです![](https://stat100.ameba.jp/blog/ucs/img/char/char2/038.gif)
好きな色のコードに変更してください。
グリーン文字の部分は“カラーコード”と言い、
“背景の色”を表します。
背景画像を使わず、背景の色のみ
変更したい場合は、
下記のコードのみでOKです
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/038.gif)
好きな色のコードに変更してください。
試してみてくださいね
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/038.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/283.gif)
長くなりそうなので、続きは次のページへ
次は、 /* 背景画像をブラウザに合わせて画面いっぱいに表示する */ です。
-----------------------------------------------------------------------------------------
宜しかったら、1クリックお願いします
![音譜](https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif)
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fimage.with2.net%2Fimg%2Fbanner%2Fc%2Fbanner_1%2Fbr_c_1536_1.gif)
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fimage.with2.net%2Fimg%2Fbanner%2Fc%2Fbanner_1%2Fbr_c_4411_1.gif)