どうも、ひろもん（@hiromon_com）です。
あなたもどこかのサイトを訪れた際、一度くらいは動くラインマーカーを見かけたことがあると思いますが、あなたのサイトでも使ってみたいと思いませんか？
実は「ZEBLINE（ゼブライン）」というプラグインを使えば、テーマに関係なくどのサイトでも以下のような動くラインマーカーが使えるようになります。
マーカーの色や速度も自由に変更可能
- gifのため動きがカクカクですが実際はスムーズに動きます。
- gifのためリピートしていますが実際は一度しか動きません。
人は目の前に動くものがあると、つい無意識に目で追ってしまうものですが、この「無意識に目で追ってしまう現象」はサイト運営にも利用できます。
たとえば、あなたもこんなサイト見たことありませんか？
無意識に目で追ってしまうもの
- ファーストビューが動画
- 動くバナー
- 動く吹き出し
- 動くボタン
- 動くラインマーカーなど
上記のような動きのあるものが視界に入ると、つい無意識に目が行きますし、「注意を引く・注目を集める」効果は絶大です。
注目を集めて得られる効果
- バナーやボタンのクリック率アップ
- 重要な箇所をしっかりと読んでもらえる
動きで注目を集めるテクニックは、アフィリエイトサイトに限らず、多くの企業サイトでも使われています。
そこで今回は、動くラインマーカーが使えるプラグイン「ZEBLINE」について徹底解説します。
- 「ZEBLINE」の使い方
- 「ZEBLINE」の活用方法
- 「ZEBLINE」のメリット・デメリット
「ZEBLINE」の使い方
プラグインを購入
「ZEBLINE」は有料プラグインなので、まずは販売ページから購入します。
公式サイト
インストール方法
プラグインを購入したら以下の手順でインストールします。
プラグインにカーソルを合わせるとサブメニューが表示されるので、［新規追加］をクリックします。
購入した「ZEBLINE」をZIPファイルのままアップロードします。
［今すぐインストール］をクリックするとインストールが開始されます。
［プラグインを有効化］をクリックすると「ZEBLINE」が使えるようになります。
初期設定
続いて初期設定を行います。
「ZEBLINE」をインストールし有効化すると、WP管理画面に「ZEBLINE」の項目が追加されます。
ここでは「マーカーの動き出しから止まるまでの秒数」を設定でき、デフォルトでは2.5秒に設定されているので、任意で変更してください。
- 秒数を減らすとスピードアップ
- 秒数を増やすとスピードダウン
ここにチェックを入れてテキストリンクにマーカーを設定すると、テキストリンク部分が点滅してより目立つようになります。
マーカーは3色まで使い分け可能で、右側にあるカラーパレットをクリックすると色が設定されます。
最後に設定画面の一番下にある［変更を保存］をクリックして初期設定は完了です。
テキストをHTMLタグで囲う
動くラインマーカーを記事で使うには、管理画面に記載された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>上記のタグを実際の記事編集画面（エディター）に入力すると以下になります。
上から順にマーカーA・マーカーB・マーカーCのタグです。
記事を公開するとこのようになります。
ワンクリックで使用する方法
ここでは毎回HTMLタグをコピペして使うのが面倒くさいという方向けに、「AddQuicktag（アドクイックタグ）」というプラグインを使って、ワンクリックでHTMLタグを挿入する方法を解説します。
事前に登録したHTMLタグをワンクリックで呼び出せるプラグインです。
「AddQuicktag」は無料プラグインなので、以下の手順でインストールします。
- WordPress管理画面でプラグインをクリック
- 新規追加をクリック
- 検索窓に「AddQuicktag」と入力
- 今すぐインストールをクリック
- 有効化をクリックで完了
「AddQuicktag」の設定方法
「AddQuicktag」にZEBLINEのHTMLタグを設定する手順を解説します。
設定にカーソルを合わせるとサブメニューが表示されるので、［AddQuicktag］をクリックします。
入力欄が多いですが画像を参考に入力してください。
ボタン名：エディター上に表示される名前
ラベル名：エディター上に表示される名前
開始タグ：開始タグを入力
終了タグ：終了タグを入力
並び順：0/1/2と入力
ビジュアルエディター：チェックを入れる
post ：チェックを入れる
page：チェックを入れる
入力欄ははじめ1つしかありませんが、必要事項を入力し［変更を保存］をクリックすると、新たな入力欄が表示されます。
「AddQuicktag」の設定が完了すると、エディター上にさきほど設定したボタンが3つ追加されています。
ZEBLINE（赤）は赤いラインマーカーを設定したボタンという意味なので、違う色を設定した際は、カッコ内の色の名前を変更してください。
「AddQuicktag」でタグを呼び出す
設定にミスがないか実際にタグを呼び出して確認してみます。
テキストを範囲選択し、エディターに追加されたボタンをクリックします。
選択したテキストに対して、ラインマーカーのHTMLタグが挿入されるので、［プレビュー］をクリックしてラインマーカーが正常に動作するか確認します。
正常にラインマーカーが動けば成功ですが、もし動かない場合は、「AddQuicktag」の設定で入力ミスをしている可能性があるので、再度確認してみてください。
動くラインマーカーはスクロールしないと動作しないため、動作確認をする際は画像のように3行ほどのダミーテキストを入れてください。
「ZEBLINE」の活用方法
「ZEBLINE」の主な活用方法を紹介します。
アフィリエイター向けの活用方法
- 重要な箇所を知らせる
重要な箇所を知らせる
動くラインマーカーは注意を引き付けられるので、とくに読んでもらいたい重要な箇所に使うと検索ユーザーに読まれやすくなり、伝えたいことが伝わりやすくなります。
- 商品のメリット・デメリット
- 商品の値上げ・販売終了
- 緊急性のある情報
- その他重要なお知らせなど
下記に比較用のダミーテキストを用意したので見比べてみてください。
普通のラインマーカー
動くラインマーカー
どちらも同じ黄色のラインマーカーですが、動くラインマーカーの方がより強く視線を引き付けますし、アフィリエイトサイトにも活かせます。
「ZEBLINE」のレビュー
実際に「ZEBLINE」を使った上でのメリット・デメリットを紹介します。
メリット
- 通常のラインマーカーよりも注目を集められる
- 伝えたいことが伝わりやすい
- オシャレ感が出る
「ZEBLINE」の最大のメリットは、検索ユーザーの視線を集めて、伝えたいことが伝わりやすくなることです。
記事の中で、「ここはきちんと読んでほしい」というポイントがそれぞれあるはずなので、重要なポイントに使うのが効果的です。
また単純に、動きのあるサイトやページはオシャレ感が出ます。
デメリット
- クラシックエディター必須
- 多用すると逆効果
「ZEBLINE」はブロックエディターで使えないこともありませんが、かなり使い勝手が悪いため、基本的にはクラシックエディター専用と思った方がいいです。
普段からブロックエディターを使っている方は、「ZEBLINE」を使うために、プラグインの「Classic Editor」を使って、クラシックエディターを使えるようにする必要があります。
また動くラインマーカーをページのあちこちに多用すると、逆に何が重要なのかわからなくなるため、使いすぎには注意が必要です。
要望・改善点
- ブロックエディターへの対応
「ZEBLINE」がブロックエディターに対応すると、今よりもずっと使いやすくなります。
理想はエディター上でテキスト色や背景色などのように、カンタンに設定できることです。
こんな人におすすめ
- 大事なことをきちんと伝えたい方
- オシャレ感を出したい方
動くラインマーカーがあると、つい無意識に目で追ってしまいます。
無意識にユーザーの視線を集められるのは非常に強みになるので、ユーザーに記事の内容をきちんと理解してもらいたいと考えている方におすすめです。
まとめ
動くラインマーカーは検索ユーザーの視線を集められるので、伝えたいことが伝わりやすくなります。
現状はクラシックエディターでしか使えないプラグインですが、気になる方はぜひ使ってみてください。
コメント
コメント一覧 （3件）
こんにちは
ブログランキングからの訪問です。
マーカーいいですね。
分かりやすい説明です。
早速と取り入れたいと思います。
ありがとうございました。
使っている方のサイトと見て使いたかった機能でした。ありがとうございます。
Radianさん、コメントありがとうございます。
参考になったようで嬉しいです。
ぜひ使ってみてください。