モックン☆彡の部屋

モックン☆彡の部屋

テーブルで整頓6(高)

テーブルで整頓6(高)


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

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

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


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

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


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

テーブルで整頓5(高) で確認して下さい。


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

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

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


《お手本2》 :変更部分:コメント
1行目:『 font-size:12pt; 』 → 『 font-size:11pt;
Homeなどの文字の大きさを変えています
13、18番を使っている方は、『 font-size:12pt; 』 → 『 font-size:10pt; 』として下さい。
3行目:『 cellpadding="1" 』 → 『 cellpadding="3"
枠の幅を広げています。数値を大きくすると広がりますが、その分文字の大きさを小さくして下さい。
3行目:『 bgcolor="yellow" 』 → 『 background="画像アドレス"
枠に使う画像アドレスを指定します。枠へ画像を使わない場合は、そのままでもかまいません。
5行目:『 background:lightblue; 』 → 『 background:url(画像アドレス);
『Home』の背景に使っている画像を指定します。他も同じ要領で変えられます。
6行目:『 color:white; 』 → 『 color:blue;
『Home』の文字色を変えています。


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

参考画像(直リンク、DL禁止)
ロゴ
※ 素材屋さんの素材を使う場合は、利用規約をしっかりと守って下さい。
ここでは素材の再配布を行ってませんし、利用規約に従って加工しています。
参考に上で使ったタグの例を載せます。
「Home」部分だけ背景をつけたりしていますが、他も同じ要領でできます。
※ 色の薄い分部は 《お手本1》 と同じです。 瓶覗色 は上のコメント該当部分。
※ 『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 >




《お手本3》 :ページ用:コメント
< 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="画像アドレス1" 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="画像アドレス2" 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="画像アドレス3" 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="画像アドレス4" 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="画像アドレス5" 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="画像アドレス6" 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="画像アドレス7" border="0" alt="Shopping List" ></ A >
</ TD ></ TR ></ TABLE >
Home
Diary
Profile
Auction
Bbs
Bookmarks
Shopping List
108(px)
32(px)


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

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" 』・・・マウスを画像の上に置いた時にポップアップされる文字です。

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





テーブルで整頓5(高)へ テーブルで整頓7(高)へ







© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: