目次
ウェブサイトにおいて、固定バナーはユーザーに重要な情報やプロモーションを効果的に伝えるための有力なツールです。
しかし、バナーが常に表示されているとユーザーの視覚を邪魔する場合もあります。そこで、jQueryとクッキーを活用して、ユーザーの操作に応じてバナーの表示・非表示を制御する方法を紹介します。本記事では、具体的な実装手順とコード例を通じて、固定バナーの制御方法を詳しく解説します。
必要なライブラリの導入
固定バナーの制御には、jQueryとjQuery Cookieプラグインが必要です。以下のスクリプトタグをHTMLの<head>セクションまたは<body>の終了タグ直前に追加します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>注意点:
- jQuery自体が既に読み込まれていることを確認してください。
- プラグインのバージョンは最新の安定版を使用することを推奨します。
固定バナーの基本構造
固定バナーは通常、画面の特定の位置に固定されて表示される要素です。ユーザーがページをスクロールしてもバナーは常に同じ位置に表示されます。以下は、固定バナーの基本的なHTML構造です。
HTML
<ul class="ft-fixedBnr formReset">
<li>
<button type="button"></button>
<a href="">
<img src="https://placehold.jp/e2e2e2/2c2c2c/150x150.png?text=バナー1" alt="バナー1" width="100" height="100" class="imgauto">
</a>
</li>
<li>
<button type="button"></button>
<a href="">
<img src="https://placehold.jp/e2e2e2/2c2c2c/150x150.png?text=バナー2" alt="バナー2" width="100" height="100" class="imgauto">
</a>
</li>
</ul>CSS
.ft-fixedBnr {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
display: grid;
gap: 10px;
}
.ft-fixedBnr li {
display: none;
width: 150px;
position: relative;
}
.ft-fixedBnr li button {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
z-index: 1;
}
.ft-fixedBnr li button::before{
content: "";
display: inline-block;
--MASK: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjkuNiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDkuMDMgQnVpbGQgNTQ5ODYpICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLjg6zjgqTjg6Tjg7xfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMCAzMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojODk2QjU4O30KPC9zdHlsZT4KPGcgaWQ9IuOCsOODq+ODvOODl180MzQ5MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgzOS42ODkgNzE1LjIzOCkgcm90YXRlKC00NSkiPgoJCgkJPHJlY3QgeD0iMTA5MS45OTEiIHk9IjE1MC4xMjQiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDIuNTM1MTU5ZS0wNiAtMi41MzUxNTllLTA2IC0xIDIxOTguOTgxIDYwMC4yNDUxKSIgY2xhc3M9InN0MCIgd2lkdGg9IjE0Ljk5OSIgaGVpZ2h0PSIzMDAiLz4KCQoJCTxyZWN0IHg9Ijk0OS40NzYiIHk9IjI5Mi42MiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMi41MzUxNTllLTA2IC0yLjUzNTE1OWUtMDYgLTEgMjE5OC45NTE5IDYwMC4yMzY2KSIgY2xhc3M9InN0MCIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxNC45OTkiLz4KPC9nPgo8L3N2Zz4K) no-repeat center center / 100%;
mask: var(--MASK);
-webkit-mask: var(--MASK);
background-color: #000;
aspect-ratio: 1/1;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (hover: hover){
.ft-fixedBnr li button:hover{
cursor: pointer;
}
}ポイント:
<ul>要素に固定バナーのクラス名を付与しています。- 各バナーは
<li>要素内に配置され、閉鎖ボタンとリンクが含まれています。 - 各バナーの
<li>デフォルトでdisplay: none;にしておくことでページ遷移時にバナーがチラつかくことを防止します。
使用しているリセットクラスについて:
imgauto
当ブログではimgタグに対して以下のリセットを行っております。
img{
height: auto;
max-width: 100%;
box-sizing: unset;
vertical-align: bottom;
}
.imgauto{
height: auto;
width: 100%;
box-sizing: unset;
line-height: 1rem;
display: block;
}formReset
当ブログではform系のタグについて以下のリセットを行っております。
.formReset button,
.formReset input[type="button"],
.formReset input[type="submit"],
.formReset input[type="text"],
.formReset input[type="image"],
.formReset select{
background-color: unset;
color: #000;
-webkit-appearance: none;
border-radius: 0;
border: none;
}
.formReset input[type="text"],
.formReset input[type="text"]::placeholder{
color: #000;
}
@media (hover: hover){
.formReset button:hover,
.formReset input[type="button"]:hover,
.formReset input[type="submit"]:hover,
.formReset input[type="image"]:hover,
.formReset select:hover{
cursor: pointer;
}
}
@media screen and (max-width: 767px){
.formReset input[type="text"],
.formReset input[type="text"]::placeholder{
font-size: 16px;
}
}jQueryコードの実装
以下のjQueryコードを使用して、固定バナーの表示・非表示をクッキーで制御します。
$(function () {
const fixedBnrItems = $(".ft-fixedBnr li");
const fixedBnrCloseButtons = $(".ft-fixedBnr li button");
let hiddenItems = $.cookie("hiddenItems") ? $.cookie("hiddenItems").split(",") : [];
fixedBnrItems.each(function (index, element) {
if (!hiddenItems.includes(index.toString())) {
$(element).show();
}
});
fixedBnrCloseButtons.on("click", function () {
const index = $(this).parent().index();
$(this).parent().hide();
let hiddenItems = $.cookie("hiddenItems") ? $.cookie("hiddenItems").split(",") : [];
if (!hiddenItems.includes(index.toString())) {
hiddenItems.push(index);
}
$.cookie("hiddenItems", hiddenItems.join(","), { expires: 1 / 24 });
});
});コードの詳細説明
要素の取得:
const fixedBnrItems = $(".ft-fixedBnr li");
const fixedBnrCloseButtons = $(".ft-fixedBnr li button");fixedBnrItems: すべてのバナーアイテムを取得。fixedBnrCloseButtons: 各バナー内の閉鎖ボタンを取得。
閉鎖ボタンのクリックイベント:
fixedBnrCloseButtons.on("click", function () {
const index = $(this).parent().index();
$(this).parent().hide();
let hiddenItems = $.cookie("hiddenItems") ? $.cookie("hiddenItems").split(",") : [];
if (!hiddenItems.includes(index.toString())) {
hiddenItems.push(index);
}
$.cookie("hiddenItems", hiddenItems.join(","), { expires: 1 / 24 });
});- ユーザーが閉鎖ボタンをクリックすると、対応するバナーを非表示にします。
- 非表示にしたバナーのインデックスをクッキーに記録し、1時間後にクッキーが削除されるよう設定します。
ページ読み込み時のバナー表示制御:
let hiddenItems = $.cookie("hiddenItems") ? $.cookie("hiddenItems").split(",") : [];
fixedBnrItems.each(function (index, element) {
if (!hiddenItems.includes(index.toString())) {
$(element).show();
}
});- ページが読み込まれる際、クッキーに記録されていないバナーのインデックスを取得し、該当するバナーを表示します。
まとめ
jQueryとクッキーを活用することで、固定バナーの表示・非表示をユーザーの操作に応じて柔軟に制御することができます。本記事では、具体的な実装手順とコード例を通じて、固定バナーのクッキー制御方法を解説しました。以下のポイントを押さえて、自サイトのユーザーエクスペリエンスを向上させるカスタマイズを行いましょう。
- ユーザーエクスペリエンスの向上: 不必要なバナー表示を避けることで、ユーザーのサイト閲覧を快適にします。
- クッキーの活用: ユーザーの操作状態をクッキーで管理し、表示状態を保持します。
- カスタマイズ性: バナーの表示期間や位置、制御方法を柔軟に変更可能です。
ぜひ、今回紹介した方法を参考に、固定バナーの効果的な制御を実装してみてください。