【コピペだけ！】CSSだけでポップアップウィンドウを作る方法！

ここあです。

最近ではかなりたくさんの人たちがブログを運営されていると思いますが、

せっかくブログの記事を書く以上は、

読者の方にきちんと情報を正しく伝えたかったり

アクションを起こして欲しいと思っているかと思います。

そんな時に活用しやすいのが「ポップアップウィンドウ」です。

ポップアップウィンドウとは、例えばこんな↓表示や

クリックしてね

こんな↓表示をさせたりするもので

様々なシーンで使うことができます。

しかも、今回の記事ではそんな「ポップアップウィンドウ」を

プラグインを使って表示させるのではなく

HTMLとCSSだけで簡単に実装する方法をお伝えさせていただきます。

ということで、

HTMLとCSSだけで便利なポップアップウィンドウを実装したいあなたは

ぜひ参考にしてくださいね。

CSSでポップアップウィンドウを実装する方法

今回はポップアップウィンドウの実装をHTMLとCSSのみで行います。

なので、ポップアップウィンドウのCSSを記述する場合は

ダッシュボードメニューから、

外観 → カスタマイズ → 追加CSSをクリックし

以下の部分に

私がお伝えするCSSコードをコピペして調整するようにしてくださいね。

ポップアップウィンドウのサンプルデモ

冒頭でお伝えしたポップアップウィンドウの実装方法を

お伝えさせていただきますが、基本的にあなたがすることは

HTMLとCSSコードのコピペ、および、CSSの微調整のみです。

ということで、例えあなたがワードプレスの初心者であっても

簡単に実装できますので、ぜひ試してみてくださいね。

ボタン式のポップアップウィンドウ

クリックしてね

ボタン式のポップアップウィンドウとは上記、ボタンを押していただくと分かりますが、

ボタンをクリックすると、オーバーレイと言って、元の画面が薄暗くなり

その上にウィンドウが表示されるという仕組みのものになります。

今回のサンプルはテキストだけですが、使い方は様々で

画像を入れたり、Youtube動画を入れたり、ボタンを入れたりすることも可能です。

HTMLやCSSの構造がよくわからない場合は、

実装してもポップアップウィンドウをうまく表示させれない場合もありますので、

少しずつ慣れてから、応用するようにしてみてくださいね。

ということで、ボタン式のポップアップウィンドウを表示させる場合は

以下のHTMLとCSSコードをコピペしてください。

ちなみにHTMコードをブログの記事に反映させる場合は

必ず「テキスト編集モード」にしてからコピペしてくださいね。

HTMLコード

<div class=”popup_wrap”>
<input id=”trigger” type=”checkbox”>
<div class=”popup_overlay”>
<label for=”trigger” class=”popup_trigger”></label>
<div class=”popup_content”>
<label for=”trigger” class=”close_btn”>×</label>
<p>ここにポップアップウィンドウの中身を入れます。画像も入りますし、動画も入ります。</p>
</div>
</div>
</div><label for=”trigger” class=”open_btn”>クリックしてね</label>

追加CSSにコピペ

.popup_wrap input {
display: none;
}

.popup_overlay {
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}

.popup_trigger {
position: absolute;
width: 100%;
height: 100%;
}

.popup_content {
position: relative;
align-self: center;
width: 90%;
max-width: 800px;
padding: 30px 40px;
box-sizing: border-box;
background: #fff;
line-height: 1.4em;
transition: 0.5s;
text-align: justify;
}

.close_btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 14px;
cursor: pointer;
padding:8px;
background: #f29c9f;
color: #fff;
border-radius:15px;
line-height:14px;
font-weight:bold;
}

.popup_wrap input:checked ~ .popup_overlay {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}

.popup_wrap input:checked ~ .popup_overlay .popup_content{
transform: translateY(50px);
}

.open_btn {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 30px;
margin:10px auto;
color: #555;
background:fff;
padding: 20px 16px;
border:solid 1px #ccc;
font-weight: bold;
border-radius: 21px;
cursor: pointer;
transition: .3s ease;
}

.open_btn:hover{
background:#f29c9f;
border:solid 1px #f29c9f;
color:#fff;
transition: .3s ease;
}

ということで、基本的には上記HTMLとCSSコードがコピペできれば

ボタン式のポップアップウィンドウは実装できます。

ボタン式ポップアップウィンドウの注意点

ボタン式のポップアップウィンドウはビジュアル編集モードと

テキスト編集モードを繰り返していると、

どういうわけか反応しなく場合があります＾＾；

そんな時、HTMLコードを確認すると、以下のように

本来、空いてはいけない部分に1行分の改行が勝手に入ってしまう場合があります。

こうなると、ボタンをクリックしても、何も反応がなく

ポップアップウィンドウが表示されなくなってしまいますので、

ボタンをクリックしてみておかしいな？と思った時は

HTMLコードがきちんと以下のようになっているかどうかご確認ください。

他のテーマの場合はよく分かりませんが、THE THORの場合は

モード変更をしていると勝手に改行が入る場合がありますので、

ボタンが反応しない場合は一度HTMLコードを疑ってくださいね＾＾；

マウスオーバーのポップアップウィンドウ

2つ目はこちら。文字にマウスを乗せた時に表示されるウィンドウです。

↓以下「詳しくはこちら！」の上にマウスを乗せるとウィンドウが表示されます。

このポップアップウィンドウは、注意書など

ちょっとしたアテンションを付けたい時などに効果的では？と思います。

ということで、こちらのポップアップウィンドウを実装する場合は

HTMLコード

<div class=”mouseover__conts”>
<p class=”btn-mouseover”>詳しくはこちら！</p>
<div class=”mouseover__box”>マウスを乗せた時に表示されるウィンドウです。</div>
</div>

追加CSSにコピペ

.btn-mouseover:hover + .mouseover__box{
display: block;
margin-top:5px;
}

.mouseover__box{
display: none;
top:0;
left:0;
width: 100%;
padding: 10px 15px;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
text-align: justify;
border-radius:5px;
}

ということで、こちらのポップアップウィンドウも

HTMLとCSSコードのコピペだけですぐに実装できますので、

ぜひ一度コピペして試してみてくださいね。

ポップアップウィンドウのパーツをカスタマイズする方法

最後に簡単ではありますが、今回ご紹介したポップアップウィンドウの

パーツをカスタマイズする方法だけ解説させていただきます。

というのも、サイトイメージに合わせてボタンカラーなど

変えたい方もいらっしゃると思いますので。

ボタンの色を変える方法

ボタンの色を変更したい場合は、CSSコードの中に

「.open_btn」というコードがありますので、

以下、CSSコードの場所を探し微調整してください。

例えば、border:solid 1px #ccc; の1pxを2pxにすれば罫線は太くなりますし、

#cccのカラーコードを別のコードに変えれば罫線の色が変わります。

また、背景色が今は「background:fff;」ということで白になってますが、

他のカラーコードを入力し、背景色に色を付けた上で、

「border:solid 1px #ccc;」の一行を消してしまうか、

「border:none」とすることで、

罫線のない背景色のみのボタンにすることもできます。

さらに、「border-radius: 21px;」の数字を10pxなどに変えることで

ボタンの丸みを抑えたり、0pxにして無くすことも可能です。

ボタンのホバー色を変える方法

今回のサンプルコードはボタンのホバー色がピンクにしてあるのですが、

ボタンのホバー色ももちろん、あなたの好みに色に変えることができます。

ボタンのホバー色を変えたい場合は、

CSSコードの中に「.open_btn:hover」という項目がありますので、

以下のCSSコードで微調整してください。

サンプルでは、ボタンのホバー色を1色にするために

背景色と囲み罫の色を同色にしていますが、

背景色を「background:#fff; 」にして

囲み罫の色だけが変わるようにしたり違う背景色に変えるなど

調整することが可能ですので、ぜひ色々と試してみてくださいね。

閉じるボタンの色を変える方法

閉じるボタンの色は現在、淡いピンクにしてありますが、

こちらの色も、もちろん変更することが可能です。

閉じるボタンの色を変更する場合は

CSSコードの中に「.close_btn」という項目がありますので、

以下のCSSコードで微調整してください。

ということで、ボタンパーツなど色の変更方法もお伝え致しましたので

あなたのサイトに合わせてカスタマイズしてみてくださいね＾＾

ポップアップウィンドウを実装する際の注意点

今回はポップアップウィンドウの表示方法について解説させていただきましたが、

Webサイトやブログの運営で大事なことは、

サイトを訪問してくれる方に不快感を与えないこと。

ですので、ポップアップウィンドウを使う場合は

訪問者の方に役立つ情報であったり、補足事項だったり、

他のサイトやページに遷移せんいさせる手間を取り払うために活用してくださいね。

せっかく便利なポップアップウィンドウを実装しても

読者に不快感を与えるような仕組みになってしまっては

それこそ本末転倒となり、何のために実装したのかが分からなくなります。

そういう意味では確かにポップアップウィンドウというのは非常に便利ですが、

その反面、一歩使い方を間違えると信用がなくなり、

それこそ自分のビジネスに悪影響を与えてしまい兼ねませんので

ご使用の際には、

• 本当に訪問者のためになっているか？
• 訪問者に不快感を与える要素になっていないか？

運営側の立場だけではなく、訪問者側の立場にもなって

客観的に判断するようにしてくださいね。

以上、最後までお読みいただきありがとうございました！