画像の固定法


No 1.　 ＨＰへの固定法
　　　　　　　 No 2. 　 レンタル 掲示板への固定法は　
　　　　　　　　　　　　　　　　　　　　　　　　次のページに記載してあります。　　 　　　　　　　　　　　　



　画像を固定すると　画面が見やすくなりますね。
（内容によっては　見にくくなることも・・・。）
　　　　　　私なりに　まとめてみましたので　ご参考になれば幸いです。
　
　　　　　　　なお　固定法を学ぶにあたって　ろんさんや　じゃいあんさんに
　ご指導頂きました。有難うございました。 　　　 　　　　　　　　

　　　　　　おふたりはタグ派　私は既成のビルダー派ですので
理解できずに　四苦八苦しました。　　　　　　　　　　　　　
　　　　　　　　　　　　　活字上でのご指導でしたので勝手な解釈をしているかも知れませんので
ご了承頂きとうございます。　　　　　　　　　　　　　　　
　　　　　　　　　


　まず　固定法の　基本となるタグを記載しておきます。
　★印は　画像のフアイル名・または　ＵＲＬと画像フアイル名が
　　　　　　　　　　　　　入ります。≪転送済みか否かで違ってきます。ここが　難しいところです≫


●　壁紙を固定するタグ 　　　　　　　　　　　　　　　　　　　　　　


<style type="text/css">
<!--
body {background: url("★") fixed;}
-->
</style>


または　下記のタグ。
これは　私が　箇条書きふうにしたものです。


<style type="text/css">
<!--
body {background-image:url(★);
background-repeat:repeat;
background-attachment:fixed;}
-->
</style>

●　ボーダーの壁紙　≪たて・横共通≫

<style type="text/css">
<!--
body {background-image:url(★);
background-repeat:no-repeat;
background-attachment:fixed;}
-->
</style>

　　　　　　　　　違いが　わかりますか。そう　リピートさせるか　させないかです。


今度は　画像一個を固定する方法です。



●　画像一個の固定

　　　左上の場合

　　　<style type="text/css">
　　　<!--
　　　body
{background-image:url(★);
　　　background-repeat:no-repeat;
　　　background-position: left top ;
　　　background-attachment:fixed;}
　　　-->
　　　</style>

　　　　　 右上の場合は　left top　を　right top 　

　　　　　 左下の場合は　left bottom

　　　　　 右下の場合は　right bottom

　　　　　　上の中央は　　　center top

　　　　　　下の中央は　　　center bottom　と 書き替えてください。


その他のタグ

一個の画像を　並列する場合

　　　　　基本のタグを一部変更すれば　ＯＫです。
　　　　　　＜左端並列＞のタグを基本に　これから　展開していきますね。


　　　　　左端・並列 の場合 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

<style type="text/css">
　　　<!--
　　　body
{background-image:url(★);
　　　background-repeat:repeat-y;
　　　background-position: 0% 0% ;
　　　background-attachment:fixed;}
　　　-->
　　　</style>


　　　上端・並列 の場合　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

background-repeat:repeat-y;
　　
の部分を

background-repeat:repeat-x;
　
と　変更


　　　　右端・並列 の場合　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

background-position: 0% 0%

の部分を

background-position: 100% 100%

と　変更

　　　　下端・並列 の場合　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

background-repeat:repeat-y;
background-position: 0% 0%

の部分を

background-repeat:repeat-ｘ;
　background-position: 0% 100%

と　変更します。



お気づきかと思いますが　数学の座標を思いだしてください。
ｘ　座標は　横　　ｙ　座標は　たて でしたね。

横に並列の場合　　repeat-ｘ　

たてに並列の場合　 repeat-y　　

また　position を　％で表せるんですよ。
　　　　　left top とか　right top　と　しなくても大丈夫です。　

どうやって？って・・。

これは　Qestionにしておきますよ。
さぁ、お気づきでしょうか？


　　　　　　　　　　　　　　ヒント　　最初の数字は　横、後のほうは　たてを表しています。　　　　　　　　　　　
　　このページの下のほうに　記しておきます。


数学で　ｘ軸と y軸の交点は （ ０．０ ） ですが
画像では　（０．100）です。

頭を切り替えて
画像の交点 ( ０．０ ) は　左上角 と考えましょう。


◎　分かりにくい人は　別の考え方をしてみましょう。

座標の　（ x　・－y　）で表す範囲の

縦　（y）・横　（x）の考え方でも　OKですよ。



では　ここから　実践編　で～す

　
　　　　まず　準備として　メモ帳にタグをはりつけましょう。
　　貼りつけたら　最後でかまいませんが　「名前をつけて保存」のときに
　　bbs.css　とでも　フアイル名をつけて　おきましょう。


　①使用したい画像を　プロバイダに転送しておきます。
　　　転送しておくと　ビルダーの＜プレビュー画面＞で確認できます。
　　　（隠れページを作って転送し　実際確認するといいですよ。）
　　　
　
　最終的に　画像がアップされないときは　ｉｎｄｅｘのあるフオルダに
　画像を移動させてから　再度　転送してみましょう。


　②上のタグの　url　のところに　送ったフアイル名を　入れます。


　③フアイル名の入ったタグをコピーし　使用したいページのＨＴＭＬを開き　
　　　＜ＨＥＡＤ＞の次に　ぴったりくっつけて　貼り付けましょう。


　④プレビューで確認してみましょう。画像が入っていれば成功です。
　　　「ページ編集」の画面には　何もアップされていません。


　⑤「保存」をして　「転送」すればＯＫです。





次のページへ

レンタル掲示板への固定法を説明しています。

Home



◆横の線を引くとき　どちらから引きますか？
大抵の人は　左から右へだと思いますが・・。

　　　　　　　起点を０％（左）にします。終点（右）が　１００％。

　　　　　◆縦は　上から下へ、向かって線を引きますよね。　　　　　　 　　　 　　　　　　　　　

　　　　　　　　　ですから　起点が０％（上）　終点（下）が　１００％です。
　　　

さて　あなたへの問題・・・

中心に　表示したいときは　どのようにしたら良いのでしょう。？