TOP

トップぺージソース

当サイトみたいなレイアウト(Gナビ込み)で、作ろうとしても説明が意味不明でわからん?
という、超クレームが多くの読者様3名よりよりいただいて.おります。

 

2018 0504
当解説のHTMLソース記載にミスがあり、トップページだけヘッダー画像が2重に重なると
ご指摘を受け、確認改行致しました...

 

ご迷惑をおかけしましたこと真摯にお詫びいたします...

 

 

ほんと私...解説下手ですね

 

ていうより、自分でカスタマイズしたTP原本に進めているので、デフォルトレスポンシブTP
に当てはまらない...でしょうね?

 

ま、すでにデフォルトなど全然使わず、ほとんどが等レイアウトを基本にして仕様追加している
ため..あたしにいわせりゃ当サイトがデフォルトみたいなもの...
で、デフォルトTPなど...やりようを忘れている..んですね

 

そんなこんなで、説明するのも面倒なので当サイトのレイアウトソースをまとめて張り付けとき
ますのでご自由にお使いください。

 

ただし、今後現状での継続維持とはなりませんと思います.

 

...飽きたり、いいもの見つけるといじりだすもので....
何かしらステップアップした時はそれなりに書き換えときます。
(サイトデザイン向上とかのことで、レベル下げにはなりません...多分)

 


 

一部異なる仕様

 

当サイトのトップPは、3カラムですが、多くはそんなレイアウト必要ないと思われますので
ここでは2カラムです..が、すみません..お断り次いで..確かに2カラムなんですけれど、class指定
するとトップのみ3カラムにもできるCSS内容です..

 

追伸
トップページのみ3カラム仕様を追加してます..
(説明つきで作成中)
こちら当サイトレイアウト3カラムバージョンソース..公開

 

スマートフォン表示のGナビデザインは、白背景となります..

 


 

2カラムでの進め方

 

シリウスのレスポンシブTPで新規サイトを読み込んでください。

 

次にHTML編集を開いてトップPからエントリーPまでソースを上から下まで張り替える。

 

スタイルシートもすべて張り替える...

 

すみません..サイトカラーは黒ですが、他に変更する際は、スタイルシート内でカラー
コードを書き換えしてください。
(シリウスのカラーテンプレートカラーは、すべてスタイルシートで指定しているのですね)
すでにご存じかと思いますが....?
黒以外を求める方は...?スタイルシートの理解を願います。

 


 

用意するもの..

 

パソコン横幅1920pxのヘッダー画像...縦は切り取らなくても自動で隠れまして
上、300pxほどが表示されます。(見た目悪ければその事後調整してください。

 

右上サイドバーに画像置いているのですけれど自分でコード書き換えないと表示されません
不要ならコード削除...

 

Gナビは、手動書き込みですで、デフォルトナビは表示されません
ですので、シリウス機能Gナビは使いませんので記載あればクリアにしといてください。
スマートフォンナビも手動追記ですよ。

 

Gナビの背景は二つともカラーコードで変更可..

 


 

サイトオプション設定

 

サイトオプションは、以下に指定ください。

 


 

Gナビ..シリウスでプレビュー確認した際の理解違い

 

導入完了後、シリウスでプレビューするとレイアウトが確認できますが、パソコン環境により
ブロック制限、もしくはスクリプトの読み込み制限である際は、Gナビが2段表示されます。
HTMLソースでは2段に並べている...スクリプトでずれを生じさせ一つ表示にしているが、
読み込まれないと指示を伝えられないため....

 

アップロード以降でしたら制限は解除され正常スタイルを確認できますが、新規サイトで
進めればアップもできませんね、..
ですので、ブロック制限、スクリプト読み込み制限を許可してご確認ください。

 


 

では、まいりましょう...

 


 

トップぺージのソース

 

<$ AllStrReplace(<h2>(.*?)</h2>,<h2><span>$1</span></h2>) $>
<$ AllStrReplace(<h3>(.*?)</h3>,<h3><span>$1</span></h3>) $>
<$ AllStrReplace(<h4>(.*?)</h4>,<h4><span>$1</span></h4>) $>
<% XMLdeclaration %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<% publishCharset %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><% pageTitle %></title>
<meta name="keywords" content="<% metaKeywords %>" />
<meta name="description" content="<% metaDescription %>" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/config.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />
<link rel="stylesheet" href="<% pageDepth %>css/textstyles.css" type="text/css" />
<% pageStyles %>
<% headTag %>
<% rssFeedLink %>
<% mobileLinkDiscovery %>

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--backtotop-->
<script type="text/javascript">
$(function() {
var topBtn = $('.backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
</script>

 

 

 

<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
<!--popup-->
<script type="text/javascript">
$(function() {
$('a.popup').click(function(event){

 

event.preventDefault();
window.open(this.href,'_blank');
return false;
});
});
</script>
<!--tooltip-->
<script type="text/javascript">
$(function() {
var tooltip = $('<p></p>').appendTo($('body')).css({opacity: 0}).hide();

 

 

 

$('ul#tooltip li').each(function() {
var element = $(this);
var text = element.attr('title');
element.attr('title','');

 

 

 

element.hover(function(e) {
tooltip.stop()
.text(text)
.addClass('arrow_box')
.css({
position : 'absolute',
left : e.pageX - 5,
top : e.pageY + 30
})
.show()
.animate({
opacity: 0.9
}, 1000);
},function() {
tooltip.stop()
.animate({

 

opacity: 0
}, 1000, function(){
tooltip.hide()
});
});

 

 

 

element.mousemove(function(e){
tooltip.css({
position : 'absolute',
left : e.pageX -5,
top : e.pageY + 30
});
});

 

 

 

});
});
</script>

 

 

 

 

 

<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>

 

 

<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>
<body>
<div class="backtotop"><a href="#top">TOP</a></div><!-- ★△ページ戻りボタン△★ -->
<div id="wrapper">

 

<!-- ★△最初表示するナビの背景枠色替えはカラーコード△★ -->
<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">

 

<li><a href="#">ナビタイトル1</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li><!-- ★△複数追加OK△★ -->
</ul>
</li>
<li><a href="#">ナビタイトル2</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル3</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル4</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル5</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>

 

<!-- ★△スクロールで再出現する二つ目のナビ テキスト変えてもOK ここから△★ -->
<div class="navx">
<hr style="border-bottom:solid 2px #9398FF" border="0" />
<div style="border:solid 1px #FF4EBE;background-color:#FF4EBE;;colo; padding:2px; border:1px solid #FF4EBE; border-radius:1px;:0px 1px 0px 0px;">
<div id="normalnavvvi" class="dropcc">

 

<li><a href="#">ナビタイトル1</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル2</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>

 

</ul>
</li>
<li><a href="#">ナビタイトル3</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>

 

</ul>
</li>
<li><a href="#">ナビタイトル4</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>

 

</ul>
</li>
<li><a href="#">ナビタイトル5</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>

 

 

<div id="headerbox">
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>

 

<!-- ★△スマートフォンで表示されるナビ△★ -->
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<!-- ★△いくつでも追加△★ -->
<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>
</div>
</div>
</div>

 

 

<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>

 

<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header.jpg" alt="<% pageTitle %>" />
<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 id="column2">
<div id="contents">
<div id="layoutbox">
<div id="main">
<% pageNavigation %>
<!-- ★コンテンツここから★ -->

 

<% freeSpace1 %>

 

 

<% textTitle1 %>

 

<% textBody1 %>

 

<% textTitle2 %>
<% textBody2 %>
<% textTitle3 %>
<% textBody3 %>
<% textTitle4 %>
<% textBody4 %>
<% textTitle5 %>
<% textBody5 %>
<% textTitle6 %>
<% textBody6 %>
<% textTitle7 %>
<% textBody7 %>
<% textTitle8 %>
<% textBody8 %>
<% textTitle9 %>
<% textBody9 %>
<% textTitle10 %>
<% textBody10 %>
<% freeSpace2 %>
<!-- ★コンテンツここまで★ -->
<% if:siteMode(normal) %>
<!-- ★カテゴリーリストここから★ -->
<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<div class="catbox">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="body">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(200,true) | tag_insert(p) %>
<div class="more"><a href="<% permaLink %>">続きを読む</a><br class="FloatEnd" /></div>
</div>
</div>
<% /AQEntries %>
</div>
<!-- ★カテゴリーリストここまで★ -->
<% else %>
<!-- ★ブログモードここから★ -->
<h3>更新履歴</h3>
<% AQNewEntries %>

 

<div class="blog">
<div class="nmlbox">

 

<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %>
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="body"><% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(120,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
</div>
<% /AQNewEntries %>

 

<!-- ★ブログモードここまで★ -->
<% /if %>
</div>

 

 

 

 

<div id="menu">

 

<!-- ★サイドバー上部の画像...自己入力 不要なら削除★ -->
<img src="<% pageDepth %>img/241558.jpg"style="width:305px;" alt="" />
<% freeSpace3 %>

 

<hr style="border-bottom:solid 1px transparent" border="0" />
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% siteNewEntry | tag_replace(h4,div class="title") | tag_insert_inner(div class="title",span) %>
<% freeSpace4 %>

 

 

</div>

 

<% freeSpace6 %>
<br class="clear" />
</div>

 

</div>
</div>

 

 

<div id="footer"><!-- ★フッター内..自分で書き換えてください ★-->
<div style="background-color:#000000;color:#FFFFFF;font-size:14px;padding:10px;">
<div class="layout_tate1" style="width:45.875%;padding:5px;"><!-- ★レイアウト枠使用しています★-->
<!-- ★▽左列ここから▽★ -->
     <img src="<% pageDepth %>img/241558.jpg" style="width:100px;" alt="" /><br />
<br />
<br />
<br />
     サイト運営 トップページだけですが、カテゴリー エントリー追加可能...........................................<br />

 

<br />

 

 

<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_tate2" style="width:45.875%;padding:5px;">
<!-- ★▽右列ここから▽★ -->
<br />
お仕事 いろいろ...<br />
フッター縦ワイド拡張DEMO,,カテゴリーで反応確認<br />

 

 

<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />

 

</div>

 

<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(<!-- ★comment★ -->,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
</div>
</div>
</body>
</html>

 


 

カテゴリーHTMLソース

 

 

<$ AllStrReplace(<h2>(.*?)</h2>,<h2><span>$1</span></h2>) $>
<$ AllStrReplace(<h3>(.*?)</h3>,<h3><span>$1</span></h3>) $>
<$ AllStrReplace(<h4>(.*?)</h4>,<h4><span>$1</span></h4>) $>
<% XMLdeclaration %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<% publishCharset %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><% pageTitle %></title>
<meta name="keywords" content="<% metaKeywords %>" />
<meta name="description" content="<% metaDescription %>" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/config.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />
<link rel="stylesheet" href="<% pageDepth %>css/textstyles.css" type="text/css" />
<% pageStyles %>
<% headTag %>
<% rssFeedLink %>
<% mobileLinkDiscovery %>

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--backtotop-->
<script type="text/javascript">
$(function() {
var topBtn = $('.backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
</script>

 

 

 

<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
<!--popup-->
<script type="text/javascript">
$(function() {
$('a.popup').click(function(event){

 

event.preventDefault();
window.open(this.href,'_blank');
return false;
});
});
</script>
<!--tooltip-->
<script type="text/javascript">
$(function() {
var tooltip = $('<p></p>').appendTo($('body')).css({opacity: 0}).hide();

 

 

 

$('ul#tooltip li').each(function() {
var element = $(this);
var text = element.attr('title');
element.attr('title','');

 

 

 

element.hover(function(e) {
tooltip.stop()
.text(text)
.addClass('arrow_box')
.css({
position : 'absolute',
left : e.pageX - 5,
top : e.pageY + 30
})
.show()
.animate({
opacity: 0.9
}, 1000);
},function() {
tooltip.stop()
.animate({

 

opacity: 0
}, 1000, function(){
tooltip.hide()
});
});

 

 

 

element.mousemove(function(e){
tooltip.css({
position : 'absolute',
left : e.pageX -5,
top : e.pageY + 30
});
});

 

 

 

});
});
</script>

 

 

 

 

 

<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>

 

 

<script type="text/javascript">
$(function() {
var nav = $('.navx');
//表示位置
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>

 

 

</head>

 

<body>
<div class="backtotop"><a href="#top">TOP</a></div>
<div id="wrapper">
<div class="nav">
<div style="border:solid 1px #000000;background: rgba(0, 0, 0, 0.4);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">

 

 

<div id="normalnavvvi" class="dropcc">

 

<li><a href="#">ナビタイトル1</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li><!-- ★△複数追加OK△★ -->
</ul>
</li>
<li><a href="#">ナビタイトル2</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル3</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル4</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル5</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>

 

 

<div class="navx">
<hr style="border-bottom:solid 2px #9398FF" border="0" />
<div style="border:solid 1px #FF4EBE;background-color:#FF4EBE;;colo; padding:2px; border:1px solid #FF4EBE; border-radius:1px;:0px 1px 0px 0px;">
<div id="normalnavvvi" class="dropcc">

 

<li><a href="#">ナビタイトル1</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li><!-- ★△複数追加OK△★ -->
</ul>
</li>
<li><a href="#">ナビタイトル2</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル3</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル4</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル5</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>

 

 

<div id="headerbox">
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>

 

<!-- ★△スマートフォンで表示されるナビ△★ -->
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>
</div>
</div>
</div>

 

 

<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>

 

<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 id="column2">
<div id="contents">
<div id="layoutbox">
<div id="main">
<% pageNavigation %>
<!-- ★コンテンツここから★ -->
<% freeSpace1 %>
<% textTitle1 %>

 

<% textBody1 %>
<% textTitle2 %>
<% textBody2 %>
<% textTitle3 %>
<% textBody3 %>
<% textTitle4 %>
<% textBody4 %>
<% textTitle5 %>
<% textBody5 %>
<% textTitle6 %>
<% textBody6 %>
<% textTitle7 %>
<% textBody7 %>
<% textTitle8 %>
<% textBody8 %>
<% textTitle9 %>
<% textBody9 %>
<% textTitle10 %>
<% textBody10 %>
<% freeSpace2 %>
<!-- ★コンテンツここまで★ -->
<% if:siteMode(normal) %>
<!-- ★カテゴリーリストここから★ -->
<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<div class="catbox">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="body">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(200,true) | tag_insert(p) %>
<div class="more"><a href="<% permaLink %>">続きを読む</a><br class="FloatEnd" /></div>
</div>
</div>
<% /AQEntries %>
</div>
<!-- ★カテゴリーリストここまで★ -->
<% else %>
<!-- ★ブログモードここから★ -->
<h3>更新履歴</h3>
<% AQNewEntries %>

 

<div class="blog">
<div class="nmlbox">

 

<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %>
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="body"><% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(120,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
</div>
<% /AQNewEntries %>

 

<!-- ★ブログモードここまで★ -->
<% /if %>
</div>
<div id="menu">

 

 

 

<% freeSpace3 %>

 

<hr style="border-bottom:solid 1px transparent" border="0" />
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% siteNewEntry | tag_replace(h4,div class="title") | tag_insert_inner(div class="title",span) %>
<% freeSpace4 %>

 

 

 

</div>
<br class="clear" />
</div>

 

</div>
</div>

 

 

<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(<!-- ★comment★ -->,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
</div>
</div>

 

</body>
</html>

 


 

エントリーHTMLソース

 

<$ AllStrReplace(<h2>(.*?)</h2>,<h2><span>$1</span></h2>) $>
<$ AllStrReplace(<h3>(.*?)</h3>,<h3><span>$1</span></h3>) $>
<$ AllStrReplace(<h4>(.*?)</h4>,<h4><span>$1</span></h4>) $>
<% XMLdeclaration %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<% publishCharset %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><% pageTitle %></title>
<meta name="keywords" content="<% metaKeywords %>" />
<meta name="description" content="<% metaDescription %>" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/config.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />
<link rel="stylesheet" href="<% pageDepth %>css/textstyles.css" type="text/css" />
<% pageStyles %>
<% headTag %>
<% rssFeedLink %>
<% mobileLinkDiscovery %>

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--backtotop-->
<script type="text/javascript">
$(function() {
var topBtn = $('.backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
</script>

 

 

 

<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
<!--popup-->
<script type="text/javascript">
$(function() {
$('a.popup').click(function(event){

 

event.preventDefault();
window.open(this.href,'_blank');
return false;
});
});
</script>
<!--tooltip-->
<script type="text/javascript">
$(function() {
var tooltip = $('<p></p>').appendTo($('body')).css({opacity: 0}).hide();

 

 

 

$('ul#tooltip li').each(function() {
var element = $(this);
var text = element.attr('title');
element.attr('title','');

 

 

 

element.hover(function(e) {
tooltip.stop()
.text(text)
.addClass('arrow_box')
.css({
position : 'absolute',
left : e.pageX - 5,
top : e.pageY + 30
})
.show()
.animate({
opacity: 0.9
}, 1000);
},function() {
tooltip.stop()
.animate({

 

opacity: 0
}, 1000, function(){
tooltip.hide()
});
});

 

 

 

element.mousemove(function(e){
tooltip.css({
position : 'absolute',
left : e.pageX -5,
top : e.pageY + 30
});
});

 

 

 

});
});
</script>

 

 

 

 

<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>

 

 

<script type="text/javascript">
$(function() {
var nav = $('.navx');
//表示位置
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>

 

</head>
<body>
<div class="backtotop"><a href="#top">TOP</a></div>
<div id="wrapper">
<div class="nav">
<div style="border:solid 1px #000000;background: rgba(0, 0, 0, 0.4);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">

 

<div id="normalnavvvi" class="dropcc">

 

<li><a href="#">ナビタイトル1</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li><!-- ★△複数追加OK△★ -->
</ul>
</li>
<li><a href="#">ナビタイトル2</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル3</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル4</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル5</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>

 

 

<div class="navx">
<hr style="border-bottom:solid 2px #9398FF" border="0" />
<div style="border:solid 1px #FF4EBE;background-color:#FF4EBE;;colo; padding:2px; border:1px solid #FF4EBE; border-radius:1px;:0px 1px 0px 0px;">
<div id="normalnavvvi" class="dropcc">

 

<li><a href="#">ナビタイトル1</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li><!-- ★△複数追加OK△★ -->
</ul>
</li>
<li><a href="#">ナビタイトル2</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル3</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル4</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
<li><a href="#">ナビタイトル5</a>
<ul>
<li>プルダウンメニュー...リンク入れてね</li>
<li>プルダウンメニュー...リンク入れてね</li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>

 

 

<div id="headerbox">
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>

 

<!-- ★△スマートフォンで表示されるナビ△★ -->
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>

 

<div>ページのテキストリンク</div>
</div>
</div>
</div>

 

 

<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>

 

<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">
<% pageNavigation %>
<!-- ★コンテンツここから★ -->
<% freeSpace1 %>
<% textTitle1 %>

 

<% textBody1 %>
<% textTitle2 %>
<% textBody2 %>
<% textTitle3 %>
<% textBody3 %>
<% textTitle4 %>
<% textBody4 %>
<% textTitle5 %>
<% textBody5 %>
<% textTitle6 %>
<% textBody6 %>
<% textTitle7 %>
<% textBody7 %>
<% textTitle8 %>
<% textBody8 %>
<% textTitle9 %>
<% textBody9 %>
<% textTitle10 %>
<% textBody10 %>
<% freeSpace2 %>
<!-- ★コンテンツここまで★ -->
<% entryList_n | tag_replace(h3,h4) %>
</div>
<div id="menu">

 

 

 

<% freeSpace3 %>
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% siteNewEntry | tag_replace(h4,div class="title") | tag_insert_inner(div class="title",span) %>
<% freeSpace4 %>

 

</div>
<br class="clear" />
</div>

 

</div>
</div>
<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(<!-- ★comment★ -->,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
</div>
</div>
</body>
</html>

 

ここまで...
スタイルシートCSS記載は次へお進みください..
Gナビ組み込みテンプレートソース その2(CSS)

 

 

当サイト例Gナビ組み込みテンプレートソース(HTML) その1
トップページ

更新履歴

2018/02/15 20:19:15 | 当サイト例Gナビ組み込み2カラムテンプレートソース..その1
シリウスレスポンシブテンプレートをカスタマイズした当サイト例の仕様を説明しておきますので調整等にお役立てください。上から進めますねGナビ背景カラー一番上は、Gナビゲーションですが、好みで変えるとすれば背景カラーでしょうか?最初にスクロール以...
2018/02/15 01:03:15 | 当サイト例Gナビ組み込み2カラムテンプレートソース..その1
HTMLソースの次は、スタイルシートでの張り替え記述です。以下を丸ごと張り替えれば完了します。通常のCSS比べると2倍以上のコードがてんこ盛りになってますけど、追加記載もあり、事情は、わずかのclass指定をするとトップページのみ3カラムに...