超簡単！コピペで使える文字に蛍光ペンのアンダーラインマーカーを引く
ホームページを作るときや、ブログを書くときに強調したい文字・文章に蛍光ペンのマーカーラインを引いて綺麗で見やすくしたいときがありますよね。
アンダーラインやカッコを付けて強調してもいいですが、色が黒だし、アンダーラインは細いし、もう少し強調させたいときに蛍光ペンのアンダーラインは視認性がいいためポイントに使うといいです。
CSSとHTMLを使う方法とHTMLだけで文字装飾する方法をお伝えします。
目次
CSSとHTMLを使う方法
CSSを使うことで、変更したいときにCSSの内容を変更することで一括して変更修正することができます。
CSS
CSSに書くコードは、Style.cssに記載するか、WordPressの場合は【外観】→【カスタマイズ】にある【追加CSS】に記載します。
以下のコードを参考にカスタマイズして使ってみてください。
記載するときに変更する必要がある部分です。
.marker-pink {
HTMLで使うclass名なので分かりやすくします。マーカー＋色にしておくと分かりやすいです。
transparent 60%
マーカーの太さを指定します。太いほうがいい場合は０に近くし、細いほうがいいときは100に近いほうの数字にします。
#ff99cc 0%
マーカーのカラーコードを記載します。
HTML
WordPressのテキストエディターのテキストタブにHTMLを書いてアンダーラインを表示します。
<span class=”marker-pink”>テキスト</span>
HTMLのみ使う方法
HTMLのみでマーカーアンダーラインを引く場合、カラーやアンダーラインの太さを変更するときに一つ一つ修正する必要があります。
以下のHTMLを使うことで表示できます。
<span style=”background: linear-gradient(transparent 60%, #ff99cc 0%);”>テキスト</span>
まとめ
蛍光ペンのようなアンダーラインマーカーを引く方法を紹介しましたが、どうでしょうか。
色々なカラーを使ったり、あちこちに使ってしまうと何がポイントなのか分からなくなってしまうので、アンダーラインマーカーを使うルールを決めて使うといいです。
その他のおすすめ記事
