2015年1月17日 WordPress
アクセスした時にモーダルウィンドウを表示する
「へろへろ・のぉと(旧館)」へ来られた読者に引っ越ししたことを伝え、新サイトへ誘導するために、アクセス時にモーダルウィンドウを表示してメッセージを見ていただけるようにしました。
どのページにアクセスしたときにもウィンドウが表示され、ページを遷移したときは表示しない。初めてアクセスしたときだけ表示するんじゃなくて、できればセッション毎に表示できたらいいな。
WordPressって本当にいいな。そんな望みを簡単に叶えてくれるプラグインがありました。
その名も「ITRO Popup Plugin」。早速「へろへろ・のぉと(旧館)」に設置しました(現在はモーダルウィンドウを表示しません)。
プラグインをインストール、有効化し、「設定>ITRO Popup」で設定画面を開きます。
「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」は、そのテキストの文字色を指定します。
「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」ボタンを必ずクリックしないとプレビューされません。
「Your text (or HTML code:)」は、モーダルウィンドウ内に表示する内容をここに記述します。ほぼ投稿ページと同様の機能が使えるようです。
掲載した設定画面は「へろへろ・のぉと(旧館)」に設置したモーダルウィンドウそのもの。
どのページからアクセスしても幅500ピクセルの赤枠ウインドウを画面中央に30秒間表示し、2時間以内は再表示しません。その時の元画面は透過率60%の黒色で塗りつぶされているはずです。
説明はかなり端折っていますが、様々に設定を変えプレビューすると、いろいろな使い方ができるのが発見できると思います。