初回アクセス時モーダル表示
（×ボタンで非表示）

初回アクセス時のみモーダルを表示し、
×ボタンで非表示にすると指定した期間中再表示しません（デフォルトでは30日間）

追加可能パーツ 変更可能箇所 同一ページ
に複数設置		 ページ複製・
クリップボード使用可否
  • 画像のみ
    • バナー画像
    • バナー閉じる[✕]画像
  • バナー画像のサイズ
  • バナー閉じる[✕]画像のサイズ
  • hover時の画像透過有無※1
  • SP表示・非表示設定※2

 
JS変更箇所

  •  cookieに保存しておく期間※①
     変数名 : expires
 × ◯
※3
※留意事項

※1：デフォルトではhover時の画像透過は無しにしています。CSSで透過ありに変更できます。
※2：デフォルトでは、画面幅が769px以下（SP）でも表示されます。SPで非表示にしたい場合は、クラス「pcOnly」を付与する必要があります。
※3：一度バナーを閉じた場合、他ページでcookieのJSとバナーを入れていたとしても、【cookieに保存しておく期間】中は非表示のままになります。

【JS】
※①：デフォルトでは30日間が設定されています。変更するにはJS編集が必要です。詳細はこちら▼

デモ

一度閉じる[✕]ボタンを押すと、30日間（デフォルト）再表示されません。
閉じるボタンを押すとcookieが登録されるので、登録されたcookieを削除（下記参照）すれば再度挙動をご確認できます。

※デフォルト設定では、画面幅が769px以下（SP）でも表示されます。

▼削除方法▼

バナーを閉じる
バナー

構造図

デモのパーツの構造を説明しています。

※デモでは分かりやすくセクション内にパーツを入れていますが、
余白等を削除する必要が出てくるため実際はフッター等に入れるのがおすすめです。

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSをカスタムCSSに記述。
  • JavaScriptを使用したいパーツのセクション内の一番下に配置。複数ページ設置する場合は共通フッターに配置。

  • クラス名を見本とあわせる。

  1. モーダル表示用の行（row）を作成し、
    クラス名「js-popup_row popup_row  js-displayNone」の3つを追加。
    ページ下部に設置する。（複数ページに表示する場合は共通フッターに設置）
  2. 上記row内に共通パーツを作成し、①バナー閉じる用[✕]画像と②バナー画像を配置。
  3. ①バナー閉じる用[✕]画像にクラス名「js-popup_close_img popup_close_img」の2つを追加。
    リンク先は設定しません。
  4. ②バナー画像にクラス名「popup_img」を追加。
    リンク先を[任意のURL]に設定。
  5. 画像の幅等は適宜CSSで変更してください。
    ※JSパーツ集では共通パーツ機能で作成しているため、内容によってはCSSの調整（sectionからの紐づけ）が必要です。

  6. SPで非表示にしたい場合、モーダル表示用の行（row）にクラス名「pcOnly」を追加。

  • 新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
    rowは新規で作成した方がCSSの影響を受けないので安心かと思います。

JavaScript設定方法

  1. JS内で【Cookieに保存しておく期間】と検索。
  2. Cookieに保存しておく期間を変更する場合は変数【let expires = 〇〇;】の値を変更してください。
    （例①日数単位）：1日→【let expires = 1;】
    （例②時間単位）：3時間→【let expires = 3 / 24;】
  3. デフォルトでCookieに保存しておく期間は30日間（30）に設定しています。
    無期限にはできないので期間を必ず設定してください。

JS・CSS・編集画面用CSS

  • JS
  • CSS
  • 編集画面用CSS
JSをコピーする

2025-06-30更新（v1.0.0）

