Bloomプラグインのクリックトリガーの使い方
こんにちは、根本耕輔です。
BloomプラグインのPop upフォームもしくはFly inフォームで使えるクリックトリガー（正式には「Trigger On Click」）の使い方をご紹介していきます。
ちょっとややこしい部分もありますので、ゆっくり読み進めてみてください。
Step1. Pop upフォームかFly inフォームでクリックトリガーを設定する
まずは、Pop upフォームかFly inフォームをすでに作成しているのを前提としてやっていきます。「DISPLAY SETTINGS」に行き、「LOAD-IN SETTINGDS」の項目にある「Trigger On Clicks」にチェックを入れます。すると、その下に「CSS Selector (string)」という欄が表示されますので、「.clicktrigger」と入力してみてください。ドットは必須ですが、「clicktrigger」という文言は、どんなものでも構いません。設定が完了したら、「SAVE & EXIT」をクリックします。
Step2. Diviで記事を作成する
クリックトリガーの設定が終わったら、Diviで記事を作成していきます。DiviのテーマでもDiviビルダープラグインでもどちらでも構いません。僕は、Diviのテーマを使っているので、「Diviビルダーを使う」という紫のボタンをクリックし、「ビジュアルビルダー」で設定していきます。記事の作り方は、「BUILD FROM SCRATCH」でも、「CHOOSE A PREMADE LAYOUT」でも、「CLONE EXISTING PAGE」でも構いません。好きなものを使ってみてください。
Step3. 記事にリンクトリガーを設定する
次に、記事にリンクトリガーの設定をしていきます。ボタンにリンクトリガーを設定する方法とテキストにリンクトリガーを設定する方法の2タイプをご紹介していきます。やり方が若干異なって、ややこしいので注意して設定してみてください。
ボタンにリンクトリガーを設定する方法
ボタンを使ってリンクトリガーを設定する場合は、ボタンのモジュールを追加します。ボタンのテキストは、好きな文言を入力しておいてください。あと、通常は「リンク」の「ボタン（URL）」の欄にURLを記入しますが、リンクトリガーを設定する場合は、入力する必要はありません。
「詳細」にタブを切り替えて、「CSSIDとクラス」を開きます。そしたら、「CSSID」と「CSSクラス」という2つの項目が表示されますが、「CSS」クラスの方にStep1で設定した「.clicktrigger」のドットを抜いた「clicktrigger」だけを入力します。設定が完了したら、「保存」して、「ビジュアルビルダーを終了」します。
そして、実際にボタンをクリックしてみてください。上のように、ボタンをクリックして、フォームが表示されたら成功です。もし、表示されない場合は、スペルが間違っていたり、記入する場所が「CSSクラス」ではなく、「CSSID」になっている可能性もあるのでチェックしてみてください。
テキストにリンクトリガーを設定する方法
テキストでクリックトリガーを設定する場合は、テキストのモジュールを追加します。そして、テキストの入力方法を「ビジュアル」から「テキスト」に切り替えます。
そして、上記のコードを入力します。「テキスト」の文言は、文章で表示される部分なので、適切な文言に変更しておきましょう。これで、完了です。
間違っても、ボタンの時と同じように「詳細」の「CSSIDとクラス」を開いて、「CSSクラス」に「clicktrigger」と記入しないようにしてください。そうすると、該当のテキストだけではなく、他のテキストの上でクリックしてもクリックトリガーが発動して、オプトインフォームが表示されています。
そしたら、ボタンの時と同じように、「保存」、「ビジュアルビルダーを終了」をクリックして、実際にクリックトリガーが発動するか確認してみましょう。
テキストには、リンクが埋まっていないので、指でクリックするようなカーソルは表示されませんが、クリックするとちゃんとフォームが表示されますので、安心してください。