[ZEBLINE]動くラインマーカーで読者の視線をガッチリ惹きつける!

どうも、ひろもんです。

サイトを作成する際、ライバルとの差別化や文章を読んでもらうための工夫が大切になりますが、ZEBLINE(ゼブライン)というWordPressプラグインを使うことで、それらをカンタンに行えるようになります。

私も複数のサイトで使用しているオススメのプラグインなので、ここで紹介したいと思います。

ZEBLINEとは?

ZEBLINEはWordPressプラグインで、インストールすると動くラインマーカーを使用することができます。

動くものを見るとついつい目で追ってしまいませんか?

文章の中でとくに読んでもらいたい部分などに動くラインマーカーを使うことで、読者が無意識の内に重要な箇所をしっかりと読んでくれて、読者に伝えたいことがより伝わりやすくなり、コンバージョン率UPにも繋がります。

動くラインマーカーはライバルとの差別化にもなりますし、なんと言ってもオシャレ感がでます。笑

ZEBLINEで設定できる3つのこと

ZEBLINEの詳細設定画面
ZEBLINEをインストール後、以下の3つを設定できます。

ZEBLINEの詳細設定

  • マーカーのスピード(デフォルト2.5秒)
  • マーカーリンク点滅の有無
  • マーカー色設定(3色まで対応)

マーカーのスピード

デフォルトではマーカーの動き出しから終わりまでの時間が2.5秒に設定されていますが、秒数を変更することでもっと速くしたり、遅くしたりすることができます。

マーカーリンク点滅の有無

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

マーカーリンクの点滅
ZEBLINEの公式サイトはこちらです。

上の「公式サイトはこちら」の部分がテキストリンクですが、リンク部分だけ点滅しているのがわかるかと思います。

 マーカーリンクの点滅は気づいたら機能しなくなっていました。今後のアップデートで直るかもしれませんが、現在はテキストにマーカーをしても点滅はしません。

マーカーの色

zeblineのマーカー色設定
設定画面の右側に7色のカラーパレットがあり、クリックした色がそのまま設定されます。

他の色を使用したい場合は、右下の絵の具のパレットをクリックすると好きな色のマーカーを設定できます。

ただし、設定できるのは3色までなので、使用頻度の高い3色を選んでください。

あまり奇抜な色を選んで逆に文章が読みづらくなっては元も子もないので、イエロー・オレンジ・グリーン・ブルー辺りが良いと思います。

もちろん設定したカラーはいつでも何度でも変更可能です。

マーカー色の設定は3色まで
デフォルトで用意されているレッドのラインマーカー
デフォルトで用意されているイエローのラインマーカー
デフォルトで用意されているグリーンのラインマーカー

ZEBLINEの使用方法

ZEBLINEの使用方法ZEBLINEの設定画面には「このマーカーを使う時は、class:zebline-maker zebline-color-aを追加してください。」と書かれています。

カラーは3色設定できるので、タグの[color-a][color-b][color-c]で使い分けます。

ZEBLINEの使用方法
<span class="zebline-maker zebline-color-a">レッドのラインマーカー</span>

レッドのラインマーカー

<span class="zebline-maker zebline-color-b">イエローのラインマーカー</span>

イエローのラインマーカー

<span class="zebline-maker zebline-color-c">グリーンのラインマーカー</span>

グリーンのラインマーカー

タグをワンクリックで挿入する方法

ラインマーカーを使用する度にタグをコピペするのは手間がかかってしまうため、WordPressプラグインのAddQuicktagを使用すると便利です。

AddQuicktagは登録したタグをワンクリックで呼び出せるプラグインで、ZEBLINEのタグを登録することで、3色すべてのラインマーカーをワンクリックで使用できるようになります。

タグをワンクリックで挿入する方法AddQuicktagにタグを登録すると記事投稿画面にボタンが表示されるので、あとはラインマーカーを使用したい箇所を選択しボタンをクリックするだけです。

