CSSのみで実装する自作モーダルウィンドウ【WordPress・レスポンシブ対応】

CSSのみで実装する自作モーダルウィンドウ【WordPress・レスポンシブ対応】

SHARE

くるみ

クリックで開閉するモーダルウィンドウを記事内で使いたいな
というわけで本記事では

  • ブログ・サイト内でモーダルを使用したい
  • でもプラグインとかはできるだけ使いたくない
  • 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で記事内でモーダルを使いたい」という方向け。カスタマイズ手順は以下の通りです。

手順
step1
functions.phpにショートコードを登録
step2
CSSを追加する

今回はモーダルを何度も使い回せるようにショートコードとして登録します。

functions.phpをいじるとなると難しいことのように聞こえるかもしれませんが、コピペだけで完成するのでご安心を。

バックアップは忘れずにしておこう

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法 ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

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コードを追加する方法【初心者向け】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」キー

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

新卒1年目のひよっこWEBエンジニア。業務ではPHPを触り、プライベートではReactで宅配冷凍弁当の比較・口コミサイトの開発・運営をしています。お問い合わせはこちらよりどうぞ。

前の記事

WordPressでおしゃれなレーダーチャートを作成する方法【プラグイン・ライブラリ不要】
WordPressでおしゃれなレーダーチャートを作成する方法【…

次の記事

初心者ブロガー向け？「マクサン式webライティング実践スキル大…
初心者ブロガー向け？「マクサン式webライティング実践スキル大全」書評レビュー