※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSにモーダルウインドウを設置する方法

キャプチャ画像

時には嫌われかねないモーダルウインドウの効果的な使い方を考えてみました。


モーダルウインドウの良し悪し

このコンテンツ(記事)の機能はカスタムテンプレート【Volar】に搭載してます。

 

モーダルウインドウ(あるいはモーダルダイアログ)というのは、画面に表示されたウインドウ(ダイアログ)を閉じるまでは他の操作ができなくなるウインドウ画面のことです。

(※モーダルウインドウとモーダルダイアログは厳密には異なりますが、ここでは同じものとして扱います)

 

たとえばページを閉じようとしたらいきなり画面中央付近にウインドウが出てきて、「本当に閉じていいんですか?」なんてダイアログが出るヤツもモーダルウインドウの一つです。

 

(あれは個人的には一番嫌いなヤツです)

 

エラーメッセージ警告表示が出て「はい or いいえ」のどちらかを選択しない限り他の操作ができなくなったり、期間限定の商品案内の通知画面などが出たりするのも同じです。

 

こういった画面がひんぱんに出てくると、「あ~、まただよ」「閉じるの、めんどくさ~」なんてぼやく方も多いんじゃないでしょうか。

 

そこに加えて内容が怪しげな宣伝文句だったりしたら、もう、ねえ。

 

そんな嫌われがちなモーダルウインドウですが、使い方次第では”本来の効果”を大いに発揮することもあります。

 

これにはいくつか条件があって、

  • 何の画面なのかが一目でわかる文面(or 画像)であること。
  • ウインドウの中身がサイト訪問者の興味をひく文面(or 画像)であること
  • あからさまな宣伝になってないこと
  • ”閉じる”手段が複数存在すること
  • ”ここぞ!”という1ヵ所だけに使う

 

カスタムテンプレート【Volar】にはこのモーダルダイアログの仕組みが搭載されてます。

 

あなたは規定のエリアに表示したい文言や画像を差し込むだけ。

 

『ページが開かれると同時にモーダルウインドウが開く』パターンと、『サイト訪問者が特定の語句や画像をクリックしたときに初めてモーダルウインドウが開く』2種類のパターンを用意してます。

 

具体的な画面レイアウトなどはこちら↓をご覧ください。

 

モーダルウインドウ機能 - SIRIUSカスタムテンプレート【Volar】の特長

カスタムテンプレート【Volar】では簡単な設定でモーダルウインドウを表示させることができます。

問合せ画面やパスワードなどの入力用としてのモーダルウインドウはやめておいた方が無難です。

 

間違って「閉じる」ボタンを押してウインドウが消えてしまうと通常は入力した内容が消えてしまい、また最初からやり直しになっちゃいます。

 

これはサイト訪問者のストレスを一気に増やすだけなので、できればちゃんとした専用のページに移動するような形式にしておくべきです。

 

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像