ラインマーカープラグイン ZEBLINE(ゼブライン)とはなに?使い方!

ZEBLINE(ゼブライン)表紙 買ってみた情報商材の紹介

どーもーミスターMです。

 

今回もインフォトップさんで売られている商品を紹介します。

 

ノウハウではなく、ブログを目立たせるのに便利なツールを見つけましたので参考にしてみてください。

 

金額の事を言うのはなんですが、安いです(笑)

 

その商品はラインマーカーというもので、どういうものを言うのかというと

 

こういうものを言います。

 

ラインマーカープラグイン ZEBLINE(ゼブライン)

 

こういう風に、スクロールするとクラス指定をした箇所に、サッと蛍光ペンを引いたような動的なアニメーションをつけることができるようになるツールです。

ラインマーカープラグイン ZEBLINE(ゼブライン)とはなに?

ZEBLINE(ゼブライン)とは、ワードプレスのプラグインになります。

 

どのようなプラグインかというと

 

スクロールすると指定した箇所に蛍光ペンを引いたようなアニメーションをつけることが出来ます。

 

こちらのZEBLINE(ゼブライン)は、

 

前回、紹介したCLICKLIS(くりっくりす)を作られたWEB SUPPORT 森田勇規さんが作られたものです。

 

CLICKLIS(くりっくりす)とはこのようなものになります。

WordPressプラグインCLICKLIS(くりっくりす)とは

WordPressプラグインCLICKLIS(くりっくりす)とは
CLICKLIS(くりっくりす)を買ってみて、わからないなと感じたところなどを書いていきます。 しかし、私は悩みましたけど、ある程度、詳しい方は簡単なんだろうなと思ってしまいます。 それ程CLICKLIS(くりっ...

CLICKLIS(くりっくりす)は簡単に設定できたのですが、ZEBLINE(ゼブライン)は簡単に使えませんでした。

 

という事で、次はZEBLINE(ゼブライン)の使い方を説明していきますね。

ZEBLINE(ゼブライン)の使い方

使い方を説明したサイトはあるんです。

 

が、私のような人間は書いてある事が理解できませんでした。

 

ちなみに私がわからなかったサイトはこちらになります。

ZEBLINEの使い方マニュアル【設置方法とサンプル】
ZEBLINEサンプル リンクなし(点滅なし) ZEBLINEの点滅なしカラー1デモです。マーカーの速度や色も変更できます。 ZEBLINEの点滅なしカラー2デモです。マーカーの速度や色も変更できます。 ZEBLINEの点滅

 

サイトにも設定の仕方が書いているのですが、こちらでも

 

ZEBLINE(ゼブライン)の設定は下の通りです。

ZEBLINE詳細設定GIF

これだけで設定すればすぐに使えると思っていました。

 

私は一番上だけ使おうと思っていたのでマーカーAのところだけ設定しました。

 

が、これでは使えませんでした(当たり前です)

 

で、ここで分かったのですが、このツールはHTMLで動く仕組みでした(笑)

 

私は上の設定さえすればすぐに使えると思っていたんですね。

HTMLの設定の仕方!

<spanclass=“zebline-maker zebline-color-a”>ZEBLINEのデモです。</span>

このコードをテキストに入れないといけなかったんです。

 

これをテキストに入れるとこのように表示されます。

 

ZEBLINEのデモです。

 

zebline-maker zebline-color-aのaが先ほど設定した、マーカーaの部分で設定したものになります。

 

つまり、aのところをb,cにしたらb,cで設定したマーカーになります

 

ここまで理解するまでに2日かかりました。

 

このツールはワードプレスで使うプラグインでHTMLで動作するものだったんですね。

 

買った後にこんなですからね(笑)

 

で、これだと結構めんどくさいんですよね。

 

いちいちHTMLを設定しないといけませんからね。

 

という事で、もっと簡単に設定できるようにしましょう。

ZEBLINE(ゼブライン)をワンタッチで利用する方法

いちいちテキストにいれるのは大変です。

 

どちらかというと記事作成に時間をかけたいのに、これだと結構時間がかかります。

 

という事で、

 

AddQuicktag

 

というプラグインで簡単にラインマーカーを入れられるようにしましょう。

 

プラグインの新規追加から入れていきましょう。

クリックして、AddQuicktagと入力するとすぐに出ます。

こんな画像のものがAddQuicktagになりますので、クリックしてダウンロードしましょう。

ダウンロードできますので、有効化しましょう。

クリックすると見たことのある画面になります。

AddQuicktagにショートコードを追加する方法

ここまでも難しいだろうなと尻込みしていたんですが、意外と簡単でした。

 

HTMLというのがわかるまでに比べれば簡単です。

 

開始タグというのはこちら

<spanclass=“zebline-maker zebline-color-a”>

終了タグというのはこちら

</span>

ここまで書けば、ほとんどの方が使えると思うのですが、私は使えませんでした。

 

理由はこちら

名前を入れていなかったから、表示されませんでした。

 

名前を入れたらこのように表示されます。

後は、ラインマーカーを入れたいところを、コピーするような要領で指定して、上のボタンを押せば色が変わります。

ZEBLINE(ゼブライン)で気をつけること

ここまで、出来れば簡単にZEBLINE(ゼブライン)を使いこなせると思うのですが、私はここでまた問題が

 

コピーする要領で範囲を指定して、AddQuicktagのところから好きなマーカーを選ぶだけなのですが、いくらしてもできません。

 

文字だけが大きくなったりするだけで、プレビューで見ても変化がありません。

 

何でだろうと悩んでいて、試しに一行づつ設定してみたんですね。

 

そうしたらうまくいきました。

 

それまでは、複数行まとめてコピーする要領で範囲を設定して、AddQuicktagで選んでいたんですが、それがいけなかったようです。

 

それからは一行ごとに設定しております。

 

私は文章を見やすいように、大きめに改行しているのですが、まとめて改行するとラインマーカーはうまく作動してくれないようです。

 

私のように改行が多い方は1行ごとに設定してみてください。

 

そうすればちゃんとラインマーカーがうごいてくれます。

まとめ

ZEBLINE(ゼブライン)の使い方について書いていきました。

 

今回、自分が使ってどこにも書かれていなくて、理解するのに時間がかかりました。

 

CLICKLIS(くりっくりす)の時はワードプレスのビジュアルに入れても作動していたので、ZEBLINE(ゼブライン)は焦りました。

 

WordPressプラグインCLICKLIS(くりっくりす)とは

WordPressプラグインCLICKLIS(くりっくりす)とは
CLICKLIS(くりっくりす)を買ってみて、わからないなと感じたところなどを書いていきます。 しかし、私は悩みましたけど、ある程度、詳しい方は簡単なんだろうなと思ってしまいます。 それ程CLICKLIS(くりっ...

 

ZEBLINE(ゼブライン)はテキストにコードを入れないと利用できない。

 

そして、AddQuicktagというプラグインを使うと簡単にラインマーカーを入れることが出来るというものでした。

 

逆を言うとAddQuicktagを使わないとかなり大変な作業になってしまいます。

 

ちょっとしたことなのですが、使えるようになるとならないのでは作業効率が段違いに違いますね!

相談はこちらから