読まれる記事の書き方

【目を惹きつける】動くマーカー!『ZEBLINE』の太さ・グラデーションをカスタム

更新日:

読者の目を惹きつける「ZEBLINE」は「コンバージョン率」や「PV数UPに繋がる!」と有名ブロガーの間で話題になり、今人気を集めている注目のプラグインです。

本記事では、ZEBLINEのマーカーの太さ・グラデーションを好きにカスタマイズする方法を紹介します。

ZEBLINEのダウンロード・基本設定

カスタマイズ方法だけ知りたい方は、ボタン押して下へ飛んでください。


ZEBLINEはダウンロード商品なので、購入後からWordPressに導入するまでの方法を説明します。
購入すると以下の画面から、zipファイル形式でダウンロードします。

ユキタケ
フォルダの中身を解凍する必要はありません。

WordPressへデータをアップロード手順は、プラグイン→新規追加

「file_78811」がZEBLINEのファイル名なので、これをアップロードし有効化。
するとメニューバーに「ZEBLINE」が追加されます

好きなカラー設定

①マーカースピード
本サイトでは2.0秒に設定してあります。

②マーカーリンクの点滅
リンク上にマーカーを引く場合は□にチェックをするのがオススメです。

例)ページの冒頭へジャンプ!←カーソルを合わせる

③マーカーの色
右側に7色の選択肢がありますが、カラーコードから自由に色を選ぶ事もできます。

④マーカーに当てたいタグorクラスorID
投稿記事の編集画面での表示方法を設定できます。
僕の使っているテーマでは、編集画面で普通のマーカー表示と色がごっちゃになってしまうので、あえて入力はしていません。

入力が終わったら「変更を保存」します。

プラグイン設定を入れただけでは、記事作成中にクラスコードを毎回コピーしに画面を切り替える必要があるので不便です

これから記事の執筆画面に、ボタン1つでZEBLINEを呼び出す方法を紹介します。

ツールバー内にZEBLINEを呼び出す

ここではAddQUicktagというプラグインを使用しています。

参考
【コピペが不要に!】AddQuicktagでリンクやコードを一瞬で挿入する

続きを見る

設定画面での入力は以下の通りです。

ノーマルの文字サイズで表示させる場合

<span class="zebline-maker zebline-color-a"></span>

ラインマーカー上の文字を太字で表示させる場合

<strong class="zebline-maker zebline-color-a"></strong>

嫁(仮)
名前はプラグイン名+色、みたいに簡単に分かるようにするといいよ!

ラインマーカーのカスタマイズ

ここからPHPファイルを少しだけいじります。

カスタマイズには「FTP編集ソフト」あるいはロリポップなど、あなたが使用しているサーバーへアクセスして、FTPファイルを編集する必要があります。

プラグインが壊れる事は滅多に無いと思われますが、編集時のトラブルは自己責任でお願いします

参考記事
『WordPressのバックアップ』FileZillaの使い方【Mac版】

続きを見る

始めにZEBLINEの表示設定コードが書かれている部分を画面に呼び出しましょう。

コードの書かれている場所は、自分のサイト名のフォルダ→wp-content→plugins→zebline→settings.phpを開く。

"マーカーA"の表示を変更するので、267行目あたりの「zebline-color-a」と書かれた部分の下のコードを編集します。
編集箇所は2つだけです。

step
1
ラインマーカーの太さを変更

修正

background: linear-gradient(transparent 50%,
↓  ↓  ↓
background: linear-gradient(transparent 65%,

267行目あたりのtransparent 50%の数値を変更します。
0%に近づくほどマーカーは太くなり、100%に近づくほど線は細くなります。

step
2
ラインマーカーのグラデーションを変更

修正

?> 50%);
↓ ↓
?> 80%);

274行目あたりの?>50%の数値を変更します。
数値が0%に近いほどマーカーの境界線はハッキリ表示され、100%に近いほどマーカーの境界線がぼやけて表示されます。

マーカーB・Cも同様に数値を変更するだけで表示が変化できます。

変更でスマホ表示が少し崩れた場合

黄色マーカーの様に、スマホ表示の時だけマーカーのバックに黒い影が現れる。

緑マーカーの様に綺麗な境界にしたですよね。

そんな不具合が起きた時の対処法は、

transparent 80%、?> 80%);

上記の様に%の数字を同じにする事で、影の部分は表示されなくなります。

まとめ

ZEBLINEの表示はsettings.phpの「transparent 50%」「?>50%」の数値をいじることで、マーカーの太さ・グラデーションの広がり具合を調整できます。

マーカーが太すぎて文字が見えづらいと思ったら、今回の方法を参考にカスタムしてみてください。

Twitterで最新情報をGET!

-読まれる記事の書き方

Copyright© BLOG-SEED , 2021 All Rights Reserved.