モックン☆彡の部屋

テーブルで整頓６（高）

テーブルで整頓６（高）

ここのページではタグのお手本を紹介しています。

ページの設定で自動改行へチェックが入っていてもいなくても、

タグを改行せずに繋げて下さい。余分な空白が省かれます。

また、ここで紹介するタグはどの部分に書いても適用されますが、

ページの一番最初や最後に書くと編集する時に分かりやすいかもしれませんね。

まずは、自分が何番のどのサイズのメニューを使っているのかを

テーブルで整頓５（高）で確認して下さい。

《お手本１》 ではテキストのみで作成しました。

一部を変えることで簡単に枠に画像を表示したりできます。

基本的には 《お手本１》 と同じなので、変更点を記入して説明します。

《お手本２》 ：変更部分：コメント

１行目：『 font-size:12pt; 』 → 『 font-size:11pt; 』

Homeなどの文字の大きさを変えています
13、18番を使っている方は、『 font-size:12pt; 』 → 『 font-size:10pt; 』として下さい。

３行目：『 cellpadding="1" 』 → 『 cellpadding="3" 』

枠の幅を広げています。数値を大きくすると広がりますが、その分文字の大きさを小さくして下さい。

３行目：『 bgcolor="yellow" 』 → 『 background="画像アドレス" 』

枠に使う画像アドレスを指定します。枠へ画像を使わない場合は、そのままでもかまいません。

５行目：『 background:lightblue; 』 → 『 background:url(画像アドレス); 』

『Home』の背景に使っている画像を指定します。他も同じ要領で変えられます。

６行目：『 color:white; 』 → 『 color:blue; 』

『Home』の文字色を変えています。

※ 各行番号は 《お手本１》 を参考に数えて下さい。

Home
Diary
Profile
Auction
Bbs
Bookmarks
Shopping List

参考画像（直リンク、DL禁止）

枠

ロゴ

提供元：素材王国篆刻素材AOI

※ 素材屋さんの素材を使う場合は、利用規約をしっかりと守って下さい。
ここでは素材の再配布を行ってませんし、利用規約に従って加工しています。

参考に上で使ったタグの例を載せます。
「Home」部分だけ背景をつけたりしていますが、他も同じ要領でできます。
※ 色の薄い分部は 《お手本１》 と同じです。 瓶覗色 は上のコメント該当部分。
※ 『background:url(背景画像アドレス);』と書いてある『 ( 』や『 ) 』は省略しないで下さい。

< TABLE style="font-family:Comic Sans MS; font-size:19px; font-weight:bold;position:absolute;top:-114px;left:-130px;" width="110" height="238" cellpadding="1" cellspacing="3" background="枠の画像アドレス" >
< TR >
< TD width="100%" height="14%" style=" background:url(背景画像アドレス); " >< A href="http://plaza.rakuten.co.jp/motokikun/" style="text-decoration:none;" > Home </ A >
</ TD ></ TR >

< TR >
< TD width="100%" height="14%" style=" background:lightgreen; " >< A href="http://plaza.rakuten.co.jp/ motokikun /diary/" style="text-decoration:none;" > Diary </ A >
</ TD ></ TR >
< TR >
< TD width="100%" height="14%" style=" background:lightblue; " >< A href="http://plaza.rakuten.co.jp/ motokikun /profile/" style="text-decoration:none;" > Profile </ A >
</ TD ></ TR >
< TR >
< TD width="100%" height="14%" style=" background:lightgreen; " >< A href="http://plaza.rakuten.co.jp/ motokikun /shop/" style="color:text-decoration:none;" > Auction </ A >
</ TD ></ TR >
< TR >
< TD width="100%" height="14%" style=" background:lightblue; " >< A href="http://plaza.rakuten.co.jp/ motokikun /bbs/" style="text-decoration:none;" > Bbs </ A >
</ TD ></ TR >
< TR >
< TD width="100%" height="14%" style=" background:lightgreen; " >< A href="http://plaza.rakuten.co.jp/ motokikun /linklist/" style="text-decoration:none;" > Bookmarks </ A >
</ TD ></ TR >
< TR >
< TD width="100%" height="14%" style=" background:lightblue; " >< A href="http://plaza.rakuten.co.jp/ motokikun /recommend/" style="text-decoration:none;" > Shopping List </ A >
</ TD ></ TR >
</ TABLE >

《お手本３》 ：ページ用：コメント

< TABLE style="position:absolute;top:-114px;left:-130px;" width="110" height="238" cellpadding="1" cellspacing="0" bgcolor="blue" >
< TR align="center" >
< TD width="100%" height="14%" >< A href="http://plaza.rakuten.co.jp/ motokikun /" >< IMG src="画像アドレス１" border="0" alt="Home" ></ A >
</ TD ></ TR >
< TR align="center" >
< TD width="100%" height="14%" >< A href="http://plaza.rakuten.co.jp/ motokikun /diary/" >< IMG src="画像アドレス２" border="0" alt="Diary" ></ A >
</ TD ></ TR >
< TR align="center" >
< TD width="100%" height="14%" >< A href="http://plaza.rakuten.co.jp/ motokikun /profile/" >< IMG src="画像アドレス３" border="0" alt="Profile" ></ A >
</ TD ></ TR >
< TR align="center" >
< TD width="100%" height="14%" >< A href="http://plaza.rakuten.co.jp/ motokikun /shop/" >< IMG src="画像アドレス４" border="0" alt="Auction" ></ A >
</ TD ></ TR >
< TR align="center" >
< TD width="100%" height="14%" >< A href="http://plaza.rakuten.co.jp/ motokikun /bbs/" >< IMG src="画像アドレス５" border="0" alt="Bbs" ></ A >
</ TD ></ TR >
< TR align="center" >
< TD width="100%" height="14%" >< A href="http://plaza.rakuten.co.jp/ motokikun /linklist/" >< IMG src="画像アドレス６" border="0" alt="Bookmarks" ></ A >
</ TD ></ TR >
< TR align="center" >
< TD width="100%" height="14%" >< A href="http://plaza.rakuten.co.jp/ motokikun /recommend/" >< IMG src="画像アドレス７" border="0" alt="Shopping List" ></ A >
</ TD ></ TR ></ TABLE >

	108(px)
32(px)

※ 実際にこのタグを使った場合は左上に表示されます。

このメニューの利点は、シンプル版が文字をクリックしないとジャンプできないのに対し、
画像でリンクを張っているので、画像内ならどこをクリックしてもジャンプできる点です。
欠点は２つあって、１つ目は表示されるまでに多少時間がかかること。
２つ目は使っている基本デザインに合わせて画像の大きさを調節することです。
１つ目については、画像が表示される前に元メニュー項目が見えるとみっともないので
土台テーブルに色をつけて隠してあります。（ bgcolor="blue" ）
この色は枠の色となって表示されていますので、お好みの色でどうぞ。
２つ目については、前ページ上部に各ロゴ１つ１つの大きさを横・縦の順で書きました。
これを参考にして作るなり、探すなりして調節して下さい。

『 height="238" 』･･･使っている基本デザインによってサイズを変えます。

1、2、6、7、9、10、12、14、15、16、19～38番 → 『 height="238" 』
3、5、11番 → 『 height="258" 』
4番 → 『 height="266" 』
8、17番 → 『 height="294" 』
13、18番 → 『 height="162" 』

『 bgcolor="blue" 』･･･周りの線の色＆最初に元メニュー項目を隠す色です。
『 motokikun 』･･･自分のアドレスを入れて下さい。
『 alt="Home" 』･･･マウスを画像の上に置いた時にポップアップされる文字です。

お手本では見やすく改行してタグを表示していますが、余分な空白を無くすため、
ページの自動改行設定に関係なく『テーブルタグの注意点』を参考にして
文字を詰めて下さい。

テーブルで整頓５（高）へ

テーブルで整頓７（高）へ

ジャンル別一覧