2008年 01月 14日
背景に画像を貼り付ける方法(1)
Nikon D200 + Ai AF DC Nikkor 105mm F2D
f0018464_19484169.jpg
スキン編集コーナー再開です。
このblogの背景には大理石調の模様が付いています。
結構ゴージャスな雰囲気で良い感じですよね。^^
今日は、背景等に画像を貼り付ける方法を紹介します。



  
 背景に模様を付けるには、まず、背景用の画像をマイイメージアカウントというところに登録します。
次に、それをCSS編集でタイル状に貼り付けるように設定します。


f0018464_19561657.jpg
例えば、このblogのBODYの背景は、
← こんな画像をタイル状に敷き詰めて作られています。



で、具体的な貼り付け方法ですが、
背景用の画像をマイイメージアカウントにイメージ(画像)登録するのは、
スキン編集のHTML編集欄の右上からです。

↓ これですね。
f0018464_206439.jpg

この「マイイメージアカウントにイメージ登録」をクリックすると、下のような登録画面が出てきます。
f0018464_20123018.jpg

ここで画像を登録します。
(ファイルサイズの大きな画像(100kバイト以上)は拒否されますので、欲張りすぎないように。^^)

登録が終わったら、この登録した画像のURLを、スキン編集画面でCSSに設定します。
スキンの背景の場合は、BODY{  }の中にある「BACKGROUND :#○○○○○○;」の色コードの部分を以下のように書き換えます。


BACKGROUND :URL("イメージ登録した画像のURL");


