グローバルナビをCSS記述のみで設定する手順
シリウスのデフォルトグローバルナビゲーションを表示させないで、
CSS記述で形成する方法のご案内となりますが、今回の解説は
サイトのカスタマイズとしても、さほどの必要はありません
必要なのは今後プルダウンメニューへ移行する際の基本みたいなもので
単にCSSでグローバルナビを形成するというもの.....
実行をお進めるわけではありません
シリウス以外でも使える程度のこととして参照ください
CSSで形成したグローバルナビゲーション
DEMO作動検証してください
形成のための一つ目
デフォルトのグローバルナビは非表示にする
デフォルトのグローバルナビがあると、入れないので消し去るのです
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で簡単似グローバルナビを作成する方法
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズＴＯＰ
