カテゴリーの表示を横並びに
表示しているブログを良くみかけます。

HOME | 新着 | 癒し | 事件 | 女優 | ｽﾎﾟｰﾂ

↑こんなの
私のブログでもお試しに設置しようと思い勉強してみましたので、
そのＨＴＭＬの作成カスタマイズ方法を紹介します。

まず最も簡単な方法はtable（テーブル）を用いた横ナビ

HOME | 新着 | 癒し | 事件 | 女優 | ｽﾎﾟｰﾂ

上記のHTMLのソースは次の通りです。
<table border="0" cellspacing="0" cellpadding="3" style="color:#ffffff;" width="50%"> <tr><td bgcolor="#0099ff"><font size="-1"> <a href="http://okamontaa.blog120.fc2.com/"> <font color="#ffffff">HOME</font></a> | <a href="http://okamontaa.blog120.fc2.com/blog-category-7.html"> <font color="#ffffff">新着</font></a> | <a href="http://okamontaa.blog120.fc2.com/blog-category-16.html"> <font color="#ffffff">癒し</font></a> | <a href="http://okamontaa.blog120.fc2.com/blog-category-8.html"> <font color="#ffffff">事件</font></a> | <a href="http://okamontaa.blog120.fc2.com/blog-category-0.html"> <font color="#ffffff">女優</font></a> | <a href="http://okamontaa.blog120.fc2.com/blog-category-9.html"> <font color="#ffffff">ｽﾎﾟｰﾂ</font><br></a> </font></td></tr></table>

◎style="color:#○;"の区切り線を適当な色に変更してください
◎width="○%"のナビの長さを適当な幅に調整してください
◎td bgcolor="#○"のナビの色を適当な色に変更してください
◎font size="○"のリンク先の字を適当な大きさに変更してください

ここまではこちらの記事にある≪テーブルタグ自動作成ページ≫からベースとなるテーブルを作成することも出来ます。

◎<a href="http://○">のリンク先のＵＲＬを変更してください
◎<font color="#○">のリンク先の色を変更してください
◎○</font></a>のリンク先を変更してください

しかしこれは無駄なHTMLの多い正しい方法ではないようです。
次はスタイルシートを利用した横ナビの作成方法を紹介します。
横ナビの作成（中級）

なかなか順位が上がらない・・⇔国内ﾆｭｰｽranking