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