【WPプラグイン】動くラインマーカーを使用可能にする「ZEBLINE」の使い方を徹底解説!

どうも、ひろもんです。

WordPressでサイトを作成する時に、”必ず使用するプラグイン”というのが誰でもいくつかあると思いますが、今回は私がほぼ必ず使用しているプラグインの一つである「ZEBLINE(ゼブライン)」というWordPressプラグインを紹介します。

ZEBLINEはほぼすべてのサイトで使用しているオススメのプラグインなので、記事を読んで気に入ったらぜひ活用してみてください。

ZEBLINEとは

「ZEBLINE」は動くラインマーカーを追加できるWordPressプラグインです。

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

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

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

ひろもん
画像と文章で構成されている動きのない記事の中でラインマーカーだけが動くので、読者の視線を自然に集められます。

 

ZEBLINEの使用方法

ZEBLINEの使用方法
ZEBLINEの設定画面に「このマーカーを使う時は、class:zebline-maker zebline-color-aを追加してください。」と書かれていますが、少しわかりづらいので端的に説明すると、「動くラインマーカーを使用したい箇所を以下のタグで囲ってね」ということです。

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

この例の場合はタグで囲ってある”テキスト”の部分に動くラインマーカーが適用されます。

3色のマーカーを使用できる

ZEBLINEの色の設定方法
設定画面の左上に「マーカーAの色」と書かれていますが、他にも「マーカーB」と「マーカーC」の設定もできるので、動くラインマーカーは全部で3色設定して使い分けられます。

マーカーの色は設定画面の右側にある7色をクリックしてもいいですし、右下のパレットをクリックして設定画面にない色を設定してもいいです。

3色を使用した例
テキストを囲うタグが同じように見えますが、よーく見ると「color-a」「color-b」「color-c」となっていて微妙に違います。

このタグの違いでマーカーの色を使い分けます。

<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のマーカーのスピードの設定
デフォルトではマーカーの動き出しから終わりまでの時間が2.5秒に設定されていますが、秒数を変更することで速くしたり遅くしたりできます。

また設定した秒数は動き出しから終わりまでの秒数なので、長い文章だとスピードが早くなり、短い文章だと逆にゆっくりになります。

ひろもん
使い始めた頃はゆっくりの方がいいと思い3.5秒に設定していましたが、長く使っていたらデフォルトのままでもいい気がしたので、今は2.5秒のまま使用しています。

 

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

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

ZEBLINEの詳細はこちら

「ZEBLINEの詳細はこちら」の部分がテキストリンクなので本来は点滅するはずですが、点滅する時としない時がありその条件がよくわかりません。汗

ひろもん
今は点滅していませんが、この記事の一番下に試しに貼り付けると点滅するんですよねー。イマイチ条件がわかりませんが、わかり次第追記しておきます。

 

ZEBLINEをワンクリックで使用する

ここまででZEBLINEの使用方法と設定方法について解説してきましたが、使用するたびにタグをコピペするのはちょっと手間が掛かるので、ここからはワンクリックのみで動くラインマーカーを使用可能にする方法を解説します。

使用するのは「AddQuicktag(アドクイックタグ)」という無料のWordPressプラグインです。

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

ZEBLINEのタグをワンクリックで挿入する方法
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の動作環境

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のバージョンを確認・変更する方法

ひろもん
古いPHPはリスクでしかないので、特別な理由がない限り最新バーションにした方がいいです。

 

ZEBLINEを使用メリット

ZEBLINEで得られる3つのメリット

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

ひろもん
「ここはしっかりと読んでほしい」という箇所があっても気づいてもらえなかったり流し読みされたら意味がないので、重要箇所に気づいてもらえるのは大きなメリットです。

 

今回は動くラインマーカーを使用できる、WordPressプラグインの「ZEBLINE」を紹介してきましたがいかがでしたか?

大事なことを書いても読者にそのことが伝わっているかはわかりませんが、少なくとも「ZEBLINE」を使えば読者の視線が自然にそこに向くので、しっかり読んでもらえる可能性が高まります。

手軽にサイトをパワーアップできるので、気になったらぜひ試してみてください。

 

 

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

Twitterでフォローしよう