【PR】を含みます。

フロントエンド

【JavaScript】期間を指定してバナーの切り替え・表示・非表示を制御する方法

JavaScript 期間を指定してバナーの切り替え・表示・非表示を制御する方法

Webサイトを運営していると、「このバナーは○月○日から△月△日まで表示したい」「キャンペーンが終わったら自動的に非表示にしたい」といった期間限定のバナー表示ニーズがよくありますよね。

しかし、毎回HTMLを書き換えるのは面倒だったり、手動対応をうっかり忘れてしまうことも。

この記事では、JavaScriptを使い、バナーの表示・非表示や切り替えを日時指定で自動制御する方法を、実装サンプル付きで分かりやすく解説します。

複数ページにまたがってバナーを管理したい方や、更新作業を効率化したい方は、ぜひ参考にしてください。

以下の記事でHTML側の日時更新のみで要素の表示切替を行う方法を解説しています。

あわせて読む
JavaScript 指定した日時で要素の表示・非表示を切り替える方法

【JavaScript】指定した日時で要素の表示・非表示を切り替える方法

もくじHTMLファイルの更新のみで要素の表示・非表示を制御実装コード使用方法１．HTMLを設置する２．CSSを設置する３．JavaScriptを設置する動作しないときに確認することdata-show・ ...

JavaScriptファイルの更新のみでバナーの切り替え・表示・非表示を制御

バナーを表示したいページに、HTML、CSS、JavaScriptファイルを設置することで、JavaScriptファイルの更新のみでバナーの表示切替を制御することが可能です。

以下のコードは複数のページに同じバナーを設置し、頻繁にバナーを切り替える必要がある場合に便利です。

実装コード

HTML
Copy
<div class="banner js-banner"></div>
<script src="/script.js"></script>
CSS
Copy
.banner_inner {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.banner_inner:last-child {
  margin-bottom: 0;
}
.banner_inner img {
  display: block;
  max-width: 100%;
  height: auto;
}
JavaScript
Copy
// バナー設定
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  bannerLinkUrl: 'https://webdesign-programming.com/javascript-time-limit-setting/', // バナーのリンク先URL
  appearTime: '2020-01-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
  disappearTime: '2090-12-31T23:59:59', // 表示終了日（タイムスタンプまたは日付文字列）
});
/**
 * バナーを追加する関数
 * @param {Object} params - バナー設定オブジェクト
 */
function addBanner(params) {
  const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  const imageUrl = params.imageUrl; // バナー画像のURL
  // バナー画像URLが指定されていない場合は処理を中止
  if (!imageUrl) return;
  const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  // 日付形式の確認
  const errors = [];
  if (isNaN(appearTime)) {
    errors.push('表示開始日の日付形式が不正です。');
  }
  if (isNaN(disappearTime)) {
    errors.push('表示終了日の日付形式が不正です。');
  }
  if (errors.length) {
    errors.forEach((err, i) => console.error(`${err}`));
    return;
  }
  // 表示条件に合わない場合は処理を中止しバナーを表示しない
  const currentTime = Math.floor(new Date().getTime() / 1000);
  if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
    return;
  }
  // バナー表示処理
  const bannerDiv = document.createElement('div');
  bannerDiv.className = 'banner_inner';
  const img = document.createElement('img');
  img.src = imageUrl;
  img.alt = 'バナー';
  // リンクが設定されている場合はリンクを作成
  const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  if (bannerLinkUrl) {
    const link = document.createElement('a');
    link.href = bannerLinkUrl;
    link.appendChild(img);
    bannerDiv.appendChild(link);
  } else {
    bannerDiv.appendChild(img);
  }
  bannerContainer.appendChild(bannerDiv);
}

使用方法

１．バナーを表示させたいページにHTMLコンテナを設置する

まず、バナーを表示するためのHTMLコンテナを設置します。

以下はその例です。

HTML
Copy
<div class="banner js-banner"></div>
<script src="/script.js"></script>

このjs-bannerクラスが付いたdivが、JavaScriptでバナーを動的に追加するターゲットエリアになります。

divタグ直下でJavaScriptファイルを読み込んでいますが、読み込み場所は適宜変更してください。

js-bannerクラスが付いたdivより前(headタグ内等)でJavaScriptファイルを読み込む場合、別途JavaScriptファイルの調整が必要になります。