AddQuicktagのインストール手順

AddQuicktagは無料プラグインなので、他のプラグインとインストール方法は同じです。

AddQuicktagのインストール手順

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

AddQuicktagの設定方法

AddQuicktagにZEBLINEのタグを設定する方法を紹介します。

AddQuicktagを有効化すると、WordPress管理画面の設定の項目に[AddQuicktag]が表示されるようになるので、クリックしてAddQuicktagの設定画面を開きます。

AddQuicktagの設定方法赤枠の部分が入力を必要とする箇所です。

入力箇所の説明

  • ボタンのラベル → 記事投稿画面に表示されるボタンの名前
  • 開始タグと終了タグ → ここにZEBLINEのタグを入力する
  • アクセスキーと番号 → 表示させたい順番に1・2・3と入力
  • ビジュアルエディター → チェックを入れる
  • post → チェックを入れる
  • page → チェックを入れる

あとは[変更を保存]をクリックして、AddQuicktagの設定が完了です。

タグをワンクリックで挿入する方法これで記事投稿画面にZEBLINEのボタンが表示されます。

ZEBLINEの動作環境

ZEBLINEの動作環境
  • WordPress 4.9 以上
  • PHP ver7 以上
  • Windows10/Mac OSX/Android7.11 以上
  • IE11以上/Chrome64/safari11.0.3 以上

WordPressについてはダッシュボードに更新のお知らせが表示されるため、ほとんどの方が最新バージョンにしているはずなので問題ありませんが、PHPのバージョンが古くてZEBLINEが動作しないという人がいるかもしれないので対応策を紹介します。

PHPのバージョンを確認・変更

ここではアフィリエイターの利用者が多いエックスサーバーを例にして解説します。
公式サイトエックスサーバーはこちら

PHPのバージョンを確認・変更する方法
まずはサーバーパネルにログインし[PHP Ver.切替]をクリックします。

 

PHPのバージョンを確認・変更する方法
ドメイン一覧が表示されるので、確認・変更したいドメインの右側にある[選択する]をクリックします。

 

PHPのバージョンを確認・変更する方法
ここで対象ドメインのPHPのバージョンを確認できます。

このサイトはすでに最新バージョンに変更していますが、5.6などが表示された場合は最新バージョンの7以上に変更し、[PHPバージョン切替(確認)]をクリックしてください。

これでPHPが更新され、ZEBLINEが使用できるようになります。

PHPを更新しないリスク

PHP5.6とPHP7.0のセキュリティサポートは2018年中に切れるため、今後脆弱性が発見されてもセキュリティは更新されず、無防備状態で放置されることになります。

PHPのセキュリティサポート期間
PHP5.6 → 2018年12月31日にセキュリティサポート終了
PHP7.0 → 2018年12月03日にセキュリティサポート終了

以下はPHPのバージョンごとの説明ですが、PHP7以下のサイトであれば、最新バージョンに更新するだけでサイトの表示速度が高速化します。

私は所有しているすべてのサイトを最新バージョンに更新して不具合や問題は一切ありませんでしたが、更新作業が心配な方は必ずバックアップを取ってから更新してください。

PHPのバージョンを確認・変更する方法

まとめ

ZEBLINEを使うメリット

  • ライバルサイトと差別化できる
  • 訴求ポイントが明確に読者に伝わる
  • コンバージョン率UP

今回は私がほぼすべてのサイトで使用している、WordPressプラグインのZEBLINEを紹介してきましたが、読者に記事をしっかり読んでもらえるというのは大きなメリットです。

大事なことを書いても、読者にその部分が大事だと気づいてもらえなかったら意味がないので。汗

価格も安いので、気になったらぜひ試してみてください。
サイトのオシャレ感って実は大事なんですよ。笑

 

 

この記事がお役に立ちましたら、応援クリックお願い致します

Twitterでフォローしよう