当サイト例Gナビ組み込み2カラムテンプレートソース..その1

トップぺージソース

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

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

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

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

ていうより、自分でカスタマイズしたTP原本に進めているので、レスポンシブTPに直入れ
してもうまく当てはまらない...でしょうね？

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

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

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

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

一部異なる仕様

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

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

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

2カラムでの進め方

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

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

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

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

用意するもの..

ヘッダー画像について...要確認...2018　0829
ヘッダー画像は、サイト全体設定の指定で読み込ませることができました..

ところが、シリウスの1.5バージョンアップ以降、しばらくは同手段で読み込みできたのですが、
現在は、指定しても画像が表示されなくなりました...
大幅なバージョンアップが、弄り回したＴＰ構造には適合しない...かもしれません..

でも、当サイトはヘッダーが表示されているように見えますね..
これは、ノンスクロール固定した背景画像..

あたしに場合、前々からヘッダーにこの画像入れておいたんですけど、表示されなく
なったので、ヘッダー指定はそのままにして背景画像をセットしただけ...
背景のスクロール固定はしております...

ヘッダーは、背景画像をうまく使う...とご理解願いますね..

で、配布のコード（ＣＳＳ）には記載追加してございます...

障害が見られない場合は、以下過去記事で対応...
パソコン横幅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 %>

event.preventDefault();
window.open(this.href,'_blank');
return false;
});
});
</script>

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

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

<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 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( ,) | 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="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( ,) | oneline | shorten(120,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
</div>
<% /AQNewEntries %>

<% /if %>
</div>

<img src="<% pageDepth %>img/241558.jpg"style="width:305px;" alt="" />
<% freeSpace3 %>

</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(,) | 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ソース

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

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

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

});
});
</script>

</script>

</script>

</head>

<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">

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

<div>ページのテキストリンク</div>
</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 %>

<% 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( ,) | 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 %>

<% /if %>
</div>
<div id="menu">

<% freeSpace3 %>

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

</div>
</div>

<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(,) | 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ソース

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

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

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

});
});
</script>

</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;">

<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">

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

<div>ページのテキストリンク</div>
</div>
</div>
</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 %>

<% 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(,) | 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
トップページ

更新履歴

当サイトDEMOテンプレート詳細　その3まとめ

2018/02/15 20:19:15 | 当サイト例Gナビ組み込み2カラムテンプレートソース..その1

シリウスレスポンシブテンプレートをカスタマイズした当サイト例の仕様を説明しておきますので調整等にお役立てください。上から進めますねGナビ背景カラー一番上は、Gナビゲーションですが、好みで変えるとすれば背景カラーでしょうか？最初にスクロール以...

≫この記事の続きを読む

Gナビ組み込みテンプレートソース　その2（CSS）

2018/02/15 01:03:15 | 当サイト例Gナビ組み込み2カラムテンプレートソース..その1

お知らせheader画像が表示されない...シリウスの2018　7月のバージョンアップ以降のエラー修正済みですが、ご確認ください3カラム特異指定..スタイルシート記述..その2HTMLソースの次は、スタイルシートでの張り替え記述です。以下を...

≫この記事の続きを読む

トップぺージソース

更新履歴

スポンサー広告

ＭＥＮＵ一覧

ＣＳＳ追加カスタマイズ

youtube関連

アドセンス

サポート