「ZEBLINE(ゼブライン)」の使い方を徹底解説!動くラインマーカーでユーザーの視線を釘付けにする!

  • URLをコピーしました!

どうも、ひろもん(@hiromon_com)です。

あなたもどこかのサイトを訪れた際、一度くらいは動くラインマーカーを見かけたことがあると思いますが、あなたのサイトでも使ってみたいと思いませんか?

実は「ZEBLINE(ゼブライン)」というプラグインを使えば、テーマに関係なくどのサイトでも以下のような動くラインマーカーが使えるようになります。

マーカーの色や速度も自由に変更可能

「ZEBLINE」で使える動くラインマーカー
  • gifのため動きがカクカクですが実際はスムーズに動きます。
  • gifのためリピートしていますが実際は一度しか動きません。

人は目の前に動くものがあると、つい無意識に目で追ってしまうものですが、この「無意識に目で追ってしまう現象」はサイト運営にも利用できます。

たとえば、あなたもこんなサイト見たことありませんか?

無意識に目で追ってしまうもの

  • ファーストビューが動画
  • 動くバナー
  • 動く吹き出し
  • 動くボタン
  • 動くラインマーカーなど

上記のような動きのあるものが視界に入ると、つい無意識に目が行きますし、「注意を引く・注目を集める」効果は絶大です。

注目を集めて得られる効果

  • バナーやボタンのクリック率アップ
  • 重要な箇所をしっかりと読んでもらえる

動きで注目を集めるテクニックは、アフィリエイトサイトに限らず、多くの企業サイトでも使われています。

そこで今回は、動くラインマーカーが使えるプラグイン「ZEBLINE」について徹底解説します。

この記事でわかること
  • 「ZEBLINE」の使い方
  • 「ZEBLINE」の活用方法
  • 「ZEBLINE」のレビュー
もくじ

「ZEBLINE」の使い方

「ZEBLINE」の使い方

プラグインを購入

「ZEBLINE」は有料プラグインなので、まずは販売ページから購入します。

公式サイト

「ZEBLINE」の販売ページはこちら

インストール方法

プラグインを購入したら以下の手順でインストールします。

STEP
プラグインの[新規追加]をクリック
プラグインのインストール手順1

プラグインにカーソルを合わせるとサブメニューが表示されるので、[新規追加]をクリックします。

STEP
[プラグインのアップロード]をクリック
プラグインのインストール手順2
STEP
[ファイルの選択]をクリック
プラグインのインストール手順3

購入した「ZEBLINE」をZIPファイルのままアップロードします。

ファイル名は「zebline.zip」です。

STEP
[今すぐインストール]をクリック
プラグインのインストール手順4

これで「ZEBLINE」がインストールされます。

STEP
[プラグインを有効化]をクリック
プラグインのインストール手順5

これで「ZEBLINE」が使えるようになりました。

初期設定

続いて初期設定を行います。

STEP
管理画面の[ZEBLINE]をクリック
「ZEBLINE」の初期設定手順1

「ZEBLINE」をインストールし有効化すると、WP管理画面に「ZEBLINE」の項目が追加されます。

STEP
マーカーのスピード設定
「ZEBLINE」の初期設定手順2

ここでは「マーカーの動き出しから止まるまでの秒数」を設定でき、デフォルトでは2.5秒に設定されているので、任意で変更してください。

  • 秒数を減らすとスピードアップ
  • 秒数を増やすとスピードダウン
STEP
マーカーリンクの点滅設定
「ZEBLINE」の初期設定手順3

ここにチェックを入れてテキストリンクにマーカーを設定すると、テキストリンク部分が点滅してより目立つようになります。

テキストリンクが点滅
STEP
カラー設定
「ZEBLINE」の初期設定手順4

マーカーは3色まで使い分け可能で、右側にあるカラーパレットをクリックすると色が設定されます。

奇抜な色は避け、シンプルに赤・黄・緑・青あたりから選ぶのが無難です。

最後に設定画面の一番下にある[変更を保存]をクリックして初期設定は完了です。

テキストをHTMLタグで囲う

動くラインマーカーを記事で使うには、管理画面に記載されたHTMLタグでテキストを囲います。

「ZEBLINE」用のHTMLタグ

設定画面に「このマーカーを使う時は、class:zebline-maker zebline-color-aを追加してください。」と書かれており、わかりやすく説明すると、「マーカーを使う時はテキストをこのタグで囲ってね」という意味です。

実際のタグです

<span class="zebline-maker zebline-color-a">テキスト</span>
<span class="zebline-maker zebline-color-b">テキスト</span>
<span class="zebline-maker zebline-color-c">テキスト</span>

上記のタグを実際の記事編集画面(エディター)に入力すると以下になります。

「ZEBLINE」用のHTMLタグ使用例

上から順にマーカーA・マーカーB・マーカーCのタグです。

使用例

記事を公開するとこのようになります。

ワンクリックで使用する方法

ここでは毎回HTMLタグをコピペして使うのが面倒くさいという方向けに、「AddQuicktag(アドクイックタグ)」というプラグインを使って、ワンクリックでHTMLタグを挿入する方法を解説します。

「AddQuicktag」はどんなプラグインか?

事前に登録したHTMLタグをワンクリックで呼び出せるプラグインです。

「AddQuicktag」は無料プラグインなので、以下の手順でインストールします。

「AddQuicktag」のインストール手順
  1. WordPress管理画面でプラグインをクリック
  2. 新規追加をクリック
  3. 検索窓に「AddQuicktag」と入力
  4. 今すぐインストールをクリック
  5. 有効化をクリックで完了

「AddQuicktag」の設定方法

「AddQuicktag」にZEBLINEのHTMLタグを設定する手順を解説します。

STEP
管理画面で[AddQuicktag]をクリック
「AddQuicktag」の設定手順1

設定にカーソルを合わせるとサブメニューが表示されるので、[AddQuicktag]をクリックします。

STEP
赤枠の欄に必要事項を入力
「AddQuicktag」の設定手順2

入力欄が多いですが画像を参考に入力してください。

ボタン名:エディター上に表示される名前
ラベル名:エディター上に表示される名前
開始タグ:開始タグを入力
終了タグ:終了タグを入力
並び順:0/1/2と入力
ビジュアルエディター:チェックを入れる
post :チェックを入れる
page:チェックを入れる

入力欄ははじめ1つしかありませんが、必要事項を入力し[変更を保存]をクリックすると、新たな入力欄が表示されます。

STEP
エディター上で確認
「AddQuicktag」の設定手順3

「AddQuicktag」の設定が完了すると、エディター上にさきほど設定したボタンが3つ追加されています。

ZEBLINE(赤)は赤いラインマーカーを設定したボタンという意味なので、違う色を設定した際は、カッコ内の色の名前を変更してください。

「AddQuicktag」でタグを呼び出す

設定にミスがないか実際にタグを呼び出して確認してみます。

STEP
追加されたボタンをクリック
「AddQuicktag」の使い方1

テキストを範囲選択し、エディターに追加されたボタンをクリックします。

STEP
タグが正常に挿入されるか確認
「AddQuicktag」の使い方2

選択したテキストに対して、ラインマーカーのHTMLタグが挿入されるので、[プレビュー]をクリックしてラインマーカーが正常に動作するか確認します。

STEP
動作を確認
「AddQuicktag」の使い方3

正常にラインマーカーが動けば成功ですが、もし動かない場合は、「AddQuicktag」の設定で入力ミスをしている可能性があるので、再度確認してみてください。

動くラインマーカーはスクロールしないと動作しないため、動作確認をする際は画像のように3行ほどのダミーテキストを入れてください。

「ZEBLINE」の活用方法

「ZEBLINE」の活用方法

「ZEBLINE」の主な活用方法を紹介します。

アフィリエイター向けの活用方法

  • 重要な箇所を知らせる

重要な箇所を知らせる

動くラインマーカーは注意を引き付けられるので、とくに読んでもらいたい重要な箇所に使うと検索ユーザーに読まれやすくなり、伝えたいことが伝わりやすくなります。

  • 商品のメリット・デメリット
  • 商品の値上げ・販売終了
  • 緊急性のある情報
  • その他重要なお知らせなど

下記に比較用のダミーテキストを用意したので見比べてみてください。

普通のラインマーカー

動くラインマーカー

どちらも同じ黄色のラインマーカーですが、動くラインマーカーの方がより強く視線を引き付けますし、アフィリエイトサイトにも活かせます。

「ZEBLINE」のレビュー

「ZEBLINE」のレビュー

実際に「ZEBLINE」を使った上でのメリット・デメリットを紹介します。

メリット

「ZEBLINE」のメリット
  • 通常のラインマーカーよりも注目を集められる
  • 伝えたいことが伝わりやすい
  • オシャレ感が出る

「ZEBLINE」の最大のメリットは、検索ユーザーの視線を集めて、伝えたいことが伝わりやすくなることです。

記事の中で、「ここはきちんと読んでほしい」というポイントがそれぞれあるはずなので、重要なポイントに使うのが効果的です。

また単純に、動きのあるサイトやページはオシャレ感が出ます。

デメリット

「ZEBLINE」のデメリット
  • クラシックエディター必須
  • 多用すると逆効果

「ZEBLINE」はブロックエディターで使えないこともありませんが、かなり使い勝手が悪いため、基本的にはクラシックエディター専用と思った方がいいです。

普段からブロックエディターを使っている方は、「ZEBLINE」を使うために、プラグインの「Classic Editor」を使って、クラシックエディターを使えるようにする必要があります。

また動くラインマーカーをページのあちこちに多用すると、逆に何が重要なのかわからなくなるため、使いすぎには注意が必要です。

要望・改善点

「ZEBLINE」への要望・改善点
  • ブロックエディターへの対応

「ZEBLINE」がブロックエディターに対応すると、今よりもずっと使いやすくなります。

理想はエディター上でテキスト色や背景色などのように、カンタンに設定できることです。

こんな人におすすめ

「ZEBLINE」がおすすめな人
  • 大事なことをきちんと伝えたい方
  • オシャレ感を出したい方

動くラインマーカーがあると、つい無意識に目で追ってしまいます。

無意識にユーザーの視線を集められるのは非常に強みになるので、ユーザーに記事の内容をきちんと理解してもらいたいと考えている方におすすめです。

まとめ

動くラインマーカーは検索ユーザーの視線を集められるので、伝えたいことが伝わりやすくなります。

現状はクラシックエディターでしか使えないプラグインですが、気になる方はぜひ使ってみてください。

「ZEBLINE」の販売ページはこちら

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (3件)

  • こんにちは
    ブログランキングからの訪問です。
    マーカーいいですね。
    分かりやすい説明です。
    早速と取り入れたいと思います。
    ありがとうございました。

    • Radianさん、コメントありがとうございます。

      参考になったようで嬉しいです。
      ぜひ使ってみてください。

コメントする

トップへ
もくじ
閉じる