アクセスした時にモーダルウィンドウを表示する

「へろへろ・のぉと(旧館)」へ来られた読者に引っ越ししたことを伝え、新サイトへ誘導するために、アクセスしたときにモーダルウィンドウを表示してメッセージを見ていただけるようにした。

どのページにアクセスしたときにもウィンドウが表示され、ページを遷移したときは表示しない。初めてアクセスしたときだけ表示するんじゃなくて、できればセッション毎に表示できたらいいな。

WordPressって本当にいいな。そんな望みを簡単に叶えてくれるプラグインがあった。
その名も「ITRO Popup Plugin」。早速「へろへろ・のぉと(旧館)」に設置した。

プラグインをインストール、有効化し、「設定>ITRO Popup」で設定画面を開く。

150117-20

「SHOW ADVANCED SETTINGS」をチェックすると細かい設定ができるようになる。

「DECIDE WHERE POPUP WILL BE DISPLAYED」は、アクセス時にモーダルウィンドウを表示する画面を設定する。
「All pages」は、どの画面にアクセスしてもモーダルウィンドウを表示する。

「GENERAL SETTINGS」は、モーダルウィンドウを表示する状態を設定する。

「Disable on mobile device」は、モバイル端末で、「Disable ESC key」はESCキーをそれぞれ無効にする。

「Popup seconds」は、モーダルウィンドウを表示している時間。

「Popup delay」は、最初にモーダルウィンドウが表示するまでの時間。

「Next visualization (hours)」は、時間を設定すると、設定した時間内はモーダルウィンドウを再表示しない。
セッション毎の再表示は設定できないが、ページ遷移のたびに表示されるのは防ぐことができる。

「Delete cookie」ボタンは、自分がアクセスしたときに書き込まれるクッキーを削除する。
ウィンドウの内容をプレビューするときなどにこのボタンをクリックしないと、上で設定した時間が経たないと再表示しない。とても重要なボタンだ。

「Show countdown」はモーダルウィンドウ下部にウィンドウが閉じるまでのカウントダウン時間を表示する。「Countdown font color」は、そのテキストの文字色を指定する。

150117-21

「POPUP ASPECT」ではモーダルウィンドウの体裁を設定する。

「Popup width」は、モーダルウィンドウの幅。

「Popup height」は、モーダルウィンドウの高さ。通常は「auto」で問題ないだろう。

「Popup background color」は、モーダルウィンドウの背景色。

「Popup border color」は、モーダルウィンドウの輪郭罫のカラー。

「Popup border radius(px)」は、輪郭罫の角アール。

「Popup border width(px)」は、輪郭罫の太さ。

「Popup padding(px)」は、輪郭罫から中身のテキストまでの天地左右の余白。

「BACKGROUND IMAGE」は、モーダルウィンドウの背景に画像が配置できるようだ。

「Popup position」は、モーダルウィンドウが現れる位置を設定する。

「Automatic top margin」にチェックが入っていると元画面の中央に現れる。

モーダルウィンドウが表示された時、元の画面は「Opaque background color」で設定したカラーで塗りつぶされる。「Background opacity」は塗りつぶされたカラーの透過率を指定する。

「Close cross」は、モーダルウィンドウの右肩に表示されるクローズボタンのカラー。

「Age restriction setting」は年齢認証用のウィンドウを表示する場合の設定を行う。

設定を変更したら「変更を保存」ボタンをクリックする。

「Preview page」ボタンをクリックすると、モーダルウィンドウの状態をプレビュー画面で見ることができる。何度もプレビューする場合は、このボタンを押す前に「Delete cookie」ボタンを必ずクリックしないとプレビューされない。

150117-22

「Your text (or HTML code:)」は、モーダルウィンドウ内に表示する内容をここに記述する。ほぼ投稿ページと同様の機能が使えるようだ。

掲載した設定画面は「へろへろ・のぉと(旧館)」に設置したモーダルウィンドウそのもの。

どのページからアクセスしても幅500ピクセルの赤枠ウインドウを画面中央に30秒間表示し、2時間以内は再表示しない。その時の元画面は透過率60%の黒色で塗りつぶされているはずだ。

説明はかなり端折っているが、様々に設定を変えプレビューすると良い。いろいろな使い方ができるのが発見できると思う。

コメントをどうぞ

コメントをどうぞ (Japanese text only)

すべての欄が入力必須です。メールアドレスは公開されません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

カテゴリー