参考： CSS メニューを作っちゃおう5（横メニュー1）
はじめにメモ帳とかに<ul>と<li>を使いリスト構造でメニューを作成します
<div id="topmenu">
<ul>
<li><a href="リンク先のURL">ホーム</a></li>
<li><a href="リンク先のURL">ペ タ</a></li>
<li><a href="リンク先のURL">メッセージ</a></li>
<li><a href="リンク先のURL">リンク</a></li>
</ul>
</div>
注意！フリースペースに貼り付けるときに改行を削除します
<div id="topmenu"><ul><li><a href="リンク先のURL">ホーム</a></li><li><a href="リンク先のURL">ペ タ</a></li><li><a href="リンク先のURL">メッセージ</a></li><li><a href="リンク先のURL">リンク</a></li></ul></div>
↑このように・・改行をなくしてからフリースペースに貼り付けます
フリースペースに貼り付けるときに改行が残っていると・・・
<div id="topmenu">
<ul>
<li><a title="きやくはちゃんと読んでください" href="リンク先のＵＲＬ">規 約</a></li>
<li><a title="からんでから申請ください" href="リンク先のＵＲＬ">飴 申</a></li>
<li><a title="へんじは遅くなりますm(_ _)m" href="リンク先のＵＲＬ">手 紙</a></li>
<li><a title="グルっぽメンバー募集中です" href="リンク先のＵＲＬ">部 員</a></li>
</ul>
</div>
titleをつけるとマウスがのったときに説明が表示されます
※フリースペースに貼り付ける時に必ず改行はなくしてください
次は説明の都合上・・？次は フリープラグインです
今回は簡単にjqueryを使ってヘッダー下に設置します
※参考を見てＣＳＳでやったほうが表示は速く表示されます
フリープラグインにおまじないが入っているか確認します
新デザインではjqueryが標準で読み込まれていませんので入れないと動作しません
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
または（ ↑↓どちらか1つが入っていれば大丈夫です ）
<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>
上のどちらかが入っているか確認して
なければどちらかをフリープラグインの一番最初にコピペします
入れたあるいは入っているのを確認したら・・フリープラグインに↓コピペ
<script type="text/javascript">
$(function(){
$("#topmenu").insertAfter(".skinHeaderArea2")
});
</script>
ヘッダーの上につけたい場合は・・フリープラグインに・・・
<script type="text/javascript">
$(function(){
$("#topmenu").insertBefore(".skinHeaderArea2")
});
</script>
ヘッダーの上にも下にもつけたい場合は・・・
<div id="topmenu1">
<ul>
<li><a href="リンク先のURL">規約</a></li>
<li><a href="リンク先のURL">申請</a></li>
<li><a href="リンク先のURL">足跡</a></li>
</ul>
</div>
<div id="topmenu2">
<ul>
<li><a href="リンク先のURL">部屋</a></li>
<li><a href="リンク先のURL">案内</a></li>
<li><a href="リンク先のURL">部員</a></li>
</ul>
</div>
id名を変えて上用と下用のメニューをフリースペースに作ります
（改行をなくしてから貼り付けてください）
で・・・ フリープラグインに・・・
<script type="text/javascript">
$(function(){
$("#topmenu1").insertBefore(".skinHeaderArea2")
$("#topmenu2").insertAfter(".skinHeaderArea2")
});
</script>
※この場合はＣＳＳも #topmenu1{ と #topmenu2{ の2種類必要になります
では・・・・ＣＳＳで形体を決めます
↓すきなタイプのＣＳＳを選んでリンク先の記事へ進みます
ヘッダー下に横メニュー（CSS-1）
マウスをのっけてみて↓・・
ヘッダー下に横メニュー（CSS-2）
マウスをのっけてみて↓・・
ヘッダー下に横メニュー（ＣＳＳ-画像）
マウスをのっけてみてください↓・・