ワードプレスを使っていて、蛍光ペンでマークをするように、文字にマーカーを引きたい。
今回はそんな疑問にお答えします。
文字にマーカーを引くにはCSSを記述する必要がありますが、
マーカーだけであれば、スタイルシート（style.css）にCSSを追加せずに、
タグに直接書き込むこともできます。
それほど難しくないので、初心者でも挑戦してみるといいかと思います。
最後にCSSを記述せずに、プラグインを使うやり方も紹介するので、CSSに抵抗を感じる人は、最後だけ読んでください。
それでは、始めます。
マーカーの基本はこちら
マーカーを引きたい文字
</span>
基本はこれだけです。さっそく試してみましょう。
マーカーを引きたい文字を
<span style=”background:linear-gradient(transparent 60%, #ff9999 60%)”>と
</span>で
囲みます。
プレビューで確認してみましょう。このようになればOKです。
コードの意味を分析してみよう
マーカーを引きたい文字
</span>
それでは、コードの意味を分析してみましょう。
60%は線の太さです。0～100%で設定をします。0%が最も太くなります。
#ff9999は色の指定です。色は6桁のアルファベットと数字の羅列で表しますが、下記のサイトが分かりやすいです。
⇒ 原色大辞典
一番後ろの60%は透明度の指定です。数字が大きくなるほど透明度は上がります。線の太さが細めだと、数値を変えても、それほど変化がないので、気になる人は、太さを0%にしてから、透明度を動かして、比べてみるといいでしょう。
(transparent 0%, #ff9999 0%) ⇒ マーカーを引きたい文字
(transparent 30%, #ff9999 0%) ⇒ マーカーを引きたい文字
(transparent 60%, #ff9999 0%) ⇒ マーカーを引きたい文字
(transparent 100%, #ff9999 0%) ⇒ マーカーを引きたい文字
(transparent 0%, #ff9999 0%) ⇒ マーカーを引きたい文字
(transparent 0%, #ff9999 30%) ⇒ マーカーを引きたい文字
(transparent 0%, #ff9999 60%) ⇒ マーカーを引きたい文字
(transparent 0%, #ff9999 100%) ⇒ マーカーを引きたい文字
プラグインもあります
htmlのコードを書くことに抵抗を感じる人は、プラグインを使う方法があります。
無料のプラグインだとTechnoteさんが開発されたものがあります。
⇒ WordPressでマーカーアニメーション
有料のプラグインだとZEBLINE（ゼブライン）というものがあります。2,980円（税込）です。
⇒ ZEBLINE（ゼブライン）
今回は、以上です。
