TOP

グローバルナビをCSS記述のみで設定する手順

シリウスのデフォルトグローバルナビゲーションを表示させないで、
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プルダウン構造基礎|HTML要素設定

 

 

 

スポンサーリンク

 

 

 

 

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

CSSで簡単にグローバルナビを作成する方法関連解説
CSSプルダウン構造基礎|HTML要素設定
シリウスのMTML内にプルダウン化する要素の基礎コード詳細と構造の理解を説明しますので、導入のカスタマイズをされたい方は、コピペしてお使いください
プルダウンナビゲーションCSS形成|標準タイプ
シリウスのグローバルナビゲーションをCSS記述のみで標準タイプのプルダウンスタイルへ形成する手順のカスタマイズ方法
CSS形成プルダウンナビゲーション各種スタイルの指定
シリウスに導入するCSS形成のプルダウンナビゲーションは、CSS指定で各種の可変が簡単に設定可能です
プルダウンで開いたメニューを拡張するCSS指定
シリウスへ導入したプルダウンメニューをクリックして開いた際、テキストを理解しやすくするためにBOXを拡張するCSS記述の指定カスタマイズです
一つのサイトで複数のグローバルナビスタイルを設定する指定法
シリウスデフォルトでは、統一されたグローバルナビで指定されますが、CSS形成の場合は、好みに合わせ複数のデザイン指定が可能です
シリウスのデフォルトナビスタイルそのままでCSS形成のプルダウン
シリウスのグローバルナビスタイルは、デフォルトそのままで、CSS指定によりプルダウン作動を実施させる構築法のカスタマイズのご案内です
枠線.boxで、見出し.メニューを囲むデザインスタイルの設定
シリウスに外部CSS追加で形成されるナビ見出しや 下りメニューは枠線boxでか組むことができイメージを変えることができます
ナビゲーション左サイドに現れるli 丸ボッチの障害について
シリウスに外部からプルダウンナビゲーションをjquery、またはCSSで導入した際、丸ボッチが現れることがありますが、デザイン的に邪魔なので削除します
CSS形成ナビ スマートフォン閲覧障害対処法
シリウスのHTMl、スタイルシートに組み込み設定したCSS構築のナビは、PCでは視覚上効果的ですがスマートフォンでは視野範囲を狭めてしまうという障害が見られるのです..対処法はこちらで.....