メニューの体裁を整える（テーブル使用）

メニューをトップに表示する でメニューをトップに表示したことだけ公開しましたが、あまりにも手抜きなので、少し手順をまとめてみました。

基本的にはメニューを付けるお勧めな方法で紹介している方法でメニューを作ります。ただし、<div>でくくった各メニュー項目を、テーブル内に入れたほうが体裁が整えやすくなります。

<TABLE border="0" class="menu_frame" cellpadding="0" cellspacing="0" width="100%">
<TBODY>
　　<TR>
　　　　<TD valign="top" align="left" width="33%">
　　　　　　<div><A href="URL">ランキングに一票！</A></div>
　　　　　　<div><A href="URL">ブログとは？</A></div>
　　　　</TD>
　　　　<TD valign="top" align="left" width="33%">
　　　　　　・・・・・・メニュー項目１
　　　　　　・・・・・・メニュー項目２
　　　　</TD>
　　　　<TD valign="top" align="left" width="33%">
　　　　　　・・・・・・メニュー項目１
　　　　　　・・・・・・メニュー項目２
　　　　</TD>
　　</TR>
</TBODY>
</TABLE>

こんな感じで。でもこれをすべてテキストエディタで編集するのはかなり大変です。私はホームページビルダーを持っていたので、それで作成したHTMLをフリーエリアに貼り付けています。

<TABLE>タグの説明ですが、
<TABLE border="0" class="menu_frame" cellpadding="0" cellspacing="0" width="100%">
はテーブルそのものの枠線を非表示にし、横幅を目いっぱいに広げる設定です。
この辺りはメニューのデザインによって変更すればいいところですね。

それと、
<TD valign="top" align="left" width="33%">
の部分は、私の場合、メニューを3列に分割して使っているので、その各列の設定です。
各列を全体の33%ずつにしているわけです。valignとalignは上左揃えの設定になっています。
3列作っているので<TD></TD>が3組あるわけです。
ちなみに行を追加するなら<TR></TR>を行数分追加すればいいです。

もちろん、<A href="URL">ランキングに一票！</A>の部分はメニューに表示する項目と、
項目をクリックした時にジャンプするURLの設定ですので、適切に記入してください。
また<A href="URL" target="_brank">とするとジャンプせずに別ウィンドウで記事を開きます。

最後に、メニュー項目のところの<DIV>タグは必ずしも必要ありません。
私はCSS（スタイルシート）を使って、メニューの体裁を整えようとしていますので、
その都合でこれが入っています。
ですからこのブログのメニューをソースからコピーしても、うまく表示されない可能性があります。

本来はテーブルを使ったメニューの作り方ではなくて、ここからさらに体裁を整える方法を説明したかったのですが、これだけでかなりのボリュームになってしまったので、それはまた今度ということで・・・

Comments

お久しぶりです。
以前も教えてもらったminamiです。

かなり以前の記事のようですが、今更質問ですみません。。。
良かったら教えてください。
私もビルダーで編集してやってみたのですが、例えばコメントの欄でも、タイトルの所でも、かなりそのテーブルで作った部分が下の方に来るんです。
（ちょっと分かりづらいですね・・・)
コメントの欄だと、空欄がず〜っとあって、下の方にテーブルを使って作った文章がある。って感じです。
・・・意味伝わりましたか？(^^;)
どうすればこの空欄を無くす事が出来るんでしょうか？

よろしくお願いしますm(_ _)m

Posted by minami at 2005年02月03日 00:29

お久しぶりです。minamiさん。

おっしゃっている意味は分かります。私も良くそうなりましたから。

多分それはHTMLタグの改行が＜br /＞タグに変換されてしまっている為だと思います。投稿画面の設定に「改行を＜br /＞に変換する」と言うオプションがあると思います。それを変換しないにすると解消すると思います。代わりに改行したいところも詰まってしまうかもしれませんが・・・

試してみてください。それでもダメならまたご連絡を＾＾

Posted by hammer at 2005年02月03日 02:02

こんばんわ。
早々のご回答ありがとうございました。
仰るとおり、コメントの欄は、「変換しない」にすると空白は無くなりました(^-^)
ただ・・・
タイトルの所等（ブログの設定という所です）、「変換しない」って言うのが無いときは、やっぱり無理なんでしょうか。。。
（seesaaの場合ですが・・・ブログの説明の所でもテーブルが使えたら良いな〜と思って。。。）

何度も質問しちゃってすみません。
宜しくお願い致します。

Posted by minami at 2005年02月03日 19:16

こんばんわ。minamiさん。
うーん、タイトル欄ですか。そこは確かにダメそうですね。ライブドアならあえてタイトル欄を使わずに、テンプレートを編集してしまったらいいんでしょうけど、SeesaaはHTML編集できませんもんね。

いっそのことタイトル欄はあきらめて自由形式を使ったらどうですか？Seesaaは確かヘッダー部分にも自由形式を置けるので、タイトル欄の代わりに使えると思いますよ。それにSeesaaの自由形式内でテーブルを使ったことありますが、私は余計な空白がでなかったように思います。うるおぼえですが・・・

Posted by hammer at 2005年02月04日 00:49

またまたこんばんわです。

自由形式ですね♪
それ良いかもです(^-^)
試してみます！！
また報告に来ますね。

ありがとうございました。

Posted by minami at 2005年02月04日 01:11

こんにちは。

seesaa、仰るとおりヘッダー部分だったら余白が出ませんでした♪
助かりました。ありがとうございました。

Posted by minami at 2005年02月06日 16:50

コメントお待ちしています。こちらではコメント認証もコメント保留も行っておりません。お気軽にコメントください＾＾