SWELLでクリック式モーダルを設置する手順｜ボタンで開く・外側クリックで閉じる（コピペOK）

記事の途中で「もう少し詳しく見たい」「ここだけ補足がほしい」と思う瞬間ってありますよね。

そんなときに便利なのが、画面の上にふわっと重なるクリック式モーダルです。

ボタンを押した人だけに必要な情報を見せられるので、本文を読みやすく保ちながら、伝えたい内容もきちんと届けられます。

この記事では、SWELLで使える形にしながら、ボタンで開いて、×または外側クリックで閉じるモーダルをコピペで作れるようにまとめました。

「HTMLやCSSやJSって難しそう」と感じても大丈夫です。

まずは動く形をそのまま貼って、あとから少しずつあなたのサイトに馴染ませていきましょう。

読者さんの悩み	この記事での解決
モーダルを作りたいけど、どこに何を貼ればいいか分からない	HTML・CSS・JSの貼り付け場所を分けて、迷わない順番で案内します。
作ったのに開かない、閉じない、前面に出ない	よくある原因を表で整理して、チェック順も一緒に紹介します。
スマホで崩れそうで不安	幅と高さの上限を決めて見切れにくいCSSにしています。

この記事でわかること

SWELLでクリック式モーダルを作るためのHTMLの形。
背景を暗くして中央表示にするCSSの基本。
ボタンで開いて外側クリックで閉じるJavaScriptの作り方。
動かないときに最初に見るべきチェックポイント。

それではさっそく、ボタンを押したら開くモーダルから作っていきます。

まず押さえるポイント：クリック式モーダルは「HTML＋CSS＋JS」で完成

クリック式モーダルは、ボタンを押したときに画面中央へ小さなウィンドウを重ねて表示する仕組みです。

やることはシンプルで、HTMLで箱を用意して、CSSで見た目を整え、JavaScriptで開閉するだけです。

一度仕組みを作ってしまえば、あとは中身を差し替えるだけで告知やCTAにも使い回せます。

この記事でできること（完成イメージとゴール）

この手順を終えると、ボタンをクリックした瞬間にモーダルが開きます。

そして「×」ボタン、または背景（暗い部分）をクリックすると閉じられるようになります。

さらに、スマホでも見切れにくいサイズ調整と、よくある「動かない」原因の対処まで一緒に確認できます。

事前準備（SWELLでコードを入れる場所を決める）

モーダルは「HTML」「CSS」「JS」の3点セットなので、貼り付け場所を先に決めると迷いません。

結論として、まずは該当ページだけで動作確認できる場所を選ぶのが安全です。

やりたいこと	おすすめの貼り付け場所	向いている人	注意点
このページだけにモーダルを出したい	記事編集画面下部の「カスタムCSS&JS」	まず試したい初心者さん	ページを増やすとコピペ管理が必要です。
サイト全体で同じモーダルを使いたい	CSSは「追加CSS」、JSは子テーマで読み込み	複数ページで使い回したい人	アップデートで消えないよう、親テーマ直編集は避けます。
中身だけ頻繁に差し替えたい	ブログパーツ化して呼び出す	運用をラクにしたい人	呼び出しIDや名前の管理が必要です。

失敗しにくい進め方（小さく動作確認→デザイン調整の順）

最初から完璧なデザインを目指すより、まず開閉だけ成功させるのが近道です。

そのあとに幅や余白、ボタン色などを整えると、原因切り分けが簡単になります。

「開かない」「閉じない」を防ぐために、まずはこのままコピペで動作確認してみてください。

【手順1】HTMLを用意する：ボタンとモーダル本体を作る

まずは、モーダルを開くためのボタンと、モーダル本体のHTMLを用意します。

ここが土台になるので、最初は余計な装飾を入れず、分かりやすい構造にします。

トリガー（ボタン）を置くコツ（押しやすさ・文言・配置）

ボタンは、読者さんが迷わない位置に置くのがいちばん大切です。

おすすめは、記事の導入直後か、説明が一区切りしたタイミングです。

文言は「詳しく見る」「クーポンを見る」「無料でチェックする」など、押した先が想像できる言葉が安心です。

モーダルの基本HTML（背景＋中身＋閉じるボタン）

下のHTMLを、投稿や固定ページのブロックエディターで「カスタムHTML」ブロックに貼り付けます。

