GT-ONE 楽天タグ講座 パイプ奮闘記

楽天での壁紙について

初心者のためのHPの飾りつけ教室VOL.8




【HPの飾りつけ教室VOL.8】 上手な壁紙の使い方!
★ 壁紙でHPをセンスアップしよう! ★

    壁紙の色や柄で、ホームページから受ける印象は違ってきます。
    同じ風景の写真でも、壁紙を暗くするか、明るくするかで写真のイメージが変わってしまいます。
    壁紙は、ホームページのイメージの方向性(かわいい、クール、シンプル、など)
    を決めるといえます。
    見る人にどのようなイメージを持って貰いたいか、どのようなイメージなら
    自分のホームページの内容に合っているか考えて壁紙は選らんだ方がいいですね。

    楽天では、1枚の壁紙しか選ぶ事が出来ません。
    なぜかといいますと、各ページの編集をする、テキストページに<BODY>のタグがないからです。

    みなさんのホームページに限らず、すべてのブラウザの画面は、HTMLのタグで成り立っております。
    ソースを簡単に書きますと↓こういうものです。

     メモ帖
     ファイル 編集 表示 お気に入り ツール ヘルプ
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>
    <BODY>

    ここに、文を書きますと、表示されます。
    画像などは、HTMLタグで書きますと表示されます。
    つまり、<BODY>から</BODY>の間に書いたものが、
    ブラウザに表示されるのです。


    </BODY>
    </HTML>


    各ブラウザで壁紙や背景色を指定するには、普通は、<BODY>のタグの中に
    BACKGROUND="~背景画像のURL~" それとも BGCOLOR="指定したい色"
    入れれば、いいのです。 このように↓

     メモ帖
     ファイル 編集 表示 お気に入り ツール ヘルプ
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>
    <BODY BACKGROUND="~背景画像のURL~">

    <BODY>タグの中で、そのページの属性を指定できるのです。
    例えば、文字のフォントや背景、など

    </BODY>
    </HTML>



    しかし、楽天のテキスト編集ページには、この<BODY></BODY>タグがないですね。
    ですから、各ページの壁紙や色を指定できないのです。

    楽天で、私たちが編集しているのは、この<BODY>から</BODY>タグの中だけを
    編集しているのです。

    では、どうすれば、各ページの壁紙を指定できるか?それをやってみましょう。

    【更新2004/10/11 お詫び!】
    2003/10/23 のタグ規制でここから下のタグは使えなくなりました。
    onload=body.style. というタグが使えません。
    ですから、BODY 内に命令が出せなくなりました。
    楽天では使えませんが、参考のために残して起きます。
    ご承知おき下さい。

    <onload=body.style.>というタグがあります。
    <onload> はブラウザを開いた時に、命令を実行しますよ、というタグです。
    <style> これは、色々な命令を出すタグです。この<style>を使えば、
    <body>内に、属性を指定できます。
    ではそのタグを書いて見ます。


    <IMG src="~背景画像のURL~" width="0" height="0" onload=body.style.background="url(~背景画像のURL~)">


    width="0" height="0"のように、背景画像の幅、高さ、が 「0(ゼロ)」に指定してありますが、
    心配ありません。
    直接、<BODY>に命令を出していますから。
    逆に幅、高さを指定しますと、タグを書いたところに、画像が表示されてしまいます。

    また、タグを貼りつけるところは、編集ページの一番上の方がいいと思います。
    下の方ですと、読み込みに多少時間が掛かってしまいますから。






    【では次に、画像を固定してみましょう。】

    ブラウザをスクロールすると、通常はページの内容とともに壁紙もスクロールしますが、
    この壁紙を動かないように固定する事が出来ます。
    まるで映画のスタッフロールのようにページの中身だけがスクロールされ、
    ダイナミックな印象を与える事が出来ます。

    画像を固定しますと、スクロールしても背景画像はそのままです。
    風景画の背景とか、写真の背景に有効です。
    私のトップページは、背景を固定しております。

    背景を固定するには、通常、先にも述べましたが、<BODY>タグの中で属性を指定します。
    <BODY>タグの中に、

    style="background-image:url(背景画像のURL);background-attachment:fixed;"

    このタグを入れますと、そのページの背景が固定できます。
    このように

    <BODY style="background-image:url(背景画像のURL);background-attachment:fixed;">

    でも楽天では、それが出来ません。

    楽天で壁紙を固定するタグを書いてみましょう。


    <IMG src="~背景画像のURL~"width="0"height="0"onload=body.style.background="url(~背景画像のURL~)";body.style.backgroundAttachment="fixed">



    このようになります。背景を出す、タグの後に、

    ;body.style.backgroundAttachment="fixed"

    のタグを追加しました。
    どうですか!みなさんもやってみてください。

    このほかに、背景画像をリピートさせないタグ、上に一行しか表示しない属性のタグ、
    左に一列しか表示しない属性のタグ、と色々ありますが、
    それはまた、時期をみてやってみましょう。

    ここぞというページは、背景を変えて、ページのセンスアップに挑戦してみてください。
    しかし、背景が主体みたいなページにはしないように注意しましょうね。
    あくまでも、テキストが主体です。

    ではでは!【HPの飾りつけ】みなさんがんばってください。(*^_^*)






【飾りつけ教室 MENU】にもどる。






Copyright (c) 1997-2020 Rakuten, Inc. All Rights Reserved.