広告をフッターに固定
- 開閉できる広告用のフッターを作りたい。
ココがポイント
結論：
jQueryのメソッドslideDown();、slideUp();、slideToggle();を使用すると上下方向に開閉するアクションを実行できる。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、Webページを作成していると、フッターに固定されたメニューを作りたいと思ったことはございませんか？
今回は、画面スクロールの位置を検出して、フッターメニューの開閉を行う方法と、閲覧者がクリックをしてメニューの開閉を行う方法の2種類をご紹介しようと思います。
どちらの方法も使い勝手はよいので、是非皆様も実装してみてください。
目次
1.「メソッド」とは
メソッドとは、あるオブジェクトに結びつけられた関数のことです。JavaScriptやjQueryにはあらかじめ登録されている関数があります。その中から、目的のアクションをする関数を呼び出すことで、お好みのプログラムを組んでいきます。
2.WordPressでjQueryを使用できるようになるプラグイン
プラグイン「Simple Custom CSS and JS」をインストールすると、WordPressでJavaScriptを追加することができます。また、jQueryを呼び出すコードを記述することで、jQueryの記述も行えるので、大変便利なプラグインになります。インストールされていないかたは是非、この機会にインストールしてみてはいかがでしょうか？
もっと詳しく
3.画面スクロールの位置を検出して、フッターメニューを開閉
See the Pen
footer by 三好雄介 (@yusuke5028198)
on CodePen.
3.1_画面スクロールの位置を検出するJavaScript
$(window).on('scroll', function(){
var doch = $(document).innerHeight();/*ドキュメントの高さ*/
var winh = $(window).innerHeight();/*ウィンドウの高さ*/
var bottom = doch - winh;/*ページ最下部のスクロールトップの高さ*/
if (bottom <= $(window).scrollTop()){
/*一番下までスクロールした時に実行*/
setTimeout(function(){
$("#footerMenuBar-MobileTablet").css('transform','translateY(105%)');
},5000);/*5秒後に実行*/
}else if(100 <= $(window).scrollTop()){
/*ページトップからスクロールしたとき*/
$("#footerMenuBar-MobileTablet").css('transform','translateY(0%)');
}else{
/*その他の時*/
$("#footerMenuBar-MobileTablet").css('transform','translateY(105%)');
}
});
画面スクロールの位置を検出して、それぞれの値でアクションをコントロールしている部分を抜粋しています。
メソッドscrollTop();が、画面トップの位置を検出します。
このscrollTop();と数値を合わせて、if文の条件を指定。好みのスクロール位置でのアクションを設定できるようになります。
メモ
$(window).scroll(function() {
console.log($(window).scrollTop());
});
上記のJavaScriptで、画面スクロール時の画面トップの値をコンソール画面に表示できます。コンソール画面は、Chromeブラウザで「右クリック」「検証」から「Consloe」を表示すると見ることができます。
参考
JavaScriptのそれぞれのコードの意味
1行目：$(window).on('scroll', function(){
ウィンドウがスクロールされたときに、以降のプログラムを実行します。
2～4行目：var doch = $(document).innerHeight(); var winh = $(window).innerHeight(); var bottom = doch - winh;
最後の4行目で、変数bottomに代入された値が、画面最下部でのscrollTop();の値と同じになります。
オブジェクトの高さを取得するメソッドについては、height／innerHeight／outerHeightの3種類があります。用途によって使い分けができます。
5行目：bottom <= $(window).scrollTop()
一番下までスクロールした時を検出する条件になります。「bottom -100 <= $(window).scrollTop()」や「bottom *0.9 <= $(window).scrollTop()」とすることで、最下部までスクロールする1つ手前でもアクションを実行できるようになります。
10行目：100 <= $(window).scrollTop()
ページトップから100px（ピクセル）スクロールした時を検出する条件になります。ここの値はお好みで決めるとよいでしょう。一回のスクロール幅は大体100pxになります。
13行目：else
この部分は、ページトップでのアクションになります。なぜそのようになるのかと言うと、「100pxスクロールしてから」と「ページ最下部」以外の条件となるので、0から100px未満の間という条件が残るからです。
4.閲覧者がクリックをして、メニューの開閉を行う
See the Pen
footer ad fixed by 三好雄介 (@yusuke5028198)
on CodePen.
4.1_ボタンを押してメニューを開閉するJavaScript
/*メニューの開閉*/
$("#footerMenuBar-body .arrow").click(function () {
if ($("#footerMenuBar-MobileTablet .dfad").is(":hidden")) {
$('#footerMenuBar-body .arrow span').css('transform','rotateX(180deg)');
$("#footerMenuBar-MobileTablet .dfad").slideDown("fast");
} else {
$('#footerMenuBar-body .arrow span').css('transform','rotateX(0deg)');
$("#footerMenuBar-MobileTablet .dfad").slideUp();
}
});
class「arrow」のエリアをクリックすると、メソッドslideDown();、slideUp();を実行するというプログラムです。このメソッドでオブジェクトを隠したり表示したりしています。
参考
JavaScriptのそれぞれのコードの意味
2行目：$("#footerMenuBar-body .arrow").click(function () {
セレクタ「#footerMenuBar-body .arrow」（開閉ボタン）をクリックすると、以降のプログラムを実行します。
3行目：if ($("#footerMenuBar-MobileTablet .dfad").is(":hidden"))
セレクタ「#footerMenuBar-MobileTablet .dfad」（メニューのコンテンツ）が隠れているとき、以降のプログラムを実行します。
4・7行目：$('#footerMenuBar-body .arrow span').css('transform','rotateX(180deg)'); .css('transform','rotateX(0deg)');
セレクタ「#footerMenuBar-body .arrow span」を180°回転、0°に戻すを行っています。これは開閉ボタンの文字「^」を回転させている命令になります。
5行目：$("#footerMenuBar-MobileTablet .dfad").slideDown("fast");
「メニューのコンテンツ」が表示されます。
8行目：$("#footerMenuBar-MobileTablet .dfad").slideUp();
「メニューのコンテンツ」を隠します。
4.2_図版とテキストを切り替える
/*imgとtextの切り替え*/
$(window).on('load', function() {
var text = $("#footerMenuBar-MobileTablet .dfad .text");
if(text.text().length <= 2){
/*改行、スペース込みで2文字以下の時*/
text.hide();/*<div class="text">を隠す*/
}else{
text.slideUp(0);
/*5秒ごとに切り替え*/
function runIt() {
$('#footerMenuBar-MobileTablet .dfad p').delay(5000).slideToggle("slow");
text.delay(5000).slideToggle("slow", runIt);
}
runIt();
}
});
フッターメニューに図版とテキストの両方を表示できるようにしています。
参考
JavaScriptのそれぞれのコードの意味
2行目：$(window).on('load', function() {
文書のローディング工程の終了時に、以降が実行されます。
4行目：text.text().length <= 2
この条件で、セレクタ「#footerMenuBar-MobileTablet .dfad .text」（テキスト）の長さが2文字以下のときに、以降が実行されます。改行やスペースもカウントされるため、ここは自身が扱いやすい値に変更するとよいでしょう。この条件をいれることで、テキストがあるときだけ、以降の画像とテキストの自動切り替えが実行されるように調整しています。
6行目：text.hide();
セレクタ「#footerMenuBar-MobileTablet .dfad .text」（テキスト）にテキストが一切ないときに、ボックスを隠す。
10～14行目：function runIt() { $('#footerMenuBar-MobileTablet .dfad p').delay(5000).slideToggle("slow"); text.delay(5000).slideToggle("slow", runIt); } runIt();
この行で、画像とテキストを切り替えてます。delay(5000);メソッドで5秒ごとにslideToggle();を実行。runIt();で繰り返しメソッドを実行しています。
5.広告を簡単に管理できるプラグイン
プラグイン「Ads by datafeedr.com」を使用することで、広告を表示するショートコードを作成でき、ウィジェットに追加することでブログのお好みの場所に広告を配置できます。
もっと詳しく
6.フッターメニューにいれたいコンテンツを移動・複製するJavaScript
prepend();メソッドを使用すると、HTMLが離れて存在してるコンテンツを移動し、目的のタブ内に入れ込むことができます。
また、clone().appendTo();メソッドを使用すると、コンテンツを複製して、目的のタブ内に入れ込むことができます。
この2つのメソッドを使い、目的とする広告やメニューアイコンなどを作成したフッターメニューに入れ込んでみて下さい。
参考
具体的な使用例を使って、説明してある記事です。「4.「AddToAny」のシェアアイコンをウィンドウに格納する」をご覧ください。
まとめ
お疲れ様でした。
今回は、slideUp();、slideDown();、slideToggle();メソッドを使用する方法と、css();メソッドでCSSスタイルを適用して、メニューボックスをtransformプロパティで移動させる方法で、メニューの開閉を実現させてみました。
ご一読いただき、ありがとうございました。