２．バナーを表示させたいページにCSSを追加する

次に、バナーのスタイルをCSSで設定します。

実装コードのCSSはバナーを中央に配置し、画像をレスポンシブにする例です。

必要に応じて変更してください。

３．addBanner関数に渡すパラメータの調整

最後に、addBanner関数に渡すパラメータを調整します。

JavaScript
Copy
// バナー設定
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  bannerLinkUrl: 'https://webdesign-programming.com/javascript-time-limit-setting/', // バナーのリンク先URL
  appearTime: '2020-01-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
  disappearTime: '2090-12-31T23:59:59', // 表示終了日（タイムスタンプまたは日付文字列）
});
targetContainer
バナーを表示したい場所のクラス名、ID名、またはタグ名を指定します。
※クラス名等が他の要素と重複しないように設定する必要があります
imageUrl
バナー画像のURLを指定します。
bannerLinkUrl
バナーにリンクを設定したい場合、リンク先のURLを指定します。
指定しない場合は、リンク無しのバナーを表示できます。
appearTime
バナーを表示し始める日時を指定します。
appearTimeを指定しない場合、バナーはすぐに表示されます。
disappearTime
バナーを非表示にする日時を指定します。
disappearTimeを指定しないと、バナーは常に表示され続けます。

動作しないときに確認すること

開始日・終了日で指定する日付文字列について

2024-12-31 23:59:59のような一般的な日付と時刻の表記形式で記述すると、一部ブラウザ（古いバージョンのsafari等）で日付と認識されない場合があります。

日付文字列が原因で動作しない場合、ISO 8601という国際標準の日時表記形式に基づいて記述してみてください。

実装コードでは、ISO 8601という国際標準の日時表記形式に基づいて記述しています（2020-01-01T00:00:00）。

ISO 8601では、日付と時刻の間にTを入れることで、日付と時刻が一緒に書かれているということを示しています。

使用例

期間を指定せずにバナーを常に表示する

appearTimeとdisappearTimeを指定しないことで、バナーを常に表示することができます。

JavaScript
Copy
// バナー設定
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  bannerLinkUrl: 'https://webdesign-programming.com/javascript-time-limit-setting/', // バナーのリンク先URL
});
/**
 * バナーを追加する関数
 * @param {Object} params - バナー設定オブジェクト
 */
function addBanner(params) {
  const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  const imageUrl = params.imageUrl; // バナー画像のURL
  // バナー画像URLが指定されていない場合は処理を中止
  if (!imageUrl) return;
  const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  // 日付形式の確認
  const errors = [];
  if (isNaN(appearTime)) {
    errors.push('表示開始日の日付形式が不正です。');
  }
  if (isNaN(disappearTime)) {
    errors.push('表示終了日の日付形式が不正です。');
  }
  if (errors.length) {
    errors.forEach((err, i) => console.error(`${err}`));
    return;
  }
  // 表示条件に合わない場合は処理を中止しバナーを表示しない
  const currentTime = Math.floor(new Date().getTime() / 1000);
  if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
    return;
  }
  // バナー表示処理
  const bannerDiv = document.createElement('div');
  bannerDiv.className = 'banner_inner';
  const img = document.createElement('img');
  img.src = imageUrl;
  img.alt = 'バナー';
  // リンクが設定されている場合はリンクを作成
  const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  if (bannerLinkUrl) {
    const link = document.createElement('a');
    link.href = bannerLinkUrl;
    link.appendChild(img);
    bannerDiv.appendChild(link);
  } else {
    bannerDiv.appendChild(img);
  }
  bannerContainer.appendChild(bannerDiv);
}

複数のバナーを表示する

JavaScript
Copy
// バナー設定
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
});

addBanner()部分を複数回実行することで、複数のバナーを表示することができます。

JavaScript
Copy
// バナー設定
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
});
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner2.jpg', // バナー画像のURL
});
/**
 * バナーを追加する関数
 * @param {Object} params - バナー設定オブジェクト
 */
