くるみ
- ブログ・サイト内でモーダルを使用したい
- でもプラグインとかはできるだけ使いたくない
- WordPressでショートコードとしてモーダルを使い回したい
という方に向けて、JavaScriptを使わずにCSSのみで実装するモーダルウィンドウの実装方法をまとめました。
素のHTMLのパターンと、WordPressで使用する場合を想定してのパターン、両方をご紹介するのでぜひ参考になれば幸いです。
お品書き
モーダルウィンドウの完成イメージ
ラベルを押下するとモーダルウインドウが表示され、×ボタンもしくはモーダル外をクリックするとウィンドウは非表示になります。
モーダルを表示するラベルに関してですが、目立ちやすい「ボタン型」と、リンクのように使える「テキスト型」の2つを作ってみました。
実際の挙動は上から確認してみてください。
ちなみに本モーダルはページアクセス時に勝手に表示されるわけではなく、ユーザーのアクション(クリック・タップ)によって初めて表示されるものですのでご注意ください。
CSSのみでモーダルウィンドウを実装する方法
まずはWordPressなどは使っておらず、単にモーダルのコードを知りたい方向け。以下のコードで実現できます。
HTML
ボタンver
<div class="entry-modal-pare">
<input type="radio" id="entry-modal__open" class="entry-modal__open" name="entry-modal__trigger"/>
<label for="entry-modal__open" class="open">モーダルを開く</label>
<input type="radio" id="entry-modal__close" class="entry-modal__close" name="entry-modal__trigger"/>
<div class="entry-modal">
<div class="entry-modal__content-wrap">
<label for="entry-modal__close" class="close-label">×</label>
<div class="entry-modal__content">ここにモーダルの中身</div>
</div>
<label for="entry-modal__close">
<div class="entry-modal__background"></div>
</label>
</div>
</div>
テキストver
<div class="entry-modal-pare">
<input type="radio" id="entry-modal__open" class="entry-modal__open" name="entry-modal__trigger"/>
<label for="entry-modal__open" class="simple">モーダルを開く</label>
<input type="radio" id="entry-modal__close" class="entry-modal__close" name="entry-modal__trigger"/>
<div class="entry-modal">
<div class="entry-modal__content-wrap">
<label for="entry-modal__close" class="close-label">×</label>
<div class="entry-modal__content">ここにモーダルの中身</div>
</div>
<label for="entry-modal__close">
<div class="entry-modal__background"></div>
</label>
</div>
</div>
CSS
/*--------------------------------------
モーダル
--------------------------------------*/
.entry-modal-pare{
text-align: center;
}
.entry-modal-pare input{
display:none;
}
.entry-modal-pare label.open,.close-label{
cursor:pointer;
}
/*ボタンver*/
.entry-modal-pare label.open{
padding:.84em 3.3em .84em 3.8em;
font-family: Hiragino Sans,ヒラギノ角ゴシック,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,メイリオ,Meiryo,sans-serif;
font-weight: 500;
font-size: .9em;
background-color:#f8c678;
color:#fff;
border-radius: 5px;
display:inline-block;
margin:0 auto 1em;
text-align:center;
letter-spacing: .01em;
}
.entry-modal-pare label.open:hover{
outline:1px solid rgb(255, 179, 107);
color:rgb(255, 179, 107);
background-color:#fff;
}
.entry-modal-pare label.open:hover:after{
color:rgb(255, 179, 107);
}
.entry-modal-pare label.open:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f138";
display: inline-block;
padding-left: 8px;
color:#fff;
}
/*シンプルver*/
.entry-modal-pare.simple{
display:inline-block;
}
.entry-modal-pare label.simple{
color:#4f96f6;
font-size:.95em;
}
.entry-modal-pare label.simple:hover{
text-decoration: underline;
cursor: pointer;
color: #c7511f
}
.entry-modal{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
display:none;
}
.entry-modal__open:checked + label + input + .entry-modal{
display:block;
animation:modal-animation .6s;
}
.entry-modal__content-wrap{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 80%; /* PCでのモーダルの幅 */
max-width: 650px;
background-color: #fefefe;
z-index: 2;
border-radius:5px;
}
.close-label{
background: #777;
color: #fff;
border: 2px solid #fff;
border-radius: 20px;
width: 36px;
height: 36px;
line-height: 1.25;
text-align: center;
display: table-cell;
position: fixed;
top:-13px;
right: -2%;
z-index: 99999;
font-size: 1.5em;
}
.entry-modal__content{
max-height:50vh; /* モーダルの高さ */
overflow-y:auto;
padding: 39px 45px 40px;
}
.entry-modal__background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.45);
z-index: 1;
}
@keyframes modal-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.entry-content .entry-modal__content table{
margin-bottom:0;
}
@media only screen and (max-width: 480px) {
.entry-modal-pare label.open{
max-width:90%;
padding: .94em 2.1em .94em 2.6em;
}
.close-label{
top:-17px;
right: -4%;
}
.entry-modal__content-wrap{
width: 90vw; /* モバイルでのモーダルの幅 */
}
.entry-modal__content{
padding:33px 21px 35px;
max-width:100%;
}
}
WordPressでのモーダルウィンドウの実装方法
次に「WordPressで記事内でモーダルを使いたい」という方向け。カスタマイズ手順は以下の通りです。今回はモーダルを何度も使い回せるようにショートコードとして登録します。
functions.phpをいじるとなると難しいことのように聞こえるかもしれませんが、コピペだけで完成するのでご安心を。
バックアップは忘れずにしておこう
早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。
「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

