Photo by
yukiao
【アダアフィ】SWELLでプラグイン不要！UXに配慮した「追従バナー」を自作する方法（コピペOK）
如何にして、クリックさせるかが肝ですが、SWELLだと追従バナー（フッター固定バナー）で良さげなものが無いのでGoogleAIStudioにお願いし作ってもらいました。
追従バナーは便利だか、最初からずっと表示されるのはユーザーの邪魔
一定量スクロールしたら表示、×ボタンで閉じられる、ページ遷移したっら再表示できる、ユーザーの使い勝手を考慮した設定した軽量バナーの実装
SWELLの標準機能と【高度な設定】のコピペだけで完結し、サイトが重くならないメリット
実装しているサイトは下記になります。
実装の手順
準備するもの
バナー画像（横長のもの（例：1200×300pxなど）をWebP形式などで圧縮して用意。
リンク先URL: 飛ばしたい先のURL。
実装手順（自己責任でお願いします）
SWELLのカスタマイザーを開き、**「高度な設定」→「bodyタグ終了直前に出力するコード」に以下のコードを貼り付けるだけです。
#### 【コピペ用】実装コード
```html
<!-- UX配慮型 固定バナー（ページ移動で再表示） -->
<div id="smart-fixed-banner" style="display: none; opacity: 0;">
<button id="banner-close-btn" aria-label="閉じる">×</button>
<a href="https://ここにリンク先のURL">
<img src="https://ここに画像のURL" alt="キャンペーン案内">
</a>
</div>
<style>
/* -------------------------------------------
* バナー全体のデザイン
* ------------------------------------------ */
#smart-fixed-banner {
position: fixed !important;
bottom: 20px; /* 下からの距離 */
left: 50%;
transform: translateX(-50%);
z-index: 999999;
width: 90%;
max-width: 400px; /* 最大横幅 */
line-height: 0;
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: auto;
}
/* 表示された時に適用されるスタイル */
#smart-fixed-banner.is-visible {
opacity: 1 !important;
}
#smart-fixed-banner img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
/* 閉じるボタンのデザイン */
#banner-close-btn {
position: absolute;
top: -12px;
right: -12px;
width: 32px;
height: 32px;
background: #444;
color: #fff;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000001;
}
/* スマホ用の位置調整（SWELLの固定メニューがある場合） */
@media (max-width: 959px) {
#smart-fixed-banner {
bottom: 75px;
width: 88%;
}
}
</style>
<script>
(function() {
window.addEventListener('DOMContentLoaded', function() {
const banner = document.getElementById('smart-fixed-banner');
const closeBtn = document.getElementById('banner-close-btn');
const showThreshold = 400; // 400pxスクロールしたら表示
let isManuallyClosed = false;
window.addEventListener('scroll', function() {
if (isManuallyClosed) return;
if (window.scrollY > showThreshold) {
if (banner.style.display === 'none') {
banner.style.display = 'block';
setTimeout(() => banner.classList.add('is-visible'), 10);
}
} else {
banner.classList.remove('is-visible');
setTimeout(() => {
if(!banner.classList.contains('is-visible')) banner.style.display = 'none';
}, 400);
}
});
closeBtn.addEventListener('click', function(e) {
e.preventDefault();
isManuallyClosed = true;
banner.classList.remove('is-visible');
setTimeout(() => { banner.style.display = 'none'; }, 400);
});
});
})();
</script>
```3.カスタマイズのポイント（解説）
表示タイミングを変えたい: `showThreshold = 400` の数値を大きくすれば、もっとスクロールしないと出ないようになります。
スマホの位置を調整したい: `@media` 内の `bottom: 75px` を変えることで、SWELLのメニューとの被りを調整できます。
ページ移動で再表示させたくない場合:「今回は利便性を考えて、ページ移動で復活するように設計しています」
まとめ
プラグインを使わないのでサイトが重くならない。
×ボタンがあることでユーザーにストレスを与えない。
SWELLの「高度な設定」を活用すれば、テーマを直接いじらず安全にカスタマイズできる。
