コンバージョンボタンマニュアル

まず、投稿ページまたは固定ページ下のWP Ranking Proコンバージョンボタン作成タブを開くか、WP Rankinger Proのプラグインページにアクセスし、コンバージョンボタン作成ページを開いて下さい。

CVボタンオプションの設定

    1. 最初に、CVボタンの種類の種類を選択して見た目の変更をします。
      ライブプレビューを見ながら好みのデザインを選択してください。

      5種類の中から選択することができます。
    2. 次に、CVボタンのデザインを選択します。

      「横長」を選択すると横長の1つのボタン、「横並び2つ」を選択すると横並びで2つのボタンを表示させることが可能です。
    3. 続いてCVボタンの色の調整です。

      CVボタンが二つの場合は、個別に色を変更することができます。

      • オレンジ

      の4種類の色は、ボタンを押すだけで簡単に設定することが可能です。

      好みの色がない時は「カラーピッカーを使う」にチェックを入れ、上の枠をクリックしてカラーピッカーをご利用ください。
      また、カラーコードがわかっている場合は直接枠内に入力して色を設定することも可能です。

    4. CVボタン内の文字色を設定します。


      黒、または白を選択することが可能です。

    5. アニメーションの有無や、ボタンごとにアニメーションを分けるかの設定をします。

      「全体」では全てのボタンが同じアニメーションで動作し、「それぞれ」を選択するとそれぞれのボタンに対してアニメーションを設定できるようになります。
      「なし」を選択した場合、アニメーション効果をなくすことができます。また、ボタンが1つの場合には「全体」又は「なし」のみ選択可能です。
    6. アニメーションの設定は上記の項目で全体またはそれぞれを選んだ場合に表示されます。
      アニメーションは、

      • フェードイン
      • フェードイン(右)
      • フェードイン(左)
      • バウンスイン
      • バウンスイン(右)
      • バウンスイン(左)
      • スウィング
      • 無し

      の8種類の中から選択することが可能です。
      選択直後にライブプレビューでアニメーションを確認することができます。

      全体の動きを再確認したいときは、下の緑色のボタンを「ランキングを非表示」→「アニメーションを再生」の順に押すと、記事に貼り付けたときの動きがその場で確認できて便利です。

    7. 最後に、CVボタン内に挿入するテキストリンクを設定します。


      また、CVボタンにしたいテキストリンクをテキストボックスに貼り付けます。CVボタンを2つ設定する場合は左右別々のテキストリンクを貼り付けることが可能です。

CVボタンコードを生成する

上の手順が全て完了したら、HTMLコードを生成して本文に貼り付けます。

    1. 緑のコード生成ボタンをクリックしてHTMLコードを生成したら、枠下の「CVボタンコードをコピーする」というボタンをクリックします。
    2. 次に、記事の編集画面へ移ってください。
      テキストエディタの場合は、そのままコード貼り付けるだけで設置完了です。

      ビジュアルエディタをお使いの方は「HTMLを挿入」というボタンをクリックしてそこに貼り付けてから設置します。
    3. これで一連の流れは完了です。投稿前に記事のプレビューを行い、動作を確認してください。

投稿日:

Copyright© Fwwwラボ , 2018 All Rights Reserved.