【Popup Maker】ポップアップを用語解説に応用する方法【WordPress】 | | まーくんのアフィリエイト学校

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

【Popup Maker】ポップアップを用語解説に応用する方法【WordPress】

公開日 最終更新日

【Popup Maker】ポップアップを用語解説に応用する方法【WordPress】

難しい用語ばかりの記事は目が回るくま~。一つ一つ解説して欲しいくま~。
確かに…。でも、丁寧に用語の説明をしてしまうと、一番伝えたいことが伝わらないこともあるです~。

 

記事を作成するうえで、読者にスムーズに情報を届けるために専門用語を使うこともあると思います。

専門用語を使った文章を読むには前提知識が必要ですが、そのぶん文章全体の量を節約することができます。

しかし専門用語を知らない読者は、わざわざ意味を調べなければなりませんし、最悪、読むのを諦めてしまうかもしれません。

とは言え、「読みやすさ」を第一に考えた時、いちいち用語解説を差し挟むのも好ましくありませんよね。

 

記事に集中したい」

「用語の意味を深く知りたい」

 

両方のニーズに応えたいサイト運営者にオススメしたいのが「Popup Maker」です。

 

Popup_Maker

 

Popup Makerは、WordPressに「ポップアップ(モーダルウィンドウ)」を導入できるプラグインです。

各用語の解説をポップアップで表示するように設定すれば、話題の流れやレイアウトを崩す心配は無くなります。

 

用語解説

 

Popup Makerで作るポップアップは、用語解説の他にも多彩な使い方ができます。

 

ポップアップの主な活用方法

・広告やCTAの表示(アフィリエイターに)

・画像の拡大(商材の視覚的な解説に)

・アンケート協力への呼びかけ(商材やコンテンツのイメージ調査に)

・警告メッセージ(コンテンツの年齢制限に)

 

このようにPopup Makerを使えば、コンテンツ作成や広告手法の選択肢がグッと広がります

 

今回は「Popup Maker」を使ってポップアップを作成する方法をご紹介します。

 

※その他のポップアップ系プラグインに興味のある方は、以下の講座をご覧ください。

【WordPress】ポップアップ(モーダルウィンドウ)おすすめプラグイン5選

 

Popup Makerの基本的な使い方

最初に、WordPressでポップアップを展開するまでの基本的な流れを解説します。

デザインやアニメーション効果のカスタマイズ方法についてはこちらをご覧ください。

 

まずは、WordPressにPopup Makerをインストールしましょう。

【WordPress】プラグインのインストール方法 基本から応用まで3つのメソッドをご紹介

※プラグインをインストールする前に、必ずWordPressのバックアップを行ってください。

 

ポップアップの作成

プラグインを有効化すると、WordPress管理画面に「Popup Maker」項目が追加されます。

 

Popup_Maker_all_popups

 

「Popup Maker」⇒「All Popups(全てのポップアップ)」に移動します。

 

add_new_popup

 

この画面でポップアップの一覧を確認できます。

※初期状態の場合は、「No Popups found(ポップアップが見当たりません)」が表記されています。

Add New Popup」をクリックして、ポップアップを新規追加しましょう。

 

Popup_Maker_設定画面

 

上図が各ポップアップを作成・設定するための画面です。

Popup Makerでは、投稿や固定ページの作成と同じ方法でポップアップ画面を構成できるのが特徴です。

WordPressのエディター画面とそっくりですよね。

 

まず始めに、ポップアップの名前を決めましょう。

今後、複数追加する場合に各ポップアップを見分けられるようにするための名前です。

ポップアップの名前は「Popup Name」フォームに入力します。

 

popup_name_title

 

次に、「Popup Title」にポップアップのタイトルを入力します。

ここに入力したテキストは、ポップアップ画面の先頭に掲載されます。

 

popup_title_表示

 

設定は任意で、空白でも問題ありません。

「メディアを追加」以下のエディター欄では、ポップアップ画面の中身を構成します。

 

ポップアップ_エディター

 

画像やテキストを自由に配置できるほか、動画の埋め込み(※ポップアップ内で再生可)も可能です。

ちなみにポップアップ画面はスクロールできるため、縦に長くなっても問題ありません。

 

ポップアップ画面を作成したら、次は「どのように展開させるか」設定します。

ポップアップの展開方法は、以下の2パターンが一般的です。

 

2つの展開方法

1.クリック展開

 :特定箇所をクリックした時にポップアップを展開

 【オススメの使い方】用語解説、画像の拡大

 

2.時間経過/自動展開

 :指定時間に達するとポップアップを展開

 【オススメの使い方】広告・アンケート表示

 

ポップアップの用途に合わせて使い分けると良いでしょう。

それでは、各パターンの設定方法を説明します。

 

クリック展開

クリック展開

 

用語の詳細説明や、イラスト・写真等のイメージ拡大には「クリック展開」がオススメです。

記事内の特定の箇所をクリックするとポップアップが開くように設定してみましょう。

 

エディター欄のすぐ下にある「Popup Settings(設定)」の項目を「Triggers(きっかけ)」に切り替えてください。

 