step1:functions.phpにショートコードを登録
/**************************
* 記事内モーダル
***************************/
function entry_modal($atts, $content = null)
{
if (is_null($atts)) {
return '';
}
extract(shortcode_atts([
'label' => '',
'mode' => '',
], $atts));
if (!($label && $content)) {
return '';
}
$content = do_shortcode(shortcode_unautop($content));
$inputRandId1 = mt_rand(1, 99999);
$inputRandId2 = mt_rand(1, 99999);
$inputRandName = mt_rand(1, 99999);
$entryModalPareClass = '';
$modalLabel = "<label for='entry-modal__trigger{$inputRandId1}' class='open'>{$label}</label>";
if ($mode === 'simple') {
$entryModalPareClass = ' simple';
$modalLabel = "<label for='entry-modal__trigger{$inputRandId1}' class='simple'>{$label}</label>";
}
$output = <<<EOF
<div class="entry-modal-pare{$entryModalPareClass}">
<input type="radio" id="entry-modal__trigger{$inputRandId1}" class="entry-modal__open" name="entry-modal__trigger{$inputRandName}">
{$modalLabel}
<input type="radio" id="entry-modal__trigger{$inputRandId2}" class="entry-modal__close" name="entry-modal__trigger{$inputRandName}">
<div class="entry-modal">
<div class="entry-modal__content-wrap">
<label for="entry-modal__trigger{$inputRandId2}" class="close-label">×</label>
<div class="entry-modal__content">{$content}</div>
</div>
<label for="entry-modal__trigger{$inputRandId2}">
<div class="entry-modal__background"></div>
</label>
</div>
</div>
EOF;
return $output;
}
add_shortcode('entry_modal', 'entry_modal');
上記のコードを、以下のどちらかの方法でfunctions.phpにコピペします。
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。
【初心者向け】WordPressでCSSを編集する方法を徹底解説
step2:CSSを追加する
/*--------------------------------------
モーダル
--------------------------------------*/
.entry-modal-pare{
text-align: center;
}
.entry-modal-pare input{
display:none;
}
.entry-modal-pare label.open,.close-label{
cursor:pointer;
}
/*ボタンver*/
.entry-modal-pare label.open{
padding:.84em 3.3em .84em 3.8em;
font-family: Hiragino Sans,ヒラギノ角ゴシック,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,メイリオ,Meiryo,sans-serif;
font-weight: 500;
font-size: .9em;
background-color:#f8c678;
color:#fff;
border-radius: 5px;
display:inline-block;
margin:0 auto 1em;
text-align:center;
letter-spacing: .01em;
}
.entry-modal-pare label.open:hover{
outline:1px solid rgb(255, 179, 107);
color:rgb(255, 179, 107);
background-color:#fff;
}
.entry-modal-pare label.open:hover:after{
color:rgb(255, 179, 107);
}
.entry-modal-pare label.open:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f138";
display: inline-block;
padding-left: 8px;
color:#fff;
}
/*シンプルver*/
.entry-modal-pare.simple{
display:inline-block;
}
.entry-modal-pare label.simple{
color:#4f96f6;
font-size:.95em;
}
.entry-modal-pare label.simple:hover{
text-decoration: underline;
cursor: pointer;
color: #c7511f
}
.entry-modal{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
display:none;
}
.entry-modal__open:checked + label + input + .entry-modal{
display:block;
animation:modal-animation .6s;
}
.entry-modal__content-wrap{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 80%; /* PCでのモーダルの幅 */
max-width: 650px;
background-color: #fefefe;
z-index: 2;
border-radius:5px;
}
.close-label{
background: #777;
color: #fff;
border: 2px solid #fff;
border-radius: 20px;
width: 36px;
height: 36px;
line-height: 1.25;
text-align: center;
display: table-cell;
position: fixed;
top:-13px;
right: -2%;
z-index: 99999;
font-size: 1.5em;
}
.entry-modal__content{
max-height:50vh; /* モーダルの高さ */
overflow-y:auto;
padding: 39px 45px 40px;
}
.entry-modal__background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.45);
z-index: 1;
}
@keyframes modal-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.entry-content .entry-modal__content table{
margin-bottom:0;
}
@media only screen and (max-width: 480px) {
.entry-modal-pare label.open{
max-width:90%;
padding: .94em 2.1em .94em 2.6em;
}
.close-label{
top:-17px;
right: -4%;
}
.entry-modal__content-wrap{
width: 90vw; /* モバイルでのモーダルの幅 */
}
.entry-modal__content{
padding:33px 21px 35px;
max-width:100%;
}
}
続けて、上記のCSSを以下のどれかの方法でコピペします。
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
「モーダルの幅(高さ)」とコメントしているところの値を変えてあげれば、モーダルのサイズを調整することができます。
step3:記事内にショートコードを挿入する
これでモーダルを使えるようになったので、早速エディターでショートコードを挿入していきましょう。
[entry_modal label="ここにラベル"]ここにモーダルの中身[/entry_modal]
使い方は上記の通りで、モーダルに表示させたい内容をショートコードで囲みます。
そして指定するパラメーターに関しては以下の通りです。
パラメーター | 概要 |
---|---|
label | モーダルのラベル(※必須) |
mode | テキスト型にする場合は「simple」を指定。何も指定しない場合はボタン型になる |
実際にプレビューを見てみてちゃんと動作すれば完了。より良い記事づくりのためにぜひモーダルを有効活用してみてください。
くるみ
CSSの変更が反映されない場合の対処法
WordPressのショートコードとして利用される方で「CSSを追記して保存したにも関わらず反映されない…」となった場合は、以下が原因であることが多いです。- キャッシュ系プラグイン
- プラウザキャッシュ
キャッシュ系プラグインを疑う


「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
お使いのブラウザのキャッシュを削除してみてください。
Chromeをお使いの場合は以下のショートカットキーで削除できます。
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |