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

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

　まず、マイブログから【デザイン】タグ→【コンテンツ】タグからページを開き、右サイドバーの部分に『自由形式』を追加します。

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

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

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

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

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

＜div class="miginavi"＞〜＜/div＞
この範囲にスタイルシートのセレクタ「.miginavi」を適用させる。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

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

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

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

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

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


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

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

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

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

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

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

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

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

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