下町に住む 風と鈴の気ままな猫生(にゃんせい)

2010年11月
-
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
-
-
-
-
PROFILE
わらび

愛玩動物飼養管理士(ペットケアアドバイザー)1級      これからも、日々勉強の積み重ねで頑張ります。        -----------------------

ひよこ豆

年上の♀友達。        わらびと一緒に住んでます☆  -----------------------

ミャオ ♀

1987.2.14-2003.8.16 享年16歳白血病を持っていたミャオとワタシが一緒に暮らし始めたのは、ミャオが11歳のときでした。縞三毛でない正統派(?)三毛です。   -----------------------

風(ふう)♀

03年8月、真夏の野外に兄弟達とダンボールに入れられ放置されてました。3歳過ぎまで空腹の意思表示すらしない子でしたがアピールできるようになりました。(目の前に出しても気づかないけど)        03年7月20日(旧:海の日)を誕生日に。             -----------------------

鈴(りん)♀

03年8月、真夏の野外に兄弟達とダンボールに入れられ放置されてました。生まれたときから一緒の『風』と 人間が大好き☆    03年7月20日(旧:海の日)を誕生日に。              -----------------------

麦(むぎ)♂ 旧:リュウタ

沖縄多頭飼育崩壊「80頭を救いたいプロジェクト」出身。ちょっと怖がりですが 優しい男の子です。ひよこ豆家の子。     05年12月19日を誕生日に。             -----------------------

花(はな)♀

08年8月に千葉県の動物愛護センターより引出し。曲がったままだった右後足の手術も終わりリハビリを頑張ってる元気いっぱい(元気すぎ?)な女の子。色々ありましたが麦の妹になりました。  -----------------------

LINK
CATEGORY
RECENT
RECENT TRACKBACK
ARCHIVES
RECENT COMMENTS
MYALBUM
SEARCH
PR




カスタマイズ 〜body image編
前回は「背景色の変更」を書いてみましたが、今夜はその続編です。
今度は「body」を好きな画像に変えてみましょう。

body {
background-color:#FFFFFF;
color:#000000;
font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif;
font-size: 12px;
}

上記の英文の二行目 background-color:#FFFFFF; は「背景色(background-color)は白にする」ということは、前回 説明いたしました。
好きな画像にするのも、理屈が分かればカンタンです。
では さっそく。
 
body {
 /*background-color:#FFFFFF;
 color:#000000;*/
 background-image: url(http://cat.pelogoo.com/kleine_katze/pic/1150462827485538.jpg);
font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif;
font-size: 12px;
}

初めの英文と比べていただくと、行数が増えてるのがお判りいただけますでしょうか。
4行目に「 background-image: url」と入っています。
これは前回の「背景色(background-color)はこの色」の応用、「背景画像(background-image)はこのURL」と書いてあるだけなのです。
「このURLとは…」というのが5行目のことです。
 
さて、ここで一つ問題が。
「使いたい画像はマイドキュメントにあるけど、URLなんて無いよー?」って思われますよね?
はい、その通りです。
それではURLの説明に入りますね。
 
背景・紫陽花170×102.jpgこの紫陽花の画像をクリックしてみてください。
別のウインドウで画像が開きましたでしょうか?
そのウインドウの「アドレス欄」に入っている「http://cat.pelogoo.com/kleine_katze/pic/1150
462827485538.jpg」が紫陽花のURLになります。
ブログ更新するときの要領で、ファイル(画像)をアップロードして、閲覧をクリックするとウインドウが開きます。
これがURLです。
それを5行目の入れてあげるだけなのです。
でも ただURLを入れるだけだと、初めと終わりが判らないので(" ");でくくってあげましょう。

結構カンタンですよね?
最近は「無料HP素材」などを検索すると、カワイイ画像がたくさん見つかります。
それをマイドキュメントなどに「名前をつけて画像を保存」で保存してから使用するとお金を掛けずカスタマイズできます。
その場合の注意ですが、「無料HP素材」の画像のURLを そのまま使うことは絶対にやめてください。
「直リンク」とも言いますが、そのHPに迷惑が掛かる迷惑行為になりますので、必ず一度 PCに保存してから使用してくださいね。
 
最後になりましたが、気付かれた方もいらっしゃると思いますが
2〜3行目の
 
/*background-color:#FFFFFF;
 color:#000000;*/
 
一番前と後ろに/* */ が付いています。
「/* */」というのは「ここからここまでは無効です」という意味になります。
「背景画像」を決めたので「背景色」は必要ないので、消しちゃっても結構です。
ただ、消しちゃうと戻すのが面倒なので「無効」という意味のマークをつけてみました。
 
 
次回は、他の部分の色の変え方を説明しますね。
 
凪5.jpg
 
 
ファー不買.gifピースハウス.gif
 
スポンサード リンク

この記事へのトラックバックURL
http://cat.pelogoo.com/kleine_katze/rtb.php?no=1151847741366946



この記事への返信
いつも丁寧な説明、ありがとう。判りやすいですね。
私も画像変更やろうかなぁと思いながら、なんかいっつもやめちゃうんですよね。頑張ってやるそぉ…そのうち…
Posted by なお。 | 2006/07/02 23:41:39
判りやすいと言っていただけるとウレシイです(^^)
なお。さんとhappyさんは、可愛くて綺麗なテンプレートがすごくお似合いなのですが、ワタシのキャラと風&鈴にはちょっと…なので(^^;
Posted by わらび(管理人) | 2006/07/02 23:59:44
自分が作ってみた後に、こうやってわらびさんの説明を読むと
ますますよく分かります。
本当に分かりやすい説明ですね。


わらびさん、「誰にでもできる、超簡単ブログのカスタマイズ。スタイルシートの編集」って言う本を出版できますよ。
私が買った本よりも、ネットで調べたページよりも一番分かりやすいです。
ここまで親切に説明してくれてるところってありませんもの。
もし、出版されたら、私も必ず買います。
そしたらぜひサインも入れてください(笑)


スタイルシートで私が一番疑問に思っていたのは、どうすればこういう壁紙になるのかということでした。
どこかに「アジサイの壁紙」って書くとなるのかな?とか思ってたんですよ(笑)

素材も本当にたくさんあって、それをどう組み合わせて使うときれいに見えるか考えるのが、一番難しかったです。

直リンクというのがよく分からないのですが
その素材を自分のマイピクチャーに保存して、それを使うのはOkなんですよね。


「/* */」というのは知りませんでした。
私はbackground-colorとか全部消しちゃいましたが、一応元のスタイルシートはコピーして取ってあるので大丈夫ですよね。

Posted by まきっころ | 2006/07/03 16:09:25
わらびさん、とっても説明がお上手ですね。
全く知らない人にわかりやすく教えるのって凄く難しいと思います。
私も勉強させていただきます。<(_ _)>
Posted by ぽぽにゃん | 2006/07/03 22:01:04
>どこかに「アジサイの壁紙」って書くとなるのかな?とか思ってたんですよ(笑)

極端に言えば、それも可能です。
ただ、世界中のPCに「アジサイの壁紙」という名前で、同じフォルダに同じ画像が入っていれば…ですけど(笑)
不必要な「background-color」とかは消しちゃっても、元を保存してあるなら、ぜんぜん問題ありません(^^)
やっぱり、どこに何色を…って組み合わせが一番難しいですよねぇ〜。
Posted by わらび(管理人) | 2006/07/03 22:16:55
こんな拙い説明ですが…お褒め頂いてうれしいです☆
特別に勉強したわけではないので、専門の方に見られたら恥ずかしいですが(^^;
Posted by わらび(管理人) | 2006/07/03 22:23:44


◇ 返信フォーム


名前 :   情報を保存する
メール : 
URL : 
題名 : 

内容 :