スタイルシートでヘッダナビを作成する

  ここでは、下のサンプルのようなヘッダナビのデザインの作成方法を説明します。前頁のサイドナビの作成とあまり違いはありません。HTMLソースは、指定するスタイルシートのクラス名以外はサイドナビと全く同じです。
ヘッダナビ―サンプル



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

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

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

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

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

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

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

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

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

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

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

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

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

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

.headernavi li,{
float:left;  ←配置:左寄せ
}

.headernavi li a{
color:#ffffff;  ←文字色:白
font-size:13px;
font-weight:bold;
background-color:#5768db;
display:block;  ←表示形式:ブロックレベル要素として表示する
text-align:center;  ←文字の配置(横方向):中央
width:150px;  ←<li>一つあたりの幅:150px
line-height:1.8em;  ←行の高さ:1.8文字分
border-top:1px solid #dddddd;  ←枠線上側:1px、実線、白に近い灰色
border-bottom:1px solid #000000;  ←枠線下側:1px、実線、黒
border-right:1px solid #aaaaaa;  ←枠線右側:1px、実線、明るい灰色
border-left:1px solid #dddddd;  ←枠線左側:1px、実線、白に近い灰色
text-decoration:none;  ←文字装飾:なし
float:left;  ←配置:左寄せ
}

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

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

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

セレクタを追記する

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

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

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

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

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

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

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

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

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

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

 545px-456px=89px 

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

ヘッダナビ―サンプル(横幅オーバーした場合)




5.左寄せを解除する

次の文章も左寄せになってしまう。

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

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

HTMLソース
<div class="headernavi">
<ul>
<li><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/"  >yahoo!japan</A></li>
<li><A href="http://www.infoseek.co.jp/" mce_href="http://www.infoseek.co.jp/" >infoseek</A></li>
<li><A href="http://seesaa.jp/" mce_href="http://seesaa.jp/" >seesaa</A></li>
</ul>
</div>

<p class="clear">次の文章も左寄せになってしまう。</p>
スタイルシート(左寄せ解除のみ)
.clear{
clear:both;  ←回り込み解除:両方(左寄せ、右寄せのどちらの設定も解除)
}
クラス名の「clear」は私が適当に作った名前なので自由に設定できます。
×

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