文章に蛍光ペン風のアンダーラインを引く方法

こんにちは。
『やさしいブログの作り方』の松田です。

学生時代、教科書の重要なところに蛍光マーカーをひいた記憶がうっすらと残っています（笑）

ホームページやブログの文章でも蛍光マーカーのようにテキストの背景に色を付けて目立たせる方法があります。

以前、テキストと同じ縦幅に色を付ける（テキストに背景色を付ける）というやり方をご紹介したことはあるのですが、今回はアンダーライン風にマーカーをつけるやり方をご紹介します。

アンダーライン風に蛍光マーカーをひく

こんな感じです。＾＾


いくつか色のパターンを掲載しておきますので、お好みのものをコピーしてご利用下さい。

記事に貼り付ける際は、下記の記述をコピーして、記事編集画面をHTMLモードに切り替えて貼り付け、再度標準モードに変更すれば反映されます。

<span style="background: linear-gradient(transparent 60%, #ff66ff 60%);">ここに文章</span>

<span style="background: linear-gradient(transparent 60%, #ffff00 60%);">ここに文章</span>

<span style="background: linear-gradient(transparent 60%, #00ffff 60%);">ここに文章</span>

<span style="background: linear-gradient(transparent 60%, #00ff00 60%);">ここに文章</span>

<span style="background: linear-gradient(transparent 60%, #ee82ee 60%);">ここに文章</span>

<span style="background: linear-gradient(transparent 60%, #f08080 60%);">ここに文章</span>

２箇所記載のあるカラーコードを好みのものに変えていただいても利用可能です。＾＾


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

お知らせ
ご登録頂くと、ＬＩＮＥ＠スタートアップセミナーをプレゼント！
やさしいブログのＬＩＮＥ＠のご登録はこちらから

ＳＮＳを効果的に使うためのポイントが無料で学べます！
ネット集客を軌道に乗せるためのＳＮＳ活用講座（全７回）