サイトマップ
テンプレート解説 その3
シリウスレスポンシブテンプレートをカスタマイズした当サイト例の仕様を説明しておきますので
調整等にお役立てください。
上から進めますね
Gナビ背景カラー
一番上は、Gナビゲーションですが、好みで変えるとすれば背景カラーでしょうか？
最初にスクロール以前表示されるナビ背景は、半透明に指定しておりますが、単色に切り替える
際は、二つ目出現のGナビカラーコードを参照にして、好みに書き換えてください。
一つ目出現のGナビ
<div class="nav">
<div style="border:solid 1px #000000;background: rgba(0,51,102,0.5);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
<div id="normalnavvvi" class="dropcc">
プルダウンナビ（省略）
</div>
</div>
</div>
二つ目出現のGナビ
<div class="navx">
<div style="border:solid 1px #000000;background: rgba(0,51,102,0.5);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
<div id="normalnavvvi" class="dropcc">
プルダウンナビ（省略）
</div>
</div>
</div>
背景コードは、基本シリウス機能、ユーザー定義ボックスを書き換えたもの...
Gナビ フィントカラー
メニューテキストのフォントカラー指定値は見当たらないでしょう...
フォントサイズ、カラーはスタイルシートナイにある項目
.dropccの中に入っていますので、そちらをご確認ください。
Gナビ再出現指定は？
head内に置く、二つのscript及びスタイルシート内CSSで動きを指示しています。
<head>
一つ目出現のGナビ
<script type="text/javascript">
$(function() {
var nav = $('.nav');
//表示位置
var navTop = nav.offset().top+300;
//ナビゲーションの高さ（シャドウの分だけ足してます）
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まできたら表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
</script>
二つ目出現のGナビ
<script type="text/javascript">
$(function() {
var nav = $('.navx');
//表示位置
var navTop = nav.offset().top+180;
//再出現する際の高さ位置 ）
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まできたら表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
</script>
</head>
一つ目出現のGナビ
.nav {
padding: 0 px;
margin: 0 auto0px;
width: auto;
}
.fixed {
position: relative;
top: -0;
left: 0;
width: 100%;
z-index: 7999;
}
二つ目出現のGナビ
.navx {
padding: 0 px;
margin: 0 auto0px;
position: fixed;
width: auto;
top: 2;
left: 0;
width: 100%;
z-index: 9999;
}
ヘッダーとボディ
ヘッダー画像は、詳細その1に記載するように横サイズ1920pxほどで縦はそのまま
入れ込んでもボディ台紙が上に重なるので隠れてしまうのです。
通常、ヘッダー画像はスクロールで上に隠れるですが、等レイアウトの場合は、固定して
いるのでスクロールに反応しない...
記事台紙（ボディ）以下階層にヘッダー画像を置いているので、その上に多い重なる。
ヘッダー画像は、自動拡張されないので横サイズは1920pxほど...
ただし、スマートフォン画面では縮小しますね
ボディの最上部位置をずらせば、認識できるヘッダー縦サイズを拡張認識できます。
ヘッダーの縦サイズ調整は、以下項目の2番め
padding: 80px;の数値変更で調整できます（当サイトは80）
/*ロゴ*/
*/
#top {
margin: 0 auto;
text-align: left;
width: 1000px;
}
#top #logo, #top h1 {
padding: 80px; 0;
width: 700px;
}
#top #logo a, #top h1 a {
color: #FFf;
text-shadow: 0 0 1px rgba(153,153,153,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;
}
#top #logo a img, #top h1 a img {
vertical-align: middle;
極端なカスタマイズはここまでかな？とは思いますが、気が付いたことありましたら
追記いたします。
当サイトDEMOテンプレート詳細 その3まとめ
当サイト例Gナビ組み込みテンプレートソース（HTML） その1
トップページ
関連ページ
- Gナビ組み込みテンプレートソース その2（CSS）
- 現行当サイトのCSSを記載しております。
