カテゴリ:
お次はナビゲーションバーです。


ナビゲーションバーって何?→簡単に言えばリンクを設置してるバーです。

↓こんな感じのバーですね。(PCのみ表示)




ナビゲーションバーで設置するリンクは、基本的に「当サイト(ABOUT)」、「自サイトのRSSフィード」、「自サイトのSNSページ」、「オススメリンク」など、必ず読んでほしいページやオススメしたいサイト等です。

サイドバーのリンク集などで設置しても問題はないのですが、見栄えやスペースなどを考えると、ナビゲーションバーは効率的なのでオススメです。


では、デザイン作成です。


まずはCSS。

CSS

#menu {
width:1349px;
padding:0;
margin:0;
list-style-type: none;
}
#menu li {
width:20%;
float:left;
padding:0;
margin:0;
text-align:center;
}
#menu li a {
width:auto;
color:#fff;
font-size:15px;
font-weight:bold;
padding:10px 0;
text-decoration:none;
display:block;
background: url(画像URL) repeat-x 0 0;
}
#menu li a:hover {
background: url(画像URL) repeat-x 0 0;
color:#00ccff;
}

CSSはこんな感じです。

CSSを少し説明すると、

widthは横幅のサイズ。pxはサイズの数値。

サイズを変更したい時はpxを変更してください。


font-sizeは文字のサイズ。colorは文字の色です。

入れたい色を調べる時は、まとめくすの各種テキスト色で確認できます。まとめくすでお好みの色を確認してコピー。変更したい部分を貼り変えればOKです。(サンプル赤→#ff000d)


background: url(画像URL) repeat-x 0 0;のbackgroundは背景。

repeat-xは、横に繰り返し。xをyに変更すると縦に繰り返しとなります。


画像ではなく、色を入れたい場合は、background: url(画像URL) repeat-x 0 0;を消して、background:#ff000d;に置き換えると変更できます。(こちらは赤色になります)


hoverは、マウスオーバー(矢印が乗っている)時の設定です。

#menu li のwidth:20%;は、リンクを5つ設置する場合、20%。4つの場合は25%と、設置数×〇(%)で100%になるよう変更してください。


今説明した部分を理解していただければ、ある程度自由にナビゲーションバーのデザインを作成出来ると思います。


お次は、HTMLです。

HTML

<ul id="menu">
<li><a href="リンクURL">文字(タイトル)</a></li>
<li><a href="リンクURL">文字(タイトル)</a></li>
</ul>


リンク数を増やしたい場合は、<li><a href="リンクURL">文字(タイトル)</a></li>を追加していただければOKです。

このままだと、同じタブでリンクを開くので、もし別タブで開くよう設定したい場合は、"リンクURL"の後にtarget="_blank"を追加してください。


<li><a href="リンクURL"target="_blank">文字(タイトル)</a></li>


こんな感じですね。

自サイトのリンクは同じタブで開く、他サイトのリンクは、別タブで開くよう設定することをオススメします。


CSS、HTMLの説明は、変更するのに重要な部分+他の設定でもよく変更する部分のみ説明しています。

言語が理解出来ると他の設定の時にも役に立ちますので、これを機に是非覚えてみてください。