スタイルシートでサイドナビを作成する

  ここでは、下のサンプルのようなサイドバーのデザインの作成方法を説明します。基本的にはこのサイトのサイドバーと同じデザインです。
サイドナビ―サンプル

以下の順序で説明します。

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

下の画像のようなページが表れます。このページでスタイルシートを変更していきます。
CSSnyuuryoku.gif

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

HTMLソースは「自由形式」に記述する

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

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

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

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

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

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

 冒頭で紹介したサンプルのHTMLソースとスタイルシートは以下のようになっています。
HTMLソース
<div class="miginavi">
<ul>
<li><A href="http://www.yahoo.co.jp/"  >yahoo!japan</A></li>
<li><A href="http://www.infoseek.co.jp/"  >infoseek</A></li>
<li><A href="http://seesaa.jp/"  >seesaa</A></li>
</ul>
</div>
 * タグの<>は本来は半角で書くのですが、記事投稿の際バグってしまうのでここでは便宜的に全角で書いていきます。
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>を使用したリストあります。

スタイルシートを適用していない状態での表示―サンプル
この状態からスタイルシートでサイドナビのボタンのような見栄えになるように加工します。

スタイルシート
.miginavi ul{
margin:0px;
padding:0px;
list-style:none;  ←リストの前のマークの種類(黒丸など):なし
list-style-position:outside;  ←リストの前のマークの位置:外側
}

.miginavi li a{
margin:0px;
display:block;  ←表示形式:ブロックレベル要素として表示する
color:#ffffff;  ←文字色:白
font-size:12px;
background-color:#5768db;
text-align:center;  ←文字の配置(横方向):中央
width:190px;  ←幅:190px
line-height:1.6em;  ←行の高さ:1.6文字分
border-top:1px solid #f5f5f5;  ←枠線上側:1px、実線、ほぼ白
border-bottom:1px solid #000000;  ←枠線下側:1px、実線、黒
border-right:1px solid #000000;  ←枠線右側:1px、実線、黒
text-decoration:none;  ←文字装飾:なし
}

.miginavi li a:hover{
color:#666666;  ←文字色:グレー
background-color:#a6aeec;
}

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

.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.スタイルシートにセレクタを追記する

セレクタを追記する

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

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

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

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

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

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

HTMLソースを『自由形式』に書き込む
HTMLソースは【1.コンテンツの右サイドバーに「自由形式」を追加する】で追加した自由形式の編集画面にコピー&ペーストで書き込んでください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。