準備：
SeeSaaブログの　「マイ・ブログ」タグからサインイン（ログイン）して　→　「デザイン」　→　「スタイルシート」　→　「使用しているテンプレートのタイトル」　でスタイルシートを変更、書き足しができるページを開きます。

1.『自由形式』を追加する

　まず、マイブログから【デザイン】タグ→【コンテンツ】タグからページを開き、ヘッダ（「ブログ名」と「ブログ説明」があるところ）の部分に『自由形式』を追加します。

　追加する方法は「サイドバーの不要なコンテンツを削除する」のページの下のほうで説明しました。

　追加した『自由形式』のリンクをクリックすると自由形式の編集画面が現れます。そこにHTMLソースを書き込むことでヘッダナビを作成します。

　と、いっても、編集画面はとても小さいので、直接書き込むのではなくホームページ作成ソフトで作成して、そのHTMLソースをコピー＆ペーストをして編集画面内に入力します。

　このあと下で紹介するサンプルからあまり加工せずに、ほぼそのままの状態で使用するのならば、メモ帳などのソフトで編集しても問題ありませんが、いろいろと加工しようと思う場合は、ホームページ作成ソフトのプレビューなどの機能で確認しながら作っていった方が良いと思います。

2.ヘッダナビのHTMLソースとスタイルシートを記述する

＜div class="headernavi"＞〜＜/div＞
この範囲にスタイルシートのセレクタ「.headernavi」を適用させる。divは特に意味のないブロックレベル要素です。

ブロックレベル要素の簡単な説明・・・通常、行単位で枠組みされる要素のこと言います。（要素とは、＜＞の中の文字のことを言います。
ブロックレベル要素と対比して説明されることが多いインライン要素は文字単位で枠組みされる要素です。（＜a＞〜＜/a＞や、＜strong＞〜＜/strong＞など）

＜ul＞ ＜li＞〜＜/li＞ ＜li＞〜＜/li＞・・・・＜li＞〜＜/li＞＜/ul＞
＜ul＞〜＜/ul＞の中に複数の＜li＞〜＜/li＞が列挙されています。これはリストを意味する要素です。リストの各項目を＜li＞〜＜/li＞で書き、リストの範囲を＜ul＞〜＜/ul＞で囲みます。

リスト要素は＜ul＞〜＜/ul＞のほかに＜ol＞〜＜/ol＞というのもあります。＜ul＞の方はリストの各項目の前に黒い点などが表示されるのに対して、＜ol＞のほうはリストの各項目の前に1、2、3、といった番号やa、b、cといった順番を表す文字が表示されます。このページの上のほうで＜ol＞〜＜/ol＞を使用したリストあります。

• yahoo!japan
• infoseek
• seesaa

このページの上で表示したサンプルのスタイルシートです。

.headernavi ul{　}と.headernavi li {　}と.headernavi li a{　}と.headernavi li a:hover{　}の4つのセレクタで作成しています

.headernavi ul{　}は、.headernaviの範囲内にある＜ul＞〜＜/ul＞の範囲にスタイルを適用させるという意味です。

.headernavi li{　}は、.headernaviの範囲内にある＜li＞〜＜/li＞の範囲にスタイルを適用させるという意味です。閲覧するブラウザがIEの場合はこのセレクタはなくても問題ないのですが、firefoxだとこのセレクタがないと形が崩れてしまいます。（そのほかのブラウザは確認していません）

.headernavi li a{　}は、.headernaviの範囲内にある＜li＞〜＜/li＞の範囲の、さらに＜a＞〜＜/a＞の範囲にスタイルを適用させるという意味です。

.headernavi li a:hover{　}は、.headernaviの範囲内にある＜li＞〜＜/li＞の範囲の、さらに＜a＞〜＜/a＞の範囲で、オンマウスオーバーの状態の時ににスタイルを適用させるという意味です。


.headernaviという名前は私が適当につけた名前です。「.」(クラスと読む)の後に自分で好きな名前を半角英数字でつけて自由にセレクタを定義することができます。

.headernavi li a:hoverのプロパティが少ない理由
.headernavi li aの内のプロパティ（ { }の中の各項目）が多数あるのに対して、.headernavi li a:hoverはプロパティが2つしかありません。その理由は、.headernavi li aからに変更する箇所のみを指定して、それ以外は.headernavi li aのスタイルのまま変更する必要がないからです。

3.スタイルシートにセレクタを追記する

　このページの上の【準備】のところで書いたように、マイ･ブログからスタイルシートの一覧が表示されているページを開きます。

　その一覧の一番下あたりに新しく作成したスタイルシートのセレクタをコピー＆ペーストで書き加えてください。

　書き加える場所は一番下でなくても構いませんが、初期設定のセレクタと自作のセレクタの場所を分けたほうが整理しやすいと思います。

　セレクタ名は既存のセレクタと同じにならないように注意してください。

　また、マイ・ブログに書き込む前にホームページ作成ソフトなどでスタイルシートの設定がきちんと反映しているかチェックしておいた方がいいと思います。

　スタイルシートを書き込んだら【スタイルシートを変更する】ボタンを押して確定してください。

4.注意：横幅を計算して作成する

　冒頭のサンプルの場合、＜li＞一つあたりの横幅が150pxに設定してあり、さらに枠線が左右1pxずつあるのでひとつのリストの横幅は152pxになり、リストが3つあるので横幅は合計456pxになります。

　記事投稿で利用できる横幅は、このページの場合545pxあります。

　545px-456px＝89px　

　89pxの余裕があるので問題ありませんが、もし、リストが4つになると合計608pxとなり、横幅をオーバーしてしまいます。オーバーしてしまうと下のサンプルのように二列で表示されてしまうので横幅のサイズを計算して一列に収まるように注意してください。

5.左寄せを解除する

float:left;を使用してヘッダナビを作成した場合、左寄せ指定を解除しないと上の文章のように次の項目がヘッダナビの左側に回りこんでしまう可能性があります。

回り込みを避けるためには、次の項目をスタイルシートで回り込み解除する必要があります。