<注意!> 
イメージ登録した画像URLの両端には必ず" "を付けてください。
先日、Firefoxというウェブブラウザを使用している方から、
私のblogにおいて背景画像が表示されていないとの指摘を頂きました。
で、原因を調べたところ、" "を付けないとFirefoxでは画像を貼り付けてくれないことが分かりました。
Internet Explorerでは" "無しでも問題ないので、今まで気付きませんでした。(^^;


ところで、イメージ登録した画像のURLって分かりますか?
イメージ登録画面で、登録した画像名をクリックすると表示されます。

↓ こんな感じです。
f0018464_20221365.jpg
f0018464_20222814.jpg
↑ これをコピペしても良いですし、コピーボタンを使っても結構です。

これで背景に画像が貼り付けられているはずです。

基本的に、背景はどれも「BACKGROUND:#○○○○○○;」と記載されているので、
方法さえ覚えてしまえば変更するのはそんなに難しくはないと思います。



 最後にちょっと補足説明をします。
今回は、小さな画像を敷き詰める方法を紹介しましたが、
大きめの画像を1枚だけ貼り付けたいときや、ワンポイントのアクセントを貼り付けたいときは、
敷き詰められると迷惑だったりします。
そんなときは、BACKGROUNDの行の下に「background-repeat:no-repeat;」を追加してください。
イメージアカウントに登録した画像を1回だけ貼り付けます。



背景画像に関しては、ネットで探せば適当な素材はすぐに見つかります。
ただ、なかなか気に入った画像が無いんですよね。
なので、私は背景画像を自作しました。
自作方法については、「背景に画像を貼り付ける方法(2)」で紹介します。


以上、参考になれば幸いです。

by muto2100 | 2008-01-14 20:54 | スキン編集 | Comments(12)
Commented by jin-na at 2008-01-14 21:23
今回もまた、気合の入った記事ですね。
これで、色んな方のスキンが変わりそうで、楽しみ☆

私は今回の記事で、マイイメージアカウントってのを初めて知りました。
以前は、ブログトップに写真を加工してもってきていたのですが、
最近、そのアップローダーが使えなくなって困ってたんです。

これで、解決。
さっそく、やってきまぁす☆
Commented at 2008-01-14 23:14 x
ブログの持ち主だけに見える非公開コメントです。
Commented by muto2100 at 2008-01-15 07:46
jin-naさん、こんにちは。
オリジナリティを追求すると、どうしても背景に画像を貼り付けたくなりますよね。
blogの雰囲気ががらりと変わりますから。

ぱっと見、難しそうなんですが、実際は簡単です。
CSSの編集もBACKGROUNDの後に付いている色コードをURLに変更するだけですからね。
ワンポイントのイラストみたいなのを入れようとすると、
貼り付け場所の微調整が必要になるのでちょっと難しいですけど。

背景画像の一番難しい点は素材作りです。
気に入った背景用の素材って、なかなか無いんですよね。
それについては次回紹介します。
Commented by muto2100 at 2008-01-15 07:52
鍵コメさんこんにちは。
ご指摘下さいまして有り難うございます。
Firefoxは使ったことがないので、表示がおかしくなっているとは全く気付きませんでした。
Windowsでは何の問題もありませんでしたからね。

おかしいのが記事、サイドバーの幅、あと背景画像ですね。
早速詳しく調べてみます。

今のところ、考えられる原因が1つありまして、
それを実行すれば多分背景画像は表示されると思います。

幅に関しては、ちょっと手間取るかもしれません。
これも原因の元は分かっているのですが、復旧方法が難しかったりします。
お手数でなければ表示幅に関して、もう少し具体的にお聞かせ頂けませんでしょうか?
Commented at 2008-01-15 09:55 x
ブログの持ち主だけに見える非公開コメントです。
Commented by muto2100 at 2008-01-15 19:23
鍵コメさんどうもです。
とりあえず、背景画像については心当たりを試したらビンゴでした。^^
イメージ画像URLの両端に" "を付けないとダメみたいですね。
IEでは大丈夫なんですけど。
早速、上の記事にも注意書きを挿入しておきました。

枠に関しては、なかなか手強いですね。
とりあえず、記事だけは読めるように微調整しました。
ただ、完全にするにはもう少し時間が掛かりそうです。(苦笑)
このスキン自体に、ちょっとした無理があるもので。^^

とりあえず、私のPCにもFirefoxをインストールしましたので、色々とやってみますね。
で、改善しなければスキンを作り直します。^^
ご指摘、有り難うございました。
今後ともよろしくお願いします。
Commented by poko_88 at 2008-01-15 19:26
こんばんは。
mutoさんのスキン編集解説、とても参考になります。
私のblogもちょっとだけスキン編集していますが、
mutoさんの前回の記事がとても参考になりました。
今回の記事も参考に、徐々に変えて行こうかなって思っています。
Commented by muto2100 at 2008-01-15 22:23
poko_88さん、こんにちは。
>>mutoさんのスキン編集解説、とても参考になります。
そういって頂けると、とても嬉しいです。^^
私も、自分のblogの過去記事を見ながらスキン編集してるんですよ。
しばらく経つと忘れてしまいますからね。
自分のためにUPしている側面もあるのです。^^

小変更も結構入れているので、ちょこちょことUPしていく予定です。
分からないことがあったら、遠慮無く聞いてくださいね。
ちゃんと答えられるかどうかは微妙ですが。(笑)
Commented at 2008-01-16 08:08
ブログの持ち主だけに見える非公開コメントです。
Commented by muto2100 at 2008-01-16 18:30
鍵コメ(その2)さん、こんにちは。
では、私なりに編集したスキンを上記アドレスに送りますね。
早ければ、今日中にお送りできると思います。

気に入って頂けると良いのですが。^^
Commented by rau at 2008-01-16 20:22 x
こんばんは。素早い対応ありがとうございました。
背景が表示されて、とても見やすくなりました。完璧です。
スタイルシートはブラウザごとに表示の仕方が違うので困ったものです。
これからも楽しく拝見させていただきますので、よろしくお願いします。
Commented by muto2100 at 2008-01-16 20:34
rauさん、こんにちは。
こちらこそ、ご指摘下さって有り難うございました。
ウェブブラウザというとInternet explorerしか頭になかったので、
まさかそんなことになっているとは思いませんでした。
自分のPCにFirefoxをインストールして見てみたら、あまりの酷さに愕然としましたから。^^

結局、このスキンは初めから作り直したものです。
実は、あのスキンは偶然の産物で、誤魔化した部分があったんですよね。
そういう部分を、一から洗い直しました。
おかげで、きちんとしたスキンを構築できました。^^
スキンそのものの構造にも随分と詳しくなりましたね。
良い勉強になりました。
rauさんには感謝、感謝です。 <(_ _)>

今後とも、よろしくお願いしますね。


<< 背景に画像を貼り付ける方法(2)      JTrim >>