【コピペで簡単】ソフト・ペイウォール（記事の途中からポップアップ表示）の実装サンプル
たーさん
一定量画面を下にスクロールするとポップアップが出てきて記事が読めない、有料記事の場合はそんな機能を実装したいことがあると思います。今回はこのソフト・ペイウォールと呼ばれる機能を、サイトに自前で実装できる簡単なサンプルをご紹介いたします。
タドワークスの後付け会員機能システム「ログインタス」と合わせてご使用ください。
https://tadworks.jp/lp/logintas
HTML
<div class="container">
<h1>Webライティングの未来とAIの共生</h1>
<p>（冒頭部分）現代のインターネットにおいて、情報の価値は...（略）</p>
<p>スクロールを続けてください。一定の位置でロックがかかります。</p>
<div style="height: 400px; background: #eee; margin: 20px 0; display: flex; align-items: center; justify-content: center;">
スクロール用スペース（400px）
</div>
<!--隠したい場所-->
<div id="restricted-content">
<h2>ここから重要な解説セクション</h2>
<p>※ここから5000文字相当のテキストが続くと仮定します。</p>
<p>AI時代におけるライティングの核心は、単なる情報の羅列ではなく...</p>
<div style="height: 2000px; background: linear-gradient(#fff, #f0f0f0);">
（ここに長い文章が流し込まれている状態）
</div>
</div>
</div>
<!--ソフト・ペイウォール部-->
<div id="read-more-overlay">
<div class="overlay-card">
<h2>🔓 記事の続きを読みませんか？</h2>
<p>この先には、具体的な技術スタックと、実践的な導入フェーズについての詳細な解説が含まれています。</p>
<p>無料会員登録だけで、すべての有料記事が閲覧可能です。</p>
<a href="#" class="btn">無料で登録して続きを読む</a>
</div>
</div>
①隠したい場所に、id="restricted-content"を付与する。
②ペイウォール部を下部に貼り付ける
HTML側はこれだけでOKです。
CSS
<style>
body {
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.container {
max-width: 700px;
margin: 0 auto;
padding: 50px 20px;
background: white;
}
h1 { border-bottom: 2px solid #eee; padding-bottom: 10px; }
/* 制限がかかるエリアの設定 */
#restricted-content {
transition: filter 0.5s ease;
}
/* ロックされた時の演出：ボカシと操作不能化 */
.is-locked {
filter: blur(8px);
pointer-events: none;
user-select: none;
}
/* オーバーレイ（ポップアップ） */
#read-more-overlay {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
/* 下から上にグラデーションをかけて、上が透明、下が暗くなるように */
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.9) 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.6s ease;
transform: translateY(20px);
}
/* アクティブ時の表示状態 */
#read-more-overlay.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ポップアップ内のカード */
.overlay-card {
background: white;
padding: 40px;
border-radius: 12px;
text-align: center;
max-width: 450px;
width: 90%;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.btn {
background: #2563eb;
color: white;
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin-top: 20px;
transition: background 0.3s;
}
.btn:hover { background: #1d4ed8; }
</style>JavaScript
<script>
// スクロールを監視
window.addEventListener('scroll', function() {
const overlay = document.getElementById('read-more-overlay');
const content = document.getElementById('restricted-content');
// 現在のスクロール位置を取得
const scrollY = window.scrollY;
// 【調整ポイント】どれくらいスクロールしたら出すか（px）
// 500px以上スクロールしたら発動
if (scrollY > 500) {
overlay.classList.add('is-visible');
content.classList.add('is-locked');
}
});
</script>これで完了です。試してみてくださいね。
投稿者プロフィール
Follow me!
