スキンの背景画像を変更する

e0136387_21441842.gifスキンの背景画像変更方法をご紹介します。

こちらで配布しているスキンの中では今のところ、「SCRAPBOOK*BLACK」「SCRAPBOOK*WHITE」の2つが背景画像を変更いただいても違和感のないような設計となっております。
簡単なカスタマイズでブログの印象をグッと変えることができますので、ぜひトライしてみてください。




1. 背景画像を用意する


ご自分で作成されるのもよいですが、世の中には素敵なジェネレータがたくさんありますので、そちらを利用するのも手ではないかと思います。

以下に私のおすすめジェネレータを紹介します。

Stripe Generator
ストライプの背景画像が手軽に作成できます。
線の細さからグラデーションまで自由自在。

Tiles background designer
とても美しい背景画像がパターンの組み合わせで無限に作成可能です。
ちなみに上の画像はこちらのジェネレータで作成したもの。

Kaliber10000
ドットの背景画像が大量にダウンロードできます。
どれもこれもオシャレ。


2. 背景画像をアップロードする


用意した背景画像をアップロードします。

(2-1) マイブログ設定画面で [スキン変更] をクリック

(2-2) 「エキサイトブログ提供スキン | マイスキン」の [マイスキン] をクリック

(2-3) 使用中スキンの [編集] をクリック

(2-4) 「■HTML編集」[マイイメージアカウントにイメージ登録] をクリック

(2-5) 「イメージアップロード画面」が開いたら [参照] をクリックして画像を選択後、[送信]をクリック

(2-6) 「保存されたイメージリスト」内にファイル名があることが確認できたらアップロード完了。


3. CSSで背景画像を指定する


アップロードした画像をCSSで背景画像として指定します。

(3-1) (2-6) イメージアップロード画面「保存されたイメージリスト」でファイル名を選択すると、下に画像のパス(URL)が表示されるので、コピーしておく

(3-2) 「■CSS編集」で以下に示す赤字の部分を変更する

● 変更前(75~80行目あたり。#以降の数字は色の指定ですのでスキンによって異なります)
/* BASE */

body {
color: #8F8587;
text-align:center;
font-size: small;
font-family: Verdana,"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
line-height: 1.6;
text-align: center;
padding:0 0 50px 0;
background:#1D181A;
}


● 変更後
/* BASE */

body {
color: #8F8587;
text-align:center;
font-size: small;
font-family: Verdana,"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
line-height: 1.6;
text-align: center;
padding:0 0 50px 0;
background:url(アップロードした画像のURL) top center #1D181A repeat;
}

以上で完了です。
[PR]