WordPressでプラグインを使わずに、文字にアンダーラインを引く方法(蛍光ペン、マーカー、ハイライト)_100052

以前、 WordPressでプラグインの使用をおすすめしない理由と記載しましたが、このマーカーについても同様になります。

ラインを引けるプラグインもたくさんあると思いますが、そのプラグインを使わなくなった場合、これまでの記事にせっかく引いてきたラインがすべて消えてしまうことになるのです。

そのような事態を防ぐために、プラグインは使わずにcssでラインを引く方法を紹介します。

---

最初に「子テーマ」の「css」ファイルに以下のコードを追記してください。

.pen-y {
        background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFCC33 0%) repeat scroll 0 0;
}

「pen-y」の部分は私が「ペン-YELLOW(黄色)」という意味でつけている名前なので、ご自身のわかりやすい名前に変更していただいて問題ありません。

---

そして、WordPressの「コードエディター」で、ラインを引きたい文字を以下のコードで囲みます。

<span class="pen-y">
ラインを引きたい文字
</span>

「pen-y」の部分をご自身でつけた名前にしている場合は、その名前に書き換えてください。
「ぺん」と入力すると「<span class=”pen-y”>文字</span>」などと変換されるように辞書登録しておくと大変便利です！

---

そうすると、 このように表示されます。

これはあくまでも一例でして、マーカーの色や太さや透明度などをご自由に変更していただけます。

例えば、

.pen-p {
        background:rgba(0, 0, 0, 0) linear-gradient(transparent 20%, #FF2B95 90%) repeat scroll 0 0;
}

※太さ「20%」、色「ピンク」、透明度「90%」
とした場合、

このようなイメージです。

---

「pen-y」「pen-p」など、名前を増やして色や%の数値を変えると、様々なバリエーションのアンダーラインを引くことができますので、是非たくさん作って活用してみてください♪