サイトマップ
ナビの位置変更
シリウスのレスポンシブテンプレートでのナビ出現位置が、好まれなお方も
おられるかもしれません
当該解説のプルダウンメニューを取り付けた際、デフォルト位置でも
見た目に違和感はないかとも思われますが、サイト上部に移動することもできます
デフォルト形状ではあまりお勧めするカスタマイズではありませんが、
ヘッダーのワイド化とか、実行した場合必要になる事情に至ることも
あるかもしれませんので
参照として書き留めおきます
まず、然程の面倒はありません
スタイルシートではなくHTML内で記述の位置を置き換えるだけですぐに置き換えが
可能です
<body>下です
デフォルト位置です
<body>
<div id="wrapper">
<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>
<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) | tag_insert(div id="topmenubox") | tag_insert(div id="nav") %>
<div id="headerbox">
<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header.jpg" />
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>
<div id="column2">
<div id="contents">
<div id="layoutbox">
<div id="main">
<!-- ★コンテンツここから★ -->
サイト上部に位置替えする場合の記述
位置替えした記述コードをご確認ください
<body>
<div id="wrapper">
ここに、プルダウンコードが入ります
当サイトで案内するコードではなく、デフォルトナビを表示する場合は
このスペースはなにみいれずともOKです
<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>
<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) | tag_insert(div id="topmenubox") | tag_insert(div id="nav") %>
<div id="headerbox">
<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header.jpg" />
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>
<div id="column2">
<div id="contents">
<div id="layoutbox">
改行は、トップHTMLでのみならトップ頁のみ反映されます
カテゴリー エントリーでも反映させる場合は同作業を追加してください
関連ページ
- HTML、CSSのみでプルダウン形式を組み込む方法
- HTML、CSSのみで作る容易に組み込みできるスタンダートレベルの子メニューがプルダウン形式のスライドメニュー導入方法...
- プルダウンスタイルシート指定記述追加編
- プルダウンHTMLをスタイルシートでCSS指定し作動させる記述の追加です
- スクロールで上に隠れたナビが再度出現するＷスライド表示
- サイトをスクロールで上に移動して隠れたはずのナビが、再度コンテンツエリアに出現するＷスライド表示ヲ指示するＣＳＳ記述
- Gナビ、再出現時、カラー切り替え2重構造指定方法
- シリウスに取り付けた、スクロールで隠れたGナビの再出現で、カラーを衣替え、次いでテキストまでも切り替えてしまう2重構造の設定手順。
- ナビ背景を透明化するカラーコードの書き方
- 今回ご案内しているナビの半透明背景カラーは、その他も選択できますので改行する公式をご覧ください