<script>
/* -------------------------------------
初回アクセス時モーダル表示（×ボタンで非表示） v1.0.0
------------------------------------- */
document.addEventListener('DOMContentLoaded', function () {

/*------------- 変数定義 【変更可能】 START -------------*/
const expiresDays = 30; /* cookieに保存しておく期間 【 30日間（デフォルトでは日数単位） 】 */
/*------------- 変数定義 【変更可能】 END -------------*/

const cookieKey = "bannerClosed";
const cookieValue = "true";
const html = document.documentElement;
const closeBtn = document.querySelector('.js-popup_close_img');
const banner = document.querySelector('.js-popup_row');

/* Cookieデータ作成 */
const expireDate = new Date();
expireDate.setTime(expireDate.getTime() + expiresDays * 24 * 60 * 60 * 1000);
const cookieString = `${cookieKey}=${cookieValue}; expires=${expireDate.toGMTString()}; path=/`;

function registration() {
console.log("Cookieが登録されました");
if (banner) banner.style.display = 'none';
}

function authenticated() {
console.log("認証できました");
}

function unauthenticated() {
console.log("認証できませんでした");
if (!banner) return;

const isPcOnly = banner.classList.contains('pcOnly');
const isSp = window.matchMedia('(max-width: 769px)').matches;

if (isPcOnly && isSp) {
banner.style.display = 'none';
} else {
banner.classList.remove('js-displayNone');
html.classList.add('js-overflowHidden');
}
}

/* ボタンクリックでバナー閉じる＆cookie登録 */
if (closeBtn) {
closeBtn.addEventListener('click', function (event) {
event.preventDefault();
document.cookie = cookieString;
registration();
html.classList.remove('js-overflowHidden');
});
}

/* cookieチェック */
function checkCookie() {
const cookies = document.cookie.split(';').map(c => c.trim());
const found = cookies.some(c => c.startsWith(`${cookieKey}=${cookieValue}`));
return found;
}

/* 判定処理 */
if (checkCookie()) {
authenticated();
} else {
unauthenticated();
}
});
/* -------------------------------------
初回アクセス時モーダル表示（×ボタンで非表示） END
------------------------------------- */
</script>

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

CSSをコピーする

2023-08-18更新（v1.0.0）

/*----- 初回アクセス時モーダル表示（×ボタンで非表示） START v1.0.0​​​​​-----*/
/* 再読み込み時に一瞬見えてしまう（チラつき）防止用クラス */
.js-displayNone {
display: none !important;
}

.row {
&.popup_row {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
width: 100%;
height: 110vh;
background: rgba(#000,.6);
transform: translate(-50%, -50%);
.col {
width: 100%;
max-width: 500px;
position: relative;
padding: 20px;
.component {
/* CTAでなくても使えるようにネスト飛ばし（必要あれば各自修正してください）*/
// ✕ボタン
&.popup_close_img {
position: absolute;
top: -13px;
right: -13px;
z-index: 2;
img {
cursor: pointer;
max-width: 30px !important;
}
}
// バナー本体
&.popup_img {
a {
&:hover {
opacity: 1;//デフォルトでは透過なし
}
img {
&:hover {
opacity: 1;//二重透過対策
}
}
}
}
}
}
}
}
// モーダルが出ている間はスクロールバー非表示
.js-overflowHidden {
overflow: hidden !important;
}
/*----- 初回アクセス時モーダル表示（×ボタンで非表示） END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

CSSをコピーする

2023-08-18更新（v1.0.0）

/*-- 初回アクセス時モーダル表示（×ボタンで非表示） 編集画面用 START v1.0.0​​​​​--*/
.js-displayNone {
display: block !important;
border: 1px solid #000;
&::before {
content: "JS読み込み後にクラスを外す。ちらつき防止（JSで使用）";
position: absolute;
color: #fff;
background: #000;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
}
.row {
&.popup_row {
display: flex !important;
position: relative;
top: initial;
left: initial;
transform: initial;
width: 100%;
height: initial;
margin-top: 50px;
border: 1px solid red;
&::before {
content: "初回モーダル表示（×ボタンで非表示）Row";
position: absolute;
color: #fff;
background: red;
padding: 5px;
font-size: 16px;
right: 0;
top: -24px;
}
.col {
.component {
&.image {
&.popup_close_img {
position: relative;
top: initial;
right: initial;
z-index: initial;
}
}
}
}
}
}
/*-- 初回アクセス時モーダル表示（×ボタンで非表示） 編集画面用 END --*/
JSパーツ集ロゴ

      JSが必要な実装の注意点スプレッドシート（H列）は読みましたか？

      ※必ず注意点（H列）をご確認の上閲覧ください

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.