今回は僕のような超ワードプレス初心者のためにZEBLINEの便利な使い方を紹介していきます！
まずはじめに
WING(AFFINGER5)アフィンガー５でZEBLINEは使えます！
↑こんな感じです。
ただし、ワードプレスの超初心者、コード？わかりません！的な人にとって手とり足取り解説しています。この記事があれば導入につまずくことはない！
「そう2BYMみたいに…」
※あらかじめ ワードプレスでの設定方法ですが、WING（AFFINGER5）アフィンガー５のテーマでの設定です。
ZEBLINEをAFFINGER5で便利に使えるように設定スタート！
さっそくはじめていきます！
スタートはZEBLINEを購入したあとの流れからスタートします。購入は通常のネット通販みたいなものなので簡単だと思います。
購入すると、メールが届くのでそこからマイページに入ってダウンロードしてください。
１．ダウンロードしたファイルを解凍しよう!
まずは購入したサイトからダウンロードしたファイルを解凍してください。
２．ZEBLINEプラグインをインストールしよう！
PCでファイルを解凍したら、次はブラウザからワードプレスにログインしよう！
そして左のメニューの”プラグイン”をクリック
次に新規追加をクリック
下の画面が開くので「プラグインのアップロード」をクリック
「ファイル選択」をクリック
一番最初に解凍してできたフォルダの中にある「zebline.zip」を選択して、開くをクリック
ファイル名に「zebline.zip」が反映されてることを確認して「今すぐインストール」をクリック
次に下の画面になるので青色のボタン「プラグインを有効化」をクリック
１０秒程度経つと、有効化されました。的なメッセージが出ればインストール完了です。
インストールが完了すると左のメニューに「ZEBLINE」が出てきますのでまずはクリックしてみてください。
ZEBLINEを使ってみる
ここで呪文か、はたまた教室の場所か、なんだかわからない「class」という言葉が出てきますが、無視しましょう。
とりあえず↓下のコードをコピーしてください。 ＜span＞なんちゃらって書いてある灰色の部分です。あとで使います。
<span class="zebline-maker zebline-color-b">ZEBLINEのデモです。マーカーのスピードやカラーも好きな色に変更できます。</span>
Classic Editorのおすすめします。
ここで、もしかしたら、というかワードプレスVer5.xxの標準エディタ（投稿画面）の場合はもっとシンプルな画面が表示されてると思います。それは2BYMは「Classic Editor」というプラグインをインストールしているからです。
このプラグインはワードプレス公式のプラグインで昔の使い慣れた投稿画面にもどすことができます。
AFFINGER5の作成者でもあるENJIROGのENJIさんもClassic Editor を推奨してるのでインストールすることをおすすめします。
インストールの方法は先程行ったZEBLINEの手順と同じです。
有効化をすると下記画面と同じ投稿画面になります。
そして今度はメニューから「投稿」をクリックして下の画面に行ってください。
クリックしたら、「ビジュアル」と「テキスト」というタブがあるので「テキスト」をクリック
「テキスト」タブを選択したら、先程コピーしたコードを本文に貼り付けしてください。
貼り付けたらプレビューを押してみてください。
ブラウザに新しいタブが開くのでそこを見てください。
下のような画面が反映されれば成功です。
「AddQuicktag」で動くマーカーを便利に
でも、いちいちこんな呪文貼ってられない。。面倒くさい。そう思いませんか？2BYMは思いました。
なんとそれを解決する、もっと簡単に動くマーカーを使う方法がありました。
それは「AddQuicktag」というプラグインです。ワードプレス公式のプラグインではないですが、ワードプレスの公式サイトで紹介されていますので安心して使っています。
この「AddQuicktag」も同様にインストールすることをおすすめします。
インストール方法もZEBLINEと同様です。
AddQuicktagを使ってZEBLINE動くマーカー便利に使えるようにしよう！
「AddQuicktag」をインストールしたらメニューに「AddQuicktag」が出てくるのでクリック
「AddQuicktag」の設定画面です。
①ボタンの名前を決める とりあえず マーカー橙 と入れてください。
②次にラベル名を入力 これは未入力でもOKです。あまり使いません。
③下の画像の②の部分に <span class="zebline-maker zebline-color-a"> をコピーして貼り付けてください。
④下の画像の②の部分に </span> をコピーして貼り付けてください。
⑤の部分に「１」を入力してください。これはリストで出てくる順番になります。
⑥の部分にクリックしてチェックを入れてください。ここにチェックですべての部分にチェックが入ります。
⑦「変更を保存」をクリック
投稿画面にもどります。
①適当な文字を投稿画面に入力してください。
※先程の「ビジュアル」「テキスト」のタブが「ビジュアル」になっていることを確認してください。
②次に適当に入力した文字を選択してください。クリックしてびーって
適当に入れた文字を選択した状態で「Quicktag」という項目をクリック
するとさきほど作成した「マーカー橙」がリストに現れます。
「マーカー橙」をクリック
先ほどと同様にプレビューでチェックしてみてください。
これでAFFINGER5で簡単に動くマーカーが呼び出せるようになりました！
まとめ
無事にワードプレス、AFFINGER5でZEBLINEを簡単に使えるようになりましたでしょうか？
自分がつまずいたところもできるだけわかるように解説してみました。
最後に、AFFINGER5をまだ導入されていない方がいましたら超おすすめです！
かなり多機能なんですが、超初心者の2BYMにも使えるように配慮されています！
ZEBLINEも有料ですが、無料の動くマーカーで挫折したので購入しました！3,000円で複数サイトに使えるのであれば安いですよねｗ
以下、リンク貼っておきます。それでは