WordPressで可愛らしい蛍光下線（アンダーライン）を引く方法

こんにちは、ライムスです(*^^*)

現在進行系でゴリゴリのアドセンサーとして複数のサイトを運営しつつ、アドセンスの稼ぎ方に特化した「アドセンスクエスト」というコミュニティーを運営しています。

自己紹介

主にGoogle AdSenseを主軸としたサイトで独立9年目。2022年12月に、運営サイト合計で月間1000万PV達成。現在10サイト以上運営。トレンド系のサイトは一つもありません。得意分野はアルゴリズムの大変動に強いサイト設計。ぼくの詳しいプロフィールはコチラをご覧ください。

この記事では、WordPressで可愛らしい蛍光下線（アンダーライン）を引く方法をお話するよ。

サイト内で可愛い蛍光アンダーラインが引けたらテンションあがりますよね。

WordPressで可愛らしい蛍光下線を引く方法

今回は、当サイトが活用しているWordPressのテンプレート「STORK」で非常に可愛らしい蛍光下線（アンダーライン）を引く方法について解説します。

ちなみに、どんな感じの蛍光下線（アンダーライン）になるかというと、

蛍光下線①

蛍光下線②

蛍光下線③

こんな感じで、非常に可愛い感じのアンダーラインを引くことができます( ´ ▽ ` )ﾉ

それでは、実際にWordPressのテンプレート「STORK」を使って可愛らしい蛍光マーカーを引く方法をご説明していきます。

①外観⇨カスタマイズをクリック

②追加CSSをクリックしてください。

③追加CSSにこのように以下のコードをコピペして貼り付けてください。

こちらのコードを全てそのままコピーして追加CSSに貼り付けて下さい。

⬇

/* —– 可愛い蛍光下線（ピンク） —– */

.pink {
background: linear-gradient(transparent 40%, #FAD5DC 40%);
padding-bottom: .2em;
font-weight:bold;
}

/* —–可愛い蛍光下線（黄色） —– */

.yellow {
background: linear-gradient(transparent 40%, #ffff8e 40%);
padding-bottom: .2em;
font-weight:bold;
}

/* —–可愛い蛍光下線（青） —– */

.blue {
background: linear-gradient(transparent 40%, #CBE9F5 40%);
padding-bottom: .2em;
font-weight:bold;
}

上記のコードの場合は、蛍光ラインの文字も勝手に太字になるように設定しています。文字の太さはそのままで蛍光ペンを使いたいときは”bold”を”normal”に変えてお使い下さい。

④その後、「AddQuicktag」のプラグインに以下の情報を追加してください。

「AddQuicktag」をWordPressに導入していない人は、非常に便利な機能ですので、プラグイン⇨新規追加で有効化してください。

ラインピンク





ライン青





ライン黄





☆注意事項☆

なぜか、上記のカラーコードをコピペをして「AddQuicktag」のプラグインに貼り付けると、以下のようになってしまいます（汗）

こちらを、以下のように修正してください。

shift＋２で以下のように変更してください。

⑤プラグインに追加すると、「テキスト」で記事を書く際に、下記のように蛍光マーカーが出現します。

「ビジュアル」では見れませんので注意してくださいね。

実際に装飾する際は、以下のように装飾したい文章をコードで囲ってください。

そうすると、以下のように可愛らしい装飾マーカーを引くことができます。

⑥もし、色を変更したい場合は、以下の赤枠の色コードを変更して下さい。

以上で、可愛らしい蛍光マーカをアンダーラインとして引く方法の解説は終わりです＾＾

最後までご覧いただきありがとうございました。

ABOUT US

アドセンスキング・ライムスアドセンスクエスト制作者

主にGoogle AdSenseを主軸としたサイトで独立11年目。月間1000万PV達成。現在20サイト以上の資産型サイトやトレンドブログを運営。運営している4サイトに大手出版社から商業出版のオファーがあり、1冊は既に出版済み、2冊目、3冊目は現在同時に執筆中。4冊目も来年出版予定。2024年9月、個人でできるSEO対策の最高峰 Googleナレッジパネルの認証、申請完了済（本名の方で） Google のナレッジパネルの申請が完了