シリウスのデフォルトグローバルナビゲーションを表示させないで、
CSS記述で形成する方法のご案内となりますが、今回の解説は
サイトのカスタマイズとしても、さほどの必要はありません..

 

必要なのは今後プルダウンメニューへ移行する際の基本みたいなもので
単にCSSでグローバルナビを形成するというもの.....
実行をお進めるわけではありません...

 

シリウス以外でも使える程度のこととして参照ください

 

 

単なるCSＳ形成グローバルなんぞ興味はない！

 

プルダウンナビが必要とする方は、巻末メニューへ飛んでってください
次、ページからプルダウン解説となります

---

 

 

CSSで形成したグローバルナビゲーション

 

 

 

DEMO作動検証してください

 

• トップページ

 

• カテゴリー1

 

• サイトサイト

 

• リンク集

 

• さぽーと

 

 

 

 

 

 

---

 

形成のため...一つ目

 

デフォルトのグローバルナビは非表示にする..

 

デフォルトのグローバルナビがあると、入れないので消し去るのです...

 

CSSで形成した場合の良い点は、デフォルトはサイト全体で一つの形式ですが
トップ　カテゴリー　エントリーページと異なるメニュー配置ができること..
カテゴリー　エントリーページではコンテンツある誘導ができるという点です

 

メニューの編集からすべてを削除して非表示にします

 

HTMLテンプレート内にナビの追加

 

 

以下のナビ記述をテンプレート内に組み込む
<li><a href="リンク記述">メニュー</a></li>

 

リンク記述　メニューは書き換えてください

 

 

ここから
<ul id="gnavi">
<li><a href="#">トップページ</a></li>
<li><a href="#">カテゴリー1</a></li>
<li><a href="#">サイトサイト</a></li>
<li><a href="#">リンク集</a></li>
<li><a href="#">さぽーと</a></li>
</ul>
ここまで

 

トップ　カテゴリーエントリーHTMLとも同作業です

 

 

<div id="header">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->
ここに追加します
<!-- ★メインコンテンツここから★ -->

 

<div id="contents">
<div id="threebox">
<div id="main">

 

<% freeSpace1 %>

 

上記指定の箇所に置くことでグローバルナビとして表示されます

 

---

 

スタイルシートで動きを指定する追加行

 

どこでもいいんですが、あとあと忘れない印を付けときましょう
/* グローバルメニュー */の近くがいいと思います

 

 

#gnavi {

 

margin:-1px 0;
padding:0;
width:900px;
height:48px;
overflow:hidden;
background:#008181;

 

}
#gnavi li { list-style:none; width:180px; float:left; }

 

#gnavi li a {
display:block;
line-height:48px;
color:#fff;
text-align:center;
font-size: 18px;
color: FFFFFF;

 

}
#gnavi li a:hover { background:#FF0A0A; }

 

 

 

 

カスタマイズ

 

#gnavi {

 

margin:-1px 0;
-1pxでヘッダーとの隙間を詰めました

 

padding:0;
width:900px;
900px; は、サイトの幅に合わせます

 

height:48px;
立幅調整、テキストの上部分

 

overflow:hidden;
background:#008181;
背景のカラー

 

 

}
#gnavi li { list-style:none; width:180px; float:left; }
メニューの幅

 

 

#gnavi li a {
display:block;
line-height:48px;
テキストの下からの縦幅

 

 

color: FFFFFF;
フォントカラー

 

text-align:center;
テキストを中央に位置指定

 

font-size: 18px;
フォントサイズ

 

}
#gnavi li a:hover { background:#FF0A0A; }
ホバー時のカラー

 

 

 

 

縦のサイズ
ここで指定している　height:50px; 縦幅調整、テキストの上部分と
line-height:50px; テキストの下からの縦幅で、シリウスデフォルトナビと
ほぼ同サイズで表示されますが、サイズを縮小する際はどちらも
同サイズにしてください

 

 

---

 

 

参照

 

当サイトでは、記事内にDEMOを置いてますがなので、エントリーページ
このページだけ専用に記事内にナビHTML記載を置いてスタイルの割り込みに
CSS指示を追加し表示させています

 

エントリーページに限り、スタイルシートで全体のスタイルを指定しておいても
#gnavi要素名を書き換え、割り込みに指定を追加すれば別物として
そのスタイルは表示されます

 

エントリーページなら、あちこちのページで色違いもリンク先違いも指定可能

 

 

通常のナビゲーション設営はここまで

 

さらに動きを加えるプルダウンメニューを導入する方は、
こちらからお進みください
CSSプルダウン構造基礎｜HTML要素設定

 

 

 

スポンサーリンク

 

 

 

 

ページトップ
CSSで簡単似グローバルナビを作成する方法
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズＴＯＰ