背景画像を設定してみよう。[CSS編集用デザイン] | アメブロをカスタマイズしよう!

アメブロをカスタマイズしよう!

最近、サイトの見栄えやSEO対策により、アクセスアップを図ろうとする傾向が顕著になってきました。そこで、その解決策の一つとして、アメブロのカスタマイズを研究してみようと思います。あなたのブログのご参考にしてくださいね。

ご訪問ありがとうございます。
人気ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
ダウンダウン

人気ブログランキングへ



ヘッダー画像の設置が終わったので、
今度は、背景画像を設定してみましょう。



【1】画像のアップロード

ブログの左上部の[ブログを書く]をクリックします。
[ブログを書く]画面が表示されたら、[画像]ボタンをクリックします。
[参照]ボタンと[アップロード]ボタンを使って、画像をアップロードします。



【2】画像のURLをメモ帳にコピー

画像がアップロードされたら、画像を選択して、
[この画像を使う]ボタンをクリックします。

下記の通り、画像のURLが表示されたら、
この中の黄色部分をメモ帳にコピーします。

背景画像のURL



【3】CSSの編集

①[マイページ]→[クイックリンク]→[スキンCSSの編集]の順にクリックし、
CSS編集画面を表示します。

②下記のCSSをコピーし、
上記①のCSS編集画面の一番最後の続きに追加(貼り付け)します。

/* ■背景画像■ */
.skinBody {
background-color: transparent;/* 背景色を透明にする */
background-image: url("画像のURL");
background-repeat: repeat;/* 画像を縦横両方向に、繰り返す。 */
}



【4】CSS編集画面で背景画像のURLを入力します。

上記【2】の黄色い部分を
上記【3】の画像のURLの箇所に置換えます。



【5】表示の確認

ここまでできたら、下方へスクロールして、[表示を確認する]をクリックし、
背景画像がいい具合に表示されるかどうかご確認ください。



【6】CSSの保存

これで、OKなら、元のページに戻り、[保存]ボタンをクリックします。

これで、ブログは、次のようになりました。

背景画像を設定したブログ(クリックすると拡大します)



今回は、以上です。


最後まで読んでいただき、
ありがとうございました。

人気ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
ダウンダウン

人気ブログランキングへ

クリックして戴けると、
とても励みになります。