カテゴリーバーを作成する

FC2テンプレート作成編

　カテゴリーの変数とHTMLを利用して、今度はニュースサイトなどのようにカテゴリーを横並びで表示させていきます。
　前回のカテゴリの詳細説明はこちら。
親子カテゴリの仕組みを解読する

　例えば、

カテゴリバー

　こんな感じのナビゲーションのことです。

カテゴリを出力させる変数を組む

　まずは、非常に単純に、親カテゴリのみを使って、普通に横並びさせるHTMLを組んでいきます。

【カテゴリを次々に表示する】

<a href="<%category_link>"><%category_link></a>

　親カテゴリだけであれば、たったのこれだけでズラズラとカテゴリを並べて表示することが出来ます。
　表示されると、以下のようになります。

カテゴリ１カテゴリ２カテゴリ３カテゴリ４カテゴリ５

　これ、くっつき過ぎなので、例えば「<span>タグ」「<table>タグ」などで整形していくと…

spanで整形

　SPANタグの詳細は以下から確認出来ます。
スタイルシートで遊ぶ part.1（<span>タグ編）

【HTML】

<span class="category_word"><a href="<%category_link>"><%category_link></a></span>

【CSS】

.category_word{
padding:2px 20px;
background:#fcc;
border-right:1px solid #000;
}

【表示結果】

カテゴリ１カテゴリ２カテゴリ３カテゴリ４カテゴリ５

　SPANタグは、ブロック要素ではありませんから、そのまま横にするりと並びます。

■見本のタグでは「改行」を入れて見やすくしていますが、実際にHTMLを組むときは、改行を入れないように組んでください。

■SPANタグで「padding」の高さを指定すると、他の要素からはみ出します。

　ただ、「SPANタグ」で組むときは「（padding）で高さを指定すると、他の要素からはみ出す」というCSSの仕様があります。
　そのため、「背景色」を指定して、箱形のリンクを作るのにはあまり向いていません。

■SPAN、DIVで、ブロックっぽいカッコイイリンクが向かないわけ

（Q）外側に来るブロック要素の高さをあらかじめ調節すればいいのでは？
（A）フォントの種類によって、同じフォントサイズを指定していても、高さはそれぞれ違います。また、ブラウザによってもフォントのサイズが変わります。
　同じ理由で、DIVブロックをフロートさせるのも、PC環境により表示が変わる原因になります。

TABLEタグで整形

　これが、「ブロックのカッコイイリンク」を作るのに、一番デザインが崩れない選択肢です。
　テーブルタグの詳細については、以下からご覧頂けます。
テーブルタグを理解してみる

【HTML】

【CSS】

.category_navi table{
border-collapse:collapse;
}
.category_navi td{
padding:2px 20px;
border-right:1px solid #000;
}

【表示結果】

カテゴリ１

カテゴリ２

カテゴリ３

カテゴリ４

カテゴリ５

　リンクホバー時のバックグランドカラーを指定すれば、なんだかカッコイイメニューが出来上がります。
　