サイドバーを固定して視覚効果を高める...意味合いの記事
シリウスの新テンプレートで、従来からあるサイドバー固定スクリプトを入れ込んでも
うまく作動しない...
固定位置がずれる....上に行き過ぎる..横にはみ出しなどエラー全開模様...で、
何が何やら..
CSS指定という手順で進めても.パソコンの画面サイズ.では正常作動と確認できるものの
125％、もしくは以下にサイズを変更するとずれがみられる..
皆さん100％サイズで閲覧している分けでもありませんね
で、100％サイズで調整しても125％で確認すればずれが生じる....
そんな事情で、サポートに新テンプレートにうまく調整する手立てはないかとご要望が
ございましての記事追加となります...
作動の確認は、当サイトに取り付けておりますのでページスクロールしてください..
メニューが少ないと一番上から固定されますが、多くなるとある程度はスクロールに
応じて流れ...途中から固定開始します...
固定される範囲は、サイドバー巻末のフリースペース4、
もしフリースペースを使用しなければメニューの部分ラストから上...
フリースペースの最終高さ範囲は記事量により調節することができます..が、その起点は
巻末地点から上に向かい...パソコン画面に表示される範囲内とご理解ください..
丁度良い位置で固定されないと思ったらフリースペース内の記事量を増やすか、減らすで
調整...
？
取り付けたけど作動しないという一例...
パソコンで見える位置でいえば、記事の上から下までの長さが、サイドバー以下では
動きません...
あくまで、記事巻末がサイドバー以下にあることが確認条件..
(記事の長さ,,巻末がサイドバー下部より下にあること）
ただし、現行の作動状況はあなたのパソコン環境により確認できない
こともあります..
プレビューで不作動の際は、スクリプト読み込みを許可する..
もしくはアップロード以降のご確認と事前理解...
確認状況
あたし例
ノートパソコン
IE..chrome..Edge..トップ、カテゴリー、エントリーPですべて作動確認.
デカパソコン デスクトップワイド
IE..chrome..Edge..トップ、カテゴリー、エントリーPですべて作動確認.
重要
Googleアドセンスの広告を利用されている場合、固定するサイドバー内配置は規約違反
となり、提携を解除される危険がありますので、絶対サイドバー内の配置はおやめください..
では、導入手順へと進みます...
1..ファイルのダウンロード
以下をダウンロードしてサーバーにアップします
side-fixed.js
2..HTML記載 jqueryのご指摘..重要
トップTP...カテゴリ エントリー HTML..head内に以下を張り付けますが、最上部の
jquery/2.1.1/の数値を2.1.0 2.0.0 とテンプレートごとに変えてください...
すべて同じですとchrome eage ではカテゴリー、エントリーが不作動を確認..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="side-fixed.js"></script>
<script type="text/javascript">
$(window).load(function () {
var mainArea = $("#main");
var sideWrap = $("#sideWrap");
var sideArea = $("#side");
var wd = $(window);
var mainH = mainArea.height();
var sideH = sideWrap.height();
if(sideH < mainH) {
sideWrap.css({"height": mainH,"position": "relative"});
var sideOver = wd.height()-sideArea.height();
var starPoint = sideArea.offset().top + (-sideOver);
var breakPoint = sideArea.offset().top + mainH;
wd.scroll(function() {
if(wd.height() < sideArea.height()){
if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){
sideArea.css({"position": "fixed", "bottom": "20px"});
}else if(wd.scrollTop() + wd.height() >= breakPoint){
sideArea.css({"position": "absolute", "bottom": "0"});
} else {
sideArea.css("position", "static");
}
}else{
var sideBtm = wd.scrollTop() + sideArea.height();
if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){
sideArea.css({"position": "fixed", "top": "20px"});
}else if(sideBtm >= breakPoint){
var fixedSide = mainH - sideH;
sideArea.css({"position": "absolute", "top": fixedSide});
} else {
sideArea.css("position", "static");
}
}
});
}
});
</script>
下方へ移動...divを追加する,,,例はトップHTMLですが、カテゴリー、エントリーも
以下に当てはめて追加する..
追加するコード
<div id="sideWrap">
<div id="side">
</div>
</div>
上コードを以下に書き足し例...原本と見比べて..
記載そのままコピーして張り替え....
<!-- ★メインメニューここから★ -->
<div id="menu">
<div id="sideWrap">
<div id="side">
<% freeSpace3 | tag_replace(h4,div class="title") | tag_insert_inner(div class="title",span) %>
<% pickupEntry %>
<% siteMenu2 | tag_insert_inner(h4,span) %>
<% subMenu | tag_insert_inner(h4,span) %>
<% freeSpace4 | tag_replace(h4,div class="title") | tag_insert_inner(div class="title",span) %>
</div>
</div>
</div>
<!-- ★メインメニューここまで★ -->
HTMLは、これで終わり
3..スタイルシートへ
ユーザー指定スタイル欄へ以下コードを張り付け
.body{text-align:center; margin:0; padding:0;}
#sideWrap{width:260px; float:right;position:relative;border-bottom:2px solid red;}
#side{width:260px; background:#FFF;}
#side p{color:#FFF;font-size:15px; border:1px solid #ccc;}
#footer{background:#FFF;padding:20px 0; height:100px;}
@media(max-width:768px){
#menu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
#rmenu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
#sideWrap{
width: 100%;
}
#side{
width: 100%;
}
}
これで、作動するはず？
以降、作動について気が付くことありましたら追記いたします
