前回は「背景色の変更」を書いてみましたが、今夜はその続編です。
今度は「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)は白にする」ということは、前回 説明いたしました。
好きな画像にするのも、理屈が分かればカンタンです。
では さっそく。
初めの英文と比べていただくと、行数が増えてるのがお判りいただけますでしょうか。
4行目に「 background-image: url」と入っています。
これは前回の「背景色(background-color)はこの色」の応用、「背景画像(background-image)はこのURL」と書いてあるだけなのです。
「このURLとは…」というのが5行目のことです。
さて、ここで一つ問題が。
「使いたい画像はマイドキュメントにあるけど、URLなんて無いよー?」って思われますよね?
はい、その通りです。
それではURLの説明に入りますね。
この紫陽花の画像をクリックしてみてください。
別のウインドウで画像が開きましたでしょうか?
462827485538.jpg」が紫陽花のURLになります。
ブログ更新するときの要領で、ファイル(画像)をアップロードして、閲覧をクリックするとウインドウが開きます。
これがURLです。
それを5行目の入れてあげるだけなのです。
でも ただURLを入れるだけだと、初めと終わりが判らないので(" ");でくくってあげましょう。
結構カンタンですよね?
最近は「無料HP素材」などを検索すると、カワイイ画像がたくさん見つかります。
それをマイドキュメントなどに「名前をつけて画像を保存」で保存してから使用するとお金を掛けずカスタマイズできます。
その場合の注意ですが、「無料HP素材」の画像のURLを そのまま使うことは絶対にやめてください。
「直リンク」とも言いますが、そのHPに迷惑が掛かる迷惑行為になりますので、必ず一度 PCに保存してから使用してくださいね。
最後になりましたが、気付かれた方もいらっしゃると思いますが
2〜3行目の
/*background-color:#FFFFFF;
color:#000000;*/
一番前と後ろに/* */ が付いています。
「/* */」というのは「ここからここまでは無効です」という意味になります。
「背景画像」を決めたので「背景色」は必要ないので、消しちゃっても結構です。
ただ、消しちゃうと戻すのが面倒なので「無効」という意味のマークをつけてみました。
次回は、他の部分の色の変え方を説明しますね。