ワードプレスで文字にマーカーを引きたい【初心者向け】

WordPress
この記事は約3分で読めます。

ワードプレスを使っていて、蛍光ペンでマークをするように、文字にマーカーを引きたい。

今回はそんな疑問にお答えします。

文字にマーカーを引くにはCSSを記述する必要がありますが、
マーカーだけであれば、スタイルシート(style.css)にCSSを追加せずに、
タグに直接書き込むこともできます。
それほど難しくないので、初心者でも挑戦してみるといいかと思います。

最後にCSSを記述せずに、プラグインを使うやり方も紹介するので、CSSに抵抗を感じる人は、最後だけ読んでください。

それでは、始めます。

マーカーの基本はこちら

<span style=”background:linear-gradient(transparent 60%, #ff9999 60%)”>
マーカーを引きたい文字
</span>

基本はこれだけです。さっそく試してみましょう。
マーカーを引きたい文字を
<span style=”background:linear-gradient(transparent 60%, #ff9999 60%)”>と
</span>で
囲みます。

プレビューで確認してみましょう。このようになればOKです。

コードの意味を分析してみよう

<span style=”background:linear-gradient(transparent 60%, #ff9999 60%)”>
マーカーを引きたい文字
</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(ゼブライン)

 

今回は、以上です。

タイトルとURLをコピーしました