function addBanner(params) {
  const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  const imageUrl = params.imageUrl; // バナー画像のURL
  // バナー画像URLが指定されていない場合は処理を中止
  if (!imageUrl) return;
  const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  // 日付形式の確認
  const errors = [];
  if (isNaN(appearTime)) {
    errors.push('表示開始日の日付形式が不正です。');
  }
  if (isNaN(disappearTime)) {
    errors.push('表示終了日の日付形式が不正です。');
  }
  if (errors.length) {
    errors.forEach((err, i) => console.error(`${err}`));
    return;
  }
  // 表示条件に合わない場合は処理を中止しバナーを表示しない
  const currentTime = Math.floor(new Date().getTime() / 1000);
  if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
    return;
  }
  // バナー表示処理
  const bannerDiv = document.createElement('div');
  bannerDiv.className = 'banner_inner';
  const img = document.createElement('img');
  img.src = imageUrl;
  img.alt = 'バナー';
  // リンクが設定されている場合はリンクを作成
  const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  if (bannerLinkUrl) {
    const link = document.createElement('a');
    link.href = bannerLinkUrl;
    link.appendChild(img);
    bannerDiv.appendChild(link);
  } else {
    bannerDiv.appendChild(img);
  }
  bannerContainer.appendChild(bannerDiv);
}

サンプル

期間を指定して複数のバナーの表示切り替えを制御する

以下のコードは、2020-01-01 00:00:00 から 2024-08-31 23:59:59 までは「banner1.jpg」のバナーを表示し、2024-09-01 00:00:00 以降は「banner2.jpg」を表示するように設定しています。

JavaScript
Copy
// バナー設定
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  appearTime: '2020-01-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
  disappearTime: '2024-08-31T23:59:59', // 表示終了日（タイムスタンプまたは日付文字列）
});
addBanner({
  targetContainer: '.js-banner', // バナー表示エリアを取得
  imageUrl: 'https://webdesign-programming.com/img/banner2.jpg', // バナー画像のURL
  appearTime: '2024-09-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
});
/**
 * バナーを追加する関数
 * @param {Object} params - バナー設定オブジェクト
 */
function addBanner(params) {
  const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  const imageUrl = params.imageUrl; // バナー画像のURL
  // バナー画像URLが指定されていない場合は処理を中止
  if (!imageUrl) return;
  const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  // 日付形式の確認
  const errors = [];
  if (isNaN(appearTime)) {
    errors.push('表示開始日の日付形式が不正です。');
  }
  if (isNaN(disappearTime)) {
    errors.push('表示終了日の日付形式が不正です。');
  }
  if (errors.length) {
    errors.forEach((err, i) => console.error(`${err}`));
    return;
  }
  // 表示条件に合わない場合は処理を中止しバナーを表示しない
  const currentTime = Math.floor(new Date().getTime() / 1000);
  if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
    return;
  }
  // バナー表示処理
  const bannerDiv = document.createElement('div');
  bannerDiv.className = 'banner_inner';
  const img = document.createElement('img');
  img.src = imageUrl;
  img.alt = 'バナー';
  // リンクが設定されている場合はリンクを作成
  const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  if (bannerLinkUrl) {
    const link = document.createElement('a');
    link.href = bannerLinkUrl;
    link.appendChild(img);
    bannerDiv.appendChild(link);
  } else {
    bannerDiv.appendChild(img);
  }
  bannerContainer.appendChild(bannerDiv);
}

まとめ

期間指定バナーの制御方法を紹介しました。

この手法を使うことで、HTML・CSS・JavaScriptのシンプルな実装だけで、

  • キャンペーンやお知らせの期間限定表示
  • バナーの内容切り替えや複数バナーの順次表示
  • サイト全体の簡単な一括管理

などが手軽に実現できます。

特に、表示の開始日・終了日をISO 8601形式（例：2024-09-01T00:00:00）で記述することで、ブラウザの違いによる不具合も回避できます。

自動的に非表示になるため、バナーの切り替え忘れなどの防止にも役立ちます。

ぜひ、効率的なバナー運用にご活用ください！

以下の記事でHTML側の日時更新のみで要素の表示切替を行う方法を解説しています。

あわせて読む
JavaScript 指定した日時で要素の表示・非表示を切り替える方法

【JavaScript】指定した日時で要素の表示・非表示を切り替える方法

もくじHTMLファイルの更新のみで要素の表示・非表示を制御実装コード使用方法１．HTMLを設置する２．CSSを設置する３．JavaScriptを設置する動作しないときに確認することdata-show・ ...

-フロントエンド
-