※Trigger(トリガー):拳銃などの「引き金」のこと。弾丸を発射する原因であることから、「何かが起こるきっかけ」といった意味もある。Popup Makerでは「クリック」や「時間経過」などポップアップが開く「きっかけ」を指す。

 

trigger

 

次に「Add New Trigger(新しいきっかけを追加)」をクリックします。

 

add_new_trigger

 

プルダウンメニューの中から「Click Open」を選択し「Add」をクリック。

 

click_open

 

その先の設定項目ではCSSセレクタやCookieの設定が行えます。

デフォルトのままでもポップアップは利用できるので、再び「Add」を押してください。

 

これでプラグイン側の設定は完了です。

最後に「公開(更新)」ボタンを押すのを忘れずに。

 

次は、記事内のテキストや画像に「クリックしたらポップアップを開いてね!」と命令しましょう。

まずWordPressの管理画面「Popup Maker」⇒「All Popups」に移動します。

対象のポップアップを見つけ「CSS Classes」を確認してください。

 

CSSセレクタ

 

二種類ありますが「popmake-〇〇〇」に数字が入っているほうをコピーします。

コピーしたら、ポップアップを展開する記事の編集画面を開きましょう。

テキストエディターに切り替えたら、対象テキストを以下のHTMLで囲みます。

 

<span class=”popmake-〇〇〇”>クリックさせたいテキスト</span>

 

HTML

 

画像の場合は以下のようなHTMLになります。

 

<img class=”popmake-〇〇〇” src=”画像URL” alt=”代替テキスト” />

※代替テキスト:画像の内容を説明した簡潔な文章を入力。画像が見れない環境の時に、画像の代わりに表示される。

 

画像のサイズ等は、ビジュアルエディターで調節できます。

最後にプレビューで確認してみましょう。

 

時間経過による自動展開

広告の表示回数をもっと増やしたいくま~。
そんな時は「自動展開」によるポップアップが有効です~。

 

広告申し込みフォームを読者に提示したい時にもポップアップが有効です。

この場合、クリック展開ではなく「時間経過による自動展開」に設定すると良いでしょう。

 

時間経過_自動展開

 

「時間経過による自動展開」にすることで、指定した時間になるとポップアップが開くようになります。

そのため、サイトを訪問した読者のブラウザに必ず広告を表示できます。

※このような広告を「ポップアップ広告」と呼ぶ。

 

ただし、ポップアップが展開されている間、読者はコンテンツ上の操作が制限されてしまいます。

サイトのユーザビリティが低下しない範囲内での使用をオススメします。

 

それでは、Popup Makerで自動展開を設定してみましょう。

まず、自動展開したいポップアップの設定画面を開きましょう。

そして、エディター欄のすぐ下にある「Popup Settings(設定)」の項目を「Triggers(きっかけ)」に切り替えてください。

 

 

trigger

 

次に「Add New Trigger(新しいきっかけを追加)」をクリックします。

 

add_new_trigger

 

プルダウンメニューの中から「Time Delay / Auto Open(遅延・自動展開)」を選択し「Add」をクリック。

 

time_delay

 

さらに、サイトを訪問してからポップアップが展開する時間を指定します。

 

delay_設定

 

ミリ秒(1000分の1秒)」単位で指定できます。

例えば、「3秒後」なら「3000」msに設定します。

 

最後に「公開(更新)」をクリックすれば、サイトに反映されます。

 

ただ、このままでは再訪問する度にポップアップが開いてしまい、読者に少々しつこい印象を与えるかと思います。

そこで、再訪問してくれた読者のブラウザにはポップアップを展開しないよう設定してみましょう。

 

Popup Settings」⇒「Triggers」で「Add New Cookie(新しいクッキーを追加)」をクリックしてください。

 

add_new_cookie

 

まず、プルダウンメニューの中から「どの時点でCookieを生成するか」を指定します。

 

on_popup_close

 

Cookie(クッキー)とは、読者のブラウザに与える「証明書」のようなもの。

この証明書を持っているブラウザでは、サイト再訪時にポップアップが展開されません

 

様々な選択肢がありますが「On Popup Close(ポップアップを閉じた時)」で問題ありません。

Add」をクリックすると、以下の設定に移ります。

 

Cookie_有効期限

 

Cookie Name:Cookieの名前を設定します。任意に変更できますが、そのままでもOK。

Cookie Time:Cookieの有効期限を設定します。期限が切れると再訪時にポップアップが開きます。「1 month」(一か月)または「1 week」(一週間)あたりが良いでしょう。

 

最後に「Update」をクリックして公開(更新)すれば設定完了です。

 

テーマ&アニメーション効果の変更

ぼくみたいな男らしいデザインに変えたいくま~。
…。Popup Makerでは、多彩なデザインの「テーマ」を選択できるです~。

 

Popup Makerでは、ポップアップのデザインを決める「テーマ」が6つ用意されています。

さらに、テーマ一つ一つに対して細かいカスタマイズを加えたり、あるいはオリジナルのテーマを作成することも可能です。

 

この章では、ポップアップにテーマを反映させる方法と、テーマをカスタマイズする方法について解説します。

 

テーマ&アニメーション効果の選択

まずは、作成したポップアップのデザイン・アニメーション効果を変更する方法から。

ポップアップの設定画面を開いたら「Popup Setting」の項目から「Display(画面)」を選択してください。

 

display

 

Popup theme」のプルダウンメニューからテーマを選択できます。

 

popup_theme

 

6つのテーマから好きなものを選び、「公開(更新)」⇒プレビューで確認してみましょう。

 

なんだかポップアップ画面の余白が大きすぎるくま~。
そんな時はサイズを変更すると良いです~。

 

ポップアップ内の画像やテキストが画面の端に寄ってしまい、無駄な余白が目立ってしまう場合があります。

 

余白

 

ポップアップ画面がコンテンツの大きさにピッタリ合うよう、サイズを調整してあげましょう。

まず「Display」から「Size(大きさ)」をクリックしてください。

 

size_auto

 

そして、プルダウンメニューから「Auto」を選択します。

「公開(更新)」ボタンを押してプレビューで確認してみると、下図のように画面がコンテンツにフィットします。

 

size_auto_プレビュー

 

ポップアップが開く時の「動き」がカッコイイくま~。
Popup Makerでは展開時の動き方も変更できるです~。

 

ポップアップは開く時にアニメーション効果がつくのが一般的です。

アニメーション効果にも様々な動き方があります。

例えば、Popup Makerでポップアップを作成すると、初期設定では「スライド」で展開します。

 

スライド

 

また、フワッ…と現れたり消えたりする「フェード」も有名な効果の一つです。

 

フェード

 

アニメーション効果を変更するには、まず「Popup Setting」⇒「Display」⇒「Animation」へと移動します。

「Animation Type」以下のプルダンメニューには、4種類の選択肢があります。

 

animation_type

 

None:アニメーション効果を付けない。

Slide:スライドで展開

Fade:フェードで展開

Fade and Slide:フェードしながらスライド展開

 

animation_speed_origin

 

Animation Speed」では効果の実行時間を指定できます。

値が大きければ大きいほど、ゆっくりとした動きになります。

 

Animation Origin」は、アニメーションの開始位置です。

「Top(最上部から)」や「Middle left(中間・左から)」「Bottom Center(最下部・中央から)」など細かい指定が可能です。

※「Animation Origin」は、「Animation Type」で「Slide」または「Fade and Slide」を選択している場合に適用される。

 

各項目を指定したら「公開(更新)」をクリックし、プレビューで動作を確認してみましょう。

 

テーマのカスタマイズ

Popup Makerには6つのテーマが用意されています。

テーマを選択しすぐにポップアップを導入できますが、さらに各テーマを自由にカスタマイズすることも可能です。

テーマをカスタマイズするには、WordPress管理画面から「Popup Maker」⇒「Popup Themes」へと進みます。

 

popup_themes

 

するとテーマの一覧が表示されます。

 

テーマ_カスタマイズ

 

各テーマの名前にカーソルを置くと、上図のように設定項目が現れます。

「編集」をクリックすると、テーマのカスタマイズ画面にアクセスできます。

 

テーマ_カスタマイズ_設定画面

 

「背景の透明度」や「フォント」「余白のサイズ」「影の調整」といった細部にいたる編集が可能です。

画面右下の「更新」をクリックすると、このテーマを適用しているポップアップに反映されます。

 

また、テーマ一覧画面の最上部にある「Add New Popup Theme」をクリックすると、オリジナルのテーマを一から作成することもできます。

 

add_new_popup_theme

 

Popup Makerに入力フォームを設置するには

Popup Makerは、投稿や固定ページと同様なエディターで編集できるのが大きな特徴です。

一方で、アンケートや入力フォームを設置するのは難しいですよね。

 

そこで、お問い合わせフォームを作成できるプラグイン「Contact Form 7」と連携させれば、Popup Makerの可能性がさらに広がるのではないかと考えました。

【Contact Form 7】お問い合わせフォームを設置しよう【WordPress】

 

連携方法は簡単で、Contact Form 7のショートコードをPopup Makerのエディターに貼り付けるだけです。

 

Contact_Form_7_ショートコード

 

「公開(更新)」後、プレビューで確認すると…。

 

入力フォーム_ポップアップ

 

無事、入力フォームをポップアップ画面に設置できました。

資料請求メルマガ登録アンケートの呼びかけ等をポップアップで運用したい方は、ぜひ試してみてください。

 

「Popup Makerの使い方」のおさらい

簡単に今回のまとめをしておくです~。

 

まとめ

・記事中の補足事項や用語解説に「ポップアップ」機能がオススメ

・プラグイン「Popup Maker」なら簡単にポップアップを導入できる

・「クリック展開」は用語解説や画像の掲載に

・「時間経過による自動展開」は広告やアンケートに

・Contact Form 7と組み合わせることで、申し込みフォームをポップアップ化できる

 

関連記事

【WordPress】スライドショーを設置するプラグイン おすすめ5選

【Contact Form 7】お問い合わせフォームを設置しよう【WordPress】

 

新規パートナー無料登録はこちら

 

 

サイト作成コース 一覧に戻る