「ここだけ変える」目印も入れているので、慣れていなくても大丈夫です。

<!-- ここから：モーダルを開くボタン -->
<button class="swell-modal__open" data-swell-modal-open="demoModal">
モーダルを開く
</button>
<!-- ここから：モーダル本体（最初は非表示） -->
<div class="swell-modal" id="demoModal" aria-hidden="true">
<div class="swell-modal__overlay" data-swell-modal-close></div>
<div class="swell-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="demoModalTitle">
<button class="swell-modal__close" type="button" data-swell-modal-close aria-label="閉じる">×</button>
<h4 id="demoModalTitle">モーダルのタイトル</h4>
<p>ここに表示したい内容を書きます。</p>
<p><strong>この部分はブログパーツにして差し替え</strong>てもOKです。</p>
</div>
</div>

ポイントは、背景（overlay）と中身（dialog）を分けていることです。

背景をクリックしたら閉じる、という動きがとても作りやすくなります。

SWELLでHTMLを入れる場所（投稿/固定・ウィジェット・ブログパーツ化）

基本は「カスタムHTML」ブロックに貼ればOKです。

同じモーダルを複数ページで使うなら、ブログパーツに登録して呼び出すと管理がラクになります。

ブログパーツを使う場合は、記事側にはショートコードだけ置いて、中身はブログパーツで編集します。

[blog_parts id="123"]

この形にしておくと、「中身の文言だけ直したい」ときに一括で更新できます。

【手順2】CSSで見た目を整える：背景を暗くして中央に表示

次はCSSで、モーダルの見た目とレイアウトを整えます。

ここで「それっぽく」見えるようになるので、作業の手応えが出やすいパートです。

背景（オーバーレイ）と中央配置の基本

下のCSSを、まずはそのページだけで試すなら「カスタムCSS&JS」のCSS欄へ貼ってください。

サイト全体で使うなら「追加CSS」に入れておくと便利です。

/* ====== SWELLクリック式モーダル：基本CSS ====== */
.swell-modal{
position: fixed;
inset: 0;
display: none; /* JSで開くときにflexへ */
z-index: 99999;
}
.swell-modal.is-open{
display: flex;
align-items: center;
justify-content: center;
}
.swell-modal__overlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,.55);
}
.swell-modal__dialog{
position: relative;
z-index: 1;
width: min(560px, calc(100% - 32px));
max-height: calc(100vh - 32px);
overflow: auto;
background: #fff;
border-radius: 16px;
padding: 20px 18px;
box-shadow: 0 16px 48px rgba(0,0,0,.25);
}
.swell-modal__close{
position: absolute;
top: 10px;
right: 12px;
width: 40px;
height: 40px;
border: none;
background: transparent;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.swell-modal__open{
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4em;
padding: 12px 16px;
border-radius: 999px;
border: none;
cursor: pointer;
background: #111;
color: #fff;
}

z-indexは大きめにしておくと、ヘッダーや装飾と重なりにくくなります。

ただし、サイト側でさらに強い指定があると負けることがあるので、後半のQ&Aも合わせて確認してください。

スマホ対応（横幅・余白・高さ・スクロール）の調整

スマホで崩れやすいのは、幅と高さです。

上のCSSでは、幅を「画面幅−32px」にして、上下も「画面高さ−32px」にしています。

そのうえで中身だけスクロールするので、画面からはみ出しにくい構成です。

SWELLのデザインと馴染ませる（色・角丸・影・ボタンの統一感）

SWELLは全体の雰囲気が整いやすいテーマなので、モーダルだけ浮かないようにすると完成度が上がります。

たとえばボタン色をサイトのメインカラーに合わせたり、角丸を他のボタンと同じにするだけで自然に見えます。

ここは好みなので、まずは動作優先で、最後にゆっくり整えていきましょう。

【手順3】JavaScriptで開閉する：クリックで開く・×で閉じる

最後にJavaScriptで「開く」「閉じる」の動きをつけます。

今回のコードは、ボタンが何個あっても同じモーダルを開けるようにしてあります。

「開く」動作（ボタン→モーダル表示）

ボタンには data-swell-modal-open を付けていて、値にモーダルのIDを入れています。

JavaScriptはその値を読み取り、該当のモーダルに is-open クラスを付けて表示します。

「閉じる」動作（×ボタン＋外側クリックで閉じる）

閉じる要素には data-swell-modal-close を付けています。

×ボタンだけでなく、背景（オーバーレイ）にも同じ属性を付けているので、外側クリックでも閉じられます。

便利な追加：ESCで閉じる／開いてる間は背景スクロールを止める

「閉じたいのに閉じられない」はストレスになりやすいので、ESC対応も入れておくと親切です。

また、モーダル表示中に背景がスクロールすると操作感が悪くなるので、背景スクロールも止めます。

下のJSを、ページ単体なら「カスタムCSS&JS」のJS欄へ貼り付けてください。

document.addEventListener('DOMContentLoaded', () => {
const body = document.body;
const openModal = (modal) => {
if (!modal) return;
modal.classList.add('is-open');
modal.setAttribute('aria-hidden', 'false');
// 背景スクロール停止
body.dataset.swellModalScrollY = String(window.scrollY);
body.style.position = 'fixed';
body.style.top = `-${window.scrollY}px`;
body.style.left = '0';
body.style.right = '0';
body.style.width = '100%';
// フォーカスを閉じるボタンへ
const closeBtn = modal.querySelector('[data-swell-modal-close]');
if (closeBtn) closeBtn.focus();
};
const closeModal = (modal) => {
if (!modal) return;
modal.classList.remove('is-open');
modal.setAttribute('aria-hidden', 'true');
// 背景スクロール復帰
const y = Number(body.dataset.swellModalScrollY || '0');
body.style.position = '';
body.style.top = '';
body.style.left = '';
body.style.right = '';
body.style.width = '';
window.scrollTo(0, y);
delete body.dataset.swellModalScrollY;
};
// 開くボタン（複数OK）
document.addEventListener('click', (e) => {
const opener = e.target.closest('[data-swell-modal-open]');
if (!opener) return;
const id = opener.getAttribute('data-swell-modal-open');
const modal = document.getElementById(id);
openModal(modal);
});
// 閉じる（×ボタン・背景クリック）
document.addEventListener('click', (e) => {
const closer = e.target.closest('[data-swell-modal-close]');
if (!closer) return;
const modal = closer.closest('.swell-modal');
closeModal(modal);
});
// ESCで閉じる
document.addEventListener('keydown', (e) => {
if (e.key !== 'Escape') return;
const modal = document.querySelector('.swell-modal.is-open');
if (modal) closeModal(modal);
});
});

ここまで貼ったら、まずはプレビューで「開く→閉じる」を確認してみてください。

見た目の調整は、動作が確認できてからで大丈夫です。

SWELLでの設置場所ガイド：どこに書けば反映される？

「どこに貼るか」で、管理のしやすさと不具合の出やすさが変わります。

結論として、慣れるまではページ単体で試し、問題なければ全体管理へ移す流れがおすすめです。

CSSはどこ？（追加CSS／ページ単体CSS／子テーマ）

CSSは「追加CSS」に入れるのが手軽です。

ただし記事1本だけで試したいなら、編集画面下部の「カスタムCSS&JS」欄に入れるほうが安全です。

サイト全体で使う予定があるなら、最終的には子テーマのstyle.cssや追加CSSに集約すると見失いにくいです。

JSはどこ？（ページ単体／子テーマで読み込み／高度な設定の注意）

ページ単体なら「カスタムCSS&JS」のJS欄がいちばん簡単です。

全体で使う場合は、子テーマでJSファイルを作り、functions.phpで読み込む方法が管理しやすいです。

カスタマイザーの「高度な設定」でhead内へ任意コードを出す方法もありますが、入力内容はそのまま出力されるので慎重に扱ってください。

「functions.php編集が怖い」人向けの安全策（テスト環境・バックアップ・スニペット活用）

functions.phpの編集は、1文字ミスでも画面が真っ白になることがあります。

不安なら、まずはページ単体で完成させてから、落ち着いて全体管理へ移すのがおすすめです。

どうしても全体管理が必要な場合は、バックアップを取ってから作業し、可能ならスニペット管理プラグインを使うと安心です。

よくあるつまずきQ&A：動かない・前面に出ない・閉じない

最後に、つまずきやすいポイントをまとめます。

ここを押さえておくと、原因が見つからずに時間が溶けるのを防げます。

症状	よくある原因	対処
ボタンを押しても開かない	IDの打ち間違い／JSが読み込めていない	data-swell-modal-openの値とidを同じにして、JSをJS欄へ貼り直します。
前面に出ない（何かに隠れる）	他要素のz-indexが強い／親要素の重なり順	.swell-modalのz-indexを上げ、必要なら!importantで上書きします。
背景クリックで閉じない	overlayに data-swell-modal-close が付いていない	overlay要素に属性があるか確認して貼り直します。
モーダル内がスクロールできない	高さ指定が強すぎる／overflowが合っていない	.swell-modal__dialogにmax-heightとoverflow:autoがあるか確認します。
編集したのに反映されない	キャッシュ／高速化機能の影響	キャッシュ削除を行い、追加コードの読み込み順も見直します。

モーダルが開かない（IDの重複／JSの読み込み位置／キャッシュ系）

まずは、ボタン側の data-swell-modal-open と、モーダル側の id が一致しているか確認してください。

次に、JSがページ内で読み込まれているかを確認します。

キャッシュ系プラグインや高速化機能を使っている場合は、変更が反映されるまで時間差が出ることがあります。

モーダルが前面に出ない（z-indexだけでは解決しないケースも）

z-indexを上げてもダメなときは、親要素の重なり順やpositionの影響が絡んでいることがあります。

その場合は、モーダルを記事内の深い位置に置かず、できるだけシンプルな場所へ移すと改善することがあります。

まずは今のコードのまま、.swell-modalのz-indexを99999にして改善するか試してみてください。

複数ボタン・複数モーダルにしたい（data属性で増やせる設計に）

今回のJSは「data-swell-modal-openの値＝開くモーダルID」なので、増やすのは簡単です。

モーダルを増やす場合は、idを demoModal2 などに変えて、ボタン側の値も同じにします。

ただし、idはページ内で重複しないように注意してください。

応用：より運用しやすく、見やすくするアイデア

基本ができたら、運用のしやすさを少しだけ足すと一気に楽になります。

ここからは「できたら嬉しい」範囲なので、必要なものだけ拾ってください。

中身をブログパーツにして差し替えをラクにする

告知やCTAの文言は、後から差し替えたくなることが多いです。

そのため、モーダル内の本文部分だけをブログパーツにして呼び出すと更新が一括で済みます。

「同じモーダルを何ページにも置いている」場合ほど、この方法が効いてきます。

軽量ライブラリでアクセシビリティも意識する

もっと丁寧に作るなら、フォーカス移動の制御なども入れると親切です。

ただ、最初から全部やろうとすると難しく感じやすいので、必要になった時に取り入れるで十分です。

今のコードでも、ESCで閉じるとフォーカスをcloseボタンへ移す対応は入れてあります。

CTAに活かす（表示タイミング・再表示制御・計測時の注意）

クリック式は「読者さんが自分の意思で開く」ので、押しつけ感が少ないのが強みです。

CTAにするなら、記事の内容と自然につながるボタン文言にすると押されやすくなります。

計測やCookieで再表示制御をする場合は、サイトのプライバシーポリシーなどにも配慮しながら進めると安心です。

まとめ

クリック式モーダルは、HTMLとCSSとJavaScriptの3点セットで作れます。

最初は「開く→閉じる」だけに集中すると、つまずきにくくなります。

慣れてきたら、ブログパーツ化して中身を差し替えやすくすると運用がぐっとラクになります。

この記事のポイントをまとめます。

クリック式モーダルはHTML・CSS・JSの順で作ると迷いません。
最初はページ単体の「カスタムCSS&JS」で動作確認すると安全です。
ボタンの data 属性とモーダルの id は同じ文字にそろえます。
背景（overlay）と中身（dialog）を分けると外側クリックで閉じやすいです。
スマホ対策は幅と高さの上限を決めて中身だけスクロールにします。
ESCで閉じる機能を付けると操作のストレスが減ります。
表示中の背景スクロールを止めると使い心地が良くなります。
前面に出ないときはz-indexだけでなく配置や親要素も疑います。
複数モーダルは data-swell-modal-open の値を増やすだけで対応できます。
中身はブログパーツ化すると後から差し替えが簡単になります。

モーダルは「ちょっとだけ目立たせたい情報」をやさしく伝えるのに向いています。

まずは今回のコードで開閉だけ成功させて、次に色やボタン文言をあなたのサイトに合わせて整えてみてください。

小さな改善でも見た目と使いやすさがぐっと上がるので、焦らず一つずつ育てていく感覚で大丈夫です。