HTMLとCSSでマーカー風アンダーラインを最速で設定する方法

2020年5月16日2021年4月1日

文字の背景に色を付けて目立たせる手法使ってますか？

僕はバリバリ使っています。

けど、最初から搭載されている機能を使うと、目立ちすぎるというか、おしゃれじゃない感じがします。

なんか「ここを読め！」的な雰囲気が強くて使いづらいんですよね。

 

最近のサイトを見ているとマーカー風のアンダーラインを引いているのをよく見かけます。

これくらいの目立たせ方がちょうどいいしおしゃれ。

 

僕のサイトにもこのマーカー風の下線を導入していきたいと思います。

 

HTMLとCSSを使ってマーカー風アンダーライン作成

マーカー風のアンダーラインを作成するにはHTMLとCSSをいじる必要があります。

HTML編

HTMLはWordPressの編集画面で編集します。

テキスト編集モードにしてから、目立たせたい文章を下のコードで囲むだけ。

 

ただ、これを毎回のように手で入力していては時間がかかります。

なので、プラグインの「AddQuicktag」に登録してすぐに使えるようにすると便利です。

※もし僕と同じテーマ「ルクセリタス」を使っているなら「定型文」機能を使えば楽です。

定型文機能の使い方は別の記事に詳しく書いています。

 

CSS編

次にHTML編で囲んだ部分のスタイルをCSSで指定します。

CSSににはこれをコピペしましょう。

これで囲んだ部分がマーカー風アンダーラインになっているはずです。

 

色を変えたい場合は「#ffff66」の部分を編集しましょう。

もちろん「class名」も「yellow」から別の名前にしておいた方がいいですよ！

マーカー風アンダーラインを設定してみて

これで大事な部分をやり過ぎない感じで目立たせることができます。

あまりにも便利だからって使い過ぎないようにしましょう！

 

黒板風囲いはこちらの記事で解説してます！

 

こんな感じ！

カッパ