000000

HOME | DIARY | PROFILE

【フォローする】【ログイン】

ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

TABLEでページ一覧を隠す

２月１７日のプチ講座で【トップページのページ一覧を変える！改】を紹介しました。

前回は、タグを載せただけだったので、今回はタグの属性の説明をして見ます。

　　◆　テーブル全体の説明　◆

紹介のタグは、テーブルのタグです。まずはテーブル全体のタグを説明しましょう。

↑これがテーブル全体を指定しているタグです。親要素に対して、絶対的な配置の命令を出しています。

それが、　

position:absolute;top:280;left:10;

　です。

絶対的に配置しますから、そのＷＥＢのスクリーンの一番手前に表示します。

top:280;left:10;

　は親要素の左上隅を起点にしてテーブルを何処に配置しなさいと命令しております。

top:280;

　は、上（ＴＯＰ）から２８０ＰＸ下がったところから表示しなさいと命令しております。

この数値は個々にいじってみて下さい。数値が小さくなればテーブルは上に行きます。大きくなれば下に下がります。

left:10;

　は左端から１０ＰＸ　の所からテーブルが始まる、ということを命令しています。

この数字はいじらないで下さい。

(￣m￣*)V

font-family:Comic Sans MS;font-size:9;color:black;

　はテーブルの中のＦＯＮＴを指定しています。

font-family:Comic Sans MS;

　は字体、Comic Sans MS　と指定しています。

font-size:9;

　　は字の大きさ、９ＰＸ　と指定しています。

color:black;

　　は字の色です。

width=110 height=1500

　はテーブル全体の幅と高さを指定しています。

width=110

　はテーブルの幅ですがこのまま触らなくてもいいでしょう。

height=1500

　は全体の高さですから、テーブル内の内容と照らし合わせて決めて下さい。

bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black

　の属性の説明です。

bgcolor=#696969

　はテーブル全体の背景色です。背景画像も載せられますが、スペースがないので背景色の方がいいと思います。

cellpadding=0 cellspacing=1

　はテーブルの中のセルの間隔を指定しています。１％に指定しています。

border=1 bordercolor=black

　はテーブル全体の枠の幅と色を指定しています。

では！次に各セルを説明します。

　　◆　各セルの説明　◆

正面玄関

←これが一つのセルです。黄色のテキストの部分が一つのセルのタグです。

抜き出して書いたものが↓これです。

<TR> <TD width="110" height="29" bgcolor="silver"> <a href="ここにリンクのＵＲＬ"> <img src="ここにアイコンのＵＲＬ" border="0"> </a> ここにリンク説明の文字 </TD></TR>

width="110" height="29"

　は各セルの幅　と　高さを指定しています。

高さのみアイコンなどの大きさに合わせて、変えてください。

bgcolor="silver"

　は各セルの背景色を指定しています。

背景画像を指定するには、 bgcolor="silver" の替わりに　 background="背景画像のURL"
を入れますと、このようになります。→→→→→

正面玄関

この各セルの中でリンクを張るのですが、ここでは、テキストにリンクを貼らないで、

あえてアイコンの画像→

だけにリンクを張っています。

テキストにリンクを貼りますと、そのテキストの下に

アンダーバー

が出てしまうからです。

アンダーバーがでても差し支えないという人は、テキストにリンクを貼ったほうが簡単ですね。

テキストにリンクを貼りますと、このようになりますね。

●正面玄関

タグは↓　これですね！

<TR> <TD width="110" height="29" bgcolor="silver"> <a href="ここにリンクのＵＲＬ"> ここにリンク説明の文字 </a> </TD></TR>

お判りでしょうか！このタグは

<TABLE>

のタグに位置を指定して、簡単に言えば

セルを縦に並べただけなのです。↓簡単に書けば、こんな風です。

<TABLE>

<TR><TD>
<a href="リンクのページのＵＲＬ"> <img src="アイコン画像のＵＲＬ"> </a> リンク説明文
</TD></TR>

<TR><TD>
これの繰り返しです。
</TD></TR>

</TABLE>

下の方に書いてあります、↓これは、テーブルの高さの調整のためつけています。

<TR><TD width="110" height="750" VALIGN="top" bgcolor="pink"><BR> 　　【お知らせ】<BR><BR> ココにTEXTを書きます。<BR> </TR></TD>

各自の「ページ一覧」の長さで調節して下さい。height=""　で調節します。（

ピンク

の一番下のセル）

背景色をページの背景色と同じくしたり、背景画像と同じくしますと、よりいっそう同化しますね。

<TABLE style=" position:absolute;top:280;left:10; font-family:Comic Sans MS;font-size:9;color:black;" width=110 height=1500 bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black>
<TR> <TD width="110" height="29" bgcolor="silver"> <a href="http://plaza.rakuten.co.jp/gtone/002001"> <img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"> </a> 正面玄関
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/003000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>もう一つのプロフ
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/017001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>ＨＰの飾付教室
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/003002"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>おもしろタグ教室
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/004001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プレート教室
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/002000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>写真集
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/006000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>壁紙チェンジャ
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/007000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>リンク集
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/009000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>キリ番
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/00500"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プレート置き場
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/016000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>日記リンク皆様
</TD></TR> <TR><TD width="110" height="29"> </TD></TR>
<TR> <TD width="110" height="29" bgcolor="hotpink"><a href="http://plaza.rakuten.co.jp/gtone/002002"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プチ講座MENU
</TD></TR>
<TR><TD width="110" height="29"> </TD></TR> <TR> <TD width="110" height="29" bgcolor="pink"><a href="http://plaza.rakuten.co.jp/gtone/011000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>カラーコード表
</TD></TR>
<TR> <TD width="110" height="29" bgcolor="pink"><a href="http://plaza.rakuten.co.jp/gtone/011001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>カラーネーム表
</TD></TR>
<TR><TD width="110" height="29"> </TD></TR>
<TR><TD width="110" height="750" VALIGN="top" bgcolor="pink"><BR> 　　【お知らせ】<BR><BR> ココにTEXTを書きます。<BR> </TR></TD>
</TABLE>

正面玄関
もう一つのプロフ
ＨＰの飾付教室
おもしろタグ教室
プレート教室
写真集
壁紙チェンジャ
リンク集
キリ番
プレート置き場
日記リンク皆様

プチ講座MENU

カラーコード表
カラーネーム表

【お知らせ】ココにTEXTを書きます。