どうも。
Vaster2 で導入を断念したカスタマイズネタを1つ。
Vaster2はスマホ表示の時にメニューが折りたたまるレスポンシブメニューとなっています。グローバルメニューとも言うのかな？
このメニューをスクロールに合わせて上部に固定してみようと思ったのですが…。
実際に変更は出来たのですが、どうやらアドセンスの規約に違反しそうなので導入を諦めました。
アドセンス広告が表示されている位置で、上部に固定されたメニューをクリックすると、開いたメニューが広告に重なり、偶発的なクリックを誘導してしまう恐れがあります。
この様な場合は違反と判断されてしまいます。
なので、当機能は導入は諦めましたが、他の事に使えるかも知れないので備忘録としておきます。
<head>内に以下のスクリプトを追加します。
「<!--レスポンシブメニューのためのjavascriptコード-->」を検索してその真下に追加しました。
var nav = $('#PageList1'),
var文にて変数navを宣言して#PageList1を代入します。
offset = nav.offset();
位置情報を取ります。変数offsetにnavの位置を代入。= #PageList1の位置になります。
$(window).scroll(function
ウィンドウがスクロールした時のイベントを指定します。
if($(window).scrollTop() > offset.top)
offset（ = #PageList1の位置）からscrollTop（スクロール量した位置）が大きくなった時に以下の処理をさせます。
nav.addClass('boxfixed');
大きかった場合は変数navにクラスboxfixedを追加します。
クラス名は新たに付けるクラスなので何でも構わないですが、追加されるcssとは同じにしてください。
else {nav.removeClass('boxfixed');
小さい（スクロールされていない）場合は変数navからboxfixedは削除される。
要はスクロールされたら、#PageList1に
クラスboxfixedが付けられ、スクロールされなければクラスboxfixedは付けられません。
.button-toggleを検索。以下の青字の通り変更します。
position: fixed;
メニューの位置を固定しています。
z-index: 999;
数値が多い程全面に表示されます。
一応'999'にしてあります。
margin top：10pxのままだとメニューが固定される時に上部に10px分の隙間ができる事を回避します。
今回の記載した機能を導入·適用した場合、Google AdSense、その他の広告収益サービス等の規約違反となる可能性が大です。
当方はこれら違反に関して発生する損失など、一切責任を負いません。自己責任で導入をお願いします。
詳細は以下の公式を確認してください。
Google AdSenceの配置に関するポリシー
ある程度スクロールした時に表示される「トップに戻る」ボタンがありますが、コレも広告の上に表示されると規約違反になってしまうのですかね？
以上です。
Vaster2 で導入を断念したカスタマイズネタを1つ。
Vaster2はスマホ表示の時にメニューが折りたたまるレスポンシブメニューとなっています。グローバルメニューとも言うのかな？
このメニューをスクロールに合わせて上部に固定してみようと思ったのですが…。
実際に変更は出来たのですが、どうやらアドセンスの規約に違反しそうなので導入を諦めました。
アドセンス広告が表示されている位置で、上部に固定されたメニューをクリックすると、開いたメニューが広告に重なり、偶発的なクリックを誘導してしまう恐れがあります。
この様な場合は違反と判断されてしまいます。
なので、当機能は導入は諦めましたが、他の事に使えるかも知れないので備忘録としておきます。
HTML（SCRIPT）の追加
いつものようにバックアップを取ってから作業をします。<head>内に以下のスクリプトを追加します。
「<!--レスポンシブメニューのためのjavascriptコード-->」を検索してその真下に追加しました。
<!--メニューをtopに固定するコード-->
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
var nav = $('#PageList1'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('boxfixed');
} else {
nav.removeClass('boxfixed');
}
});
});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
var nav = $('#PageList1'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('boxfixed');
} else {
nav.removeClass('boxfixed');
}
});
});
/*]]>*/
</script>
HTML（SCRIPT）を簡単に説明
固定したいメニューはVaster2では「#PageList1」になります。
var nav = $('#PageList1'),
var文にて変数navを宣言して#PageList1を代入します。
offset = nav.offset();
位置情報を取ります。変数offsetにnavの位置を代入。= #PageList1の位置になります。
$(window).scroll(function
ウィンドウがスクロールした時のイベントを指定します。
if($(window).scrollTop() > offset.top)
offset（ = #PageList1の位置）からscrollTop（スクロール量した位置）が大きくなった時に以下の処理をさせます。
nav.addClass('boxfixed');
大きかった場合は変数navにクラスboxfixedを追加します。
クラス名は新たに付けるクラスなので何でも構わないですが、追加されるcssとは同じにしてください。
else {nav.removeClass('boxfixed');
小さい（スクロールされていない）場合は変数navからboxfixedは削除される。
要はスクロールされたら、#PageList1に
クラスboxfixedが付けられ、スクロールされなければクラスboxfixedは付けられません。
cssの追加と変更
cssに追加します。.header-nav aを検索して、その下辺りに追加します。
.boxfixed {
position: fixed;
top: 0;
z-index: 999;
}
position: fixed;
top: 0;
z-index: 999;
}
.button-toggleを検索。以下の青字の通り変更します。
.button-toggle{
display:block !important;
width:90%;
box-sizing:border-box;
color:$(button.color);
padding:8px 10px;
margin:auto; /* change 2017.9.11 margin:10px auto; */
background:$(button.background);
}
}
display:block !important;
width:90%;
box-sizing:border-box;
color:$(button.color);
padding:8px 10px;
margin:auto; /* change 2017.9.11 margin:10px auto; */
background:$(button.background);
}
}
cssの簡単な説明
.boxfixed の追加
スクリプトで付与された.boxfixedを追加します。position: fixed;
メニューの位置を固定しています。
z-index: 999;
数値が多い程全面に表示されます。
一応'999'にしてあります。
.button-toggle の変更
固定されたメニューの上に隙間が出来てしまうので、margin topの値を0または、削除します。（今回は削除してautoのみ）margin top：10pxのままだとメニューが固定される時に上部に10px分の隙間ができる事を回避します。
要注意 広告収益を使用している場合
いい感じに出来たと思ったのですが、適用は見送りました。今回の記載した機能を導入·適用した場合、Google AdSense、その他の広告収益サービス等の規約違反となる可能性が大です。
当方はこれら違反に関して発生する損失など、一切責任を負いません。自己責任で導入をお願いします。
詳細は以下の公式を確認してください。
Google AdSenceの配置に関するポリシー
ある程度スクロールした時に表示される「トップに戻る」ボタンがありますが、コレも広告の上に表示されると規約違反になってしまうのですかね？
以上です。
0 件のコメント:
コメントを投稿