バナー（3秒後に表示）
3秒後に右下にバナーを表示
※SP表示あり（デフォルト）
【オプション設定】
①一定期間バナーの再表示禁止 ②フッター直前にバナーの追従を停止
※各オプションはデフォルト非設定
| 追加可能 パーツ |
変更可能 | 同一ページに 複数設置 |
ページ複製・ |
|---|---|---|---|
|
× |
|
× |
◯ |
| ※留意事項 | |||
|---|---|---|---|
|
※1※3：バナー画像はそれぞれご用意お願いします。 ※一定期間バナーの再表示禁止をONにしてる場合、閉じる[×]ボタンクリック後、設定時間内（30分指定）では再度アクセスしても表示されません。
【JS】 ※①：使用する場合は「cookieAction」の変数を「true」に変更します。 |
デモ
デモではオプション（一定期間バナーの再表示禁止・フッター直前に停止）を設定しています。
- 3000ms後（3秒後）バナー表示
- 画面幅が769px以下（SP）でも表示されます。
- オプション：一定期間バナーの再表示禁止
[×]ボタンでバナー非表示→1分間表示されません。1分後から表示されます。（デフォルトは30分）
-
オプション：フッター直前に停止
構造図
デモのパーツの構造を説明しています。
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSをカスタムCSSに記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- バナー画像を格納する行（row）にクラス名「js-banner_row banner_row」の2つを追加。
- バナーのメイン画像にクラス名「banner_img」を追加。
- バナーを閉じる[×]ボタンの画像にクラス名「js-banner_close_img banner_close_img」を追加。
注意点
・オプション：フッターの直前で停止を使用する場合、フッターの種類は２種類まで対応可能です。フッターの種類が３つ以上がる場合は、ユニークでJSの変更が必要になります。必ず事前にご相談ください。
・オプションはデフォルトで非設定です。
・オプション：一定期間バナーの再表示禁止は複数バナーに対して一律で設定されます。バナーごとに表示期間の個別設定はできません。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2024-07-17更新（v1.0.0）
<script>
'use strict';
/* ---------------------------
バナー（3秒後に表示）v1.0.0
--------------------------- */
/*------------- 変数定義 【変更可能】 START -------------*/
/* バナー表示されるまでの時間 [ms] デフォルトで3秒（3 * 1000） */
const waitTime = 3 * 1000;
const cookieAction = false; /* 一定時間バナー非表示（ON:true） */
const hideDuration = 30 * 60 * 1000; /* バナー非表示期間（30分） */
const bannerSelector = '.js-banner_row'; /* バナーのRowクラス */
const footerAction = false; /* フッターの手前でバナーを停止（ON：true） */
const footerSelectors = ['.ft_custom01', '.ft_hoge']; /* フッタークラス */
/*------------- 変数定義 【変更可能】 END -------------*/
/* ---------------------------
一定期間バナーの再表示を禁止
--------------------------- */
/* クッキー設定関数 */
function setCookie(name, value, minutes) {
const date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
/* クッキー取得関数 */
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
/* ---------------------------
3秒後にバナーを表示
--------------------------- */
const ferretModule = (() => {
return {
wait: ms => new Promise(resolve => setTimeout(resolve, ms))
};
})();
(async () => {
await ferretModule.wait(waitTime);
bannerModule.bannerDisplay();
})();
/* ---------------------------
同一セッションでバナーを非表示
--------------------------- */
const bannerModule = (() => {
const bannerRow = document.querySelector(bannerSelector);
bannerRow.style.display = 'none';
const bannerCloseButton = document.querySelector('.js-banner_close_img img');
bannerCloseButton.addEventListener('click', e => {
e.preventDefault();
bannerModule.bannerClose();
});
return {
bannerDisplay: () => {
if (cookieAction) {
const lastClosedTime = getCookie('bannerLastClosedTime');
const currentTime = new Date().getTime();
if (lastClosedTime && (currentTime - lastClosedTime) < hideDuration) return;
}
bannerRow.style.display = 'block';
if (footerAction) controlBannerNearFooter();
},
bannerClose: () => {
bannerRow.style.display = 'none';
if (cookieAction) {
setCookie('bannerLastClosedTime', new Date().getTime(), hideDuration / (60 * 1000));
}
}
};
})();
/* ---------------------------
フッター上でバナーを停止
--------------------------- */
const controlBannerNearFooter = () => {
const footers = footerSelectors.map(selector => document.querySelector(selector)).filter(Boolean);
const banner = document.querySelector(bannerSelector);
if (!footers.length || !banner) return;
const initialBottom = parseInt(window.getComputedStyle(banner).bottom, 10);
const checkBannerPosition = () => {
if (window.getComputedStyle(banner).display === 'none') return;
const windowHeight = window.innerHeight;
const scrollY = window.scrollY || window.pageYOffset;
let newBottom = initialBottom;
footers.forEach(footer => {
const footerRect = footer.getBoundingClientRect();
if (scrollY + windowHeight - initialBottom > footerRect.top + scrollY) {
newBottom = windowHeight - footerRect.top + 10;
}
});
banner.style.bottom = `${newBottom}px`;
};
window.addEventListener('scroll', checkBannerPosition);
window.addEventListener('resize', checkBannerPosition);
checkBannerPosition();
const observer = new MutationObserver(checkBannerPosition);
observer.observe(banner, { attributes: true, attributeFilter: ['style', 'class'] });
};
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-07-18更新（v1.0.0）
/*----- バナー（3秒後に表示） START v1.0.0-----*/
//セクション・共通フッター共に使用できるよう、rowから紐づけ
.row {
&.banner_row {
max-width: 330px;
position: fixed;
right: 20px;
bottom: 80px;
z-index: 2;
.col {
position: relative;
padding: 0;
.component {
&.image {
margin: 0;
&.banner_close_img {
width: auto;
position: absolute;
top: -35px;
right: 0;
img {
cursor: pointer;
max-width: 30px !important;
}
}
&.banner_img {
a {
img {
&:hover {
opacity: 1;
}
}
}
}
}
}
}
}
}
/*----- バナー（3秒後に表示） END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-07-18更新（v1.0.0）
/*----- バナー（3秒後に表示） 編集画面用 START v1.0.0-----*/
&.banner_row {
position: relative;
z-index: initial;
bottom: initial;
right: initial;
max-width: initial;
.col {
.component {
&.image {
&.banner_close_img {
width: 100%;
position: relative;
top: initial;
right: initial;
img {
cursor: initial;
max-width: initial !important;
}
}
}
}
}
}
/*----- バナー（3秒後に表示） 編集画面用 END -----*/
© Basic Inc. All Rights Reserved.