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

文字の背景に色を付けて目立たせる手法使ってますか?
僕はバリバリ使っています。
けど、最初から搭載されている機能を使うと、目立ちすぎるというか、おしゃれじゃない感じがします。
なんか「ここを読め!」的な雰囲気が強くて使いづらいんですよね。
最近のサイトを見ているとマーカー風のアンダーラインを引いているのをよく見かけます。
これくらいの目立たせ方がちょうどいいしおしゃれ。
僕のサイトにもこのマーカー風の下線を導入していきたいと思います。
HTMLとCSSを使ってマーカー風アンダーライン作成
マーカー風のアンダーラインを作成するにはHTMLとCSSをいじる必要があります。
HTML編
HTMLはWordPressの編集画面で編集します。
テキスト編集モードにしてから、目立たせたい文章を下のコードで囲むだけ。
1 |
<span class="marker-yellow-hoso">目立たせたい</span> |
ただ、これを毎回のように手で入力していては時間がかかります。
なので、プラグインの「AddQuicktag」に登録してすぐに使えるようにすると便利です。
※もし僕と同じテーマ「ルクセリタス」を使っているなら「定型文」機能を使えば楽です。
定型文機能の使い方は別の記事に詳しく書いています。
CSS編
次にHTML編で囲んだ部分のスタイルをCSSで指定します。
CSSににはこれをコピペしましょう。
1 2 3 4 |
/*マーカー黄色*/ .marker-yellow-hoso { background: linear-gradient(transparent 60%, #ffff66 60%); } |
これで囲んだ部分がマーカー風アンダーラインになっているはずです。
色を変えたい場合は「#ffff66」の部分を編集しましょう。
もちろん「class名」も「yellow」から別の名前にしておいた方がいいですよ!
マーカー風アンダーラインを設定してみて
これで大事な部分をやり過ぎない感じで目立たせることができます。
あまりにも便利だからって使い過ぎないようにしましょう!
黒板風囲いはこちらの記事で解説してます!
こんな感じ!
カッパ
ディスカッション
コメント一覧
まだ、コメントがありません