tableを用いずCSS（スタイルシート）でデザインする
横ナビの作成カスタマイズ方法を紹介します。
横ナビの作成（初級）はこちら

スタイルシートでのデザインにすると、
HTMLソースは非常にシンプルになり、
ＳＥＯ対策（検索結果でより多くの人に来てもらえるようにする事）にも良いようです。

まずHTMLのソースは次の通りです。
<div class="navi"><a href="http://okamontaa.blog120.fc2.com/">HOME</a> <a href="http://okamontaa.blog120.fc2.com/blog-category-7.html">新着</a> <a href="http://okamontaa.blog120.fc2.com/blog-category-16.html">癒し</a> <a href="http://okamontaa.blog120.fc2.com/blog-category-8.html">事件</a> <a href="http://okamontaa.blog120.fc2.com/blog-category-0.html">女優</a> <a href="http://okamontaa.blog120.fc2.com/blog-category-9.html">ｽﾎﾟｰﾂ</a> </div>

すごくシンプルになりました。
初級篇同様にリンク先のＵＲＬと名前を変更してください。

次はCSS（スタイルシート）でデザインを決めます。
/*横ナビ*/ div.navi { background-color: #0099ff;　/*ナビ背景*/ padding: 1px;　　　　　　　　　/*ナビ内側余白*/ width:57%;　　　　　　　　　　　/*ナビ幅*/ font-size: 80%;　　　　　　　　/*ナビの字*/ } div.navi a { border-right: 1px #ffffff solid;　/*区分線*/ padding: 0px 4px;　　　　　　/*リンク間余白*/ } /*リンク色*/ div.navi a:link { color:#ffffff; } /*通常*/ div.navi a:active { color:#ffffff; } /*実行中*/ div.navi a:visited { color:#ffffff; } /*訪問済*/ div.navi a:hover { color:#ffffff; } /*マウス*/

初級篇とほぼ同様の横ナビの完成です。

/*○*/は説明文です。それぞれを変更してCSS（スタイルシート）のどこでもいいので追加してください。説明文は意味が解れば消しても大丈夫です。

これを応用することにより無駄なHTMLを入力することなく簡単に早く見栄えの良いブログをつくる事ができそうですね。例えば私は今までレイアウト目的でテーブルを利用していましたが、これもかなり無駄の多い作業だったって事がやっと解ってきました。スタイルシートもっともっと勉強しようと思ってます。

最近newsを更新していないのに⇔国内ﾆｭｰｽranking