こんにちは。シンプルライフ ナビです。
この記事では、ブログの記事に蛍光ペン風のアンダーライン（下線）を引く方法をご紹介します。簡単ですよ！
好きな色、好きなデザインの下線を作って、あなたのブログにも取り入れてみましょう！
記事中の「CSSコード」や「HTMLコード」をコピペして（無料版でも）使うこともできます。*1
- ブログの記事本文でアンダーライン（下線）を引く方法
- 蛍光ペン風のアンダーライン（下線）を使えるように設定する｜コードのコピペ利用もOK
- 蛍光ペンの色や太さのカスタマイズや多色展開の方法
- まとめ｜蛍光ペン風のアンダーライン（下線）装飾を簡単に使う方法
ブログの記事本文でアンダーライン（下線）を引く方法
いろんなブログを見ていると、記事の本文で強調したい部分に蛍光ペン風のアンダーライン（下線）の装飾がされているのを目にします。
自分のブログでも同じように使いたい、そう思ったことはありませんか？
はてなブログ標準のアンダーライン（下線）
はてなブログの場合、アンダーラインの設定は簡単です。
記事作成画面から、下線を引きたい部分を選択して「アンダーライン」アイコンをクリックすればOKです。
選択した文章に、アンダーライン（下線）が付きます。
でも、シンプルなラインしかつきません。
蛍光ペン風のアンダーライン（下線）
少し細かい設定が必要になりますが、あなたのブログに合わせて、好きな蛍光ペンを作成することが可能です。*2
手順に沿って進めれば、簡単に設定できるので安心してください。
＜作成例＞
- 水色の
蛍光ペン - 黄色の蛍光ペン
- ピンクの
蛍光ペン
蛍光ペン風のアンダーライン（下線）を使えるように設定する｜コードのコピペ利用もOK
蛍光ペン風のアンダーライン（下線）を使うには、2つの方法があります。
どちらかを選んで、あなたのブログで設定してみましょう。超初心者の人は、「記事ごとに設定する」方法を選んでおけばOKです。
| 変更項目 | ブログ内で共通の設定をする | 記事ごとに設定する |
|---|---|---|
| メリット |
|
|
| デメリット |
|
|
まず、一番使いやすい色である、黄色の蛍光ペンを設定する方法を例にして説明していきます。
なお、設定色は蛍光色のほか、通常の色や、淡い色など、好きな色に変更することができます。
ブログ全体に共通の蛍光ペンのアンダーラインを使えるようにする
ブログ全体に共通の蛍光ペンのアンダーラインを設定する場合（全ての記事で使えるようにする場合）は、CSSのカスタマイズが必要になります。
次のCSSコードをコピーして、「デザインCSS」に追記しましょう。
article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 50%);
}
ダッシュボード画面 → デザイン → カスタマイズ → デザインCSS にすすみ、既存のコードを消さないように注意して、既存のコードの後ろにCSSコードを追記（保存）してください。
そして、記事作成画面で、蛍光ペン風のアンダーラインを引きたい部分を<u></u>で囲んでください。
ダッシュボード画面 → 「記事を書く」または「記事を管理」画面から記事作成画面をだし、「HTML編集」画面を出す。
そして強調したい文字を<u></u>で挟んでください。
プレビュー画面にすると、黄色の蛍光ペン風のアンダーラインが引けていると思います。
簡単にできましたね！
記事ごとに蛍光ペンのアンダーラインを設定する（CSS不要。超初心者向き）
続いて、記事ごとに蛍光ペン風のアンダーラインを設定する方法をご紹介します。
CSSにコードを追記するとかよくわからない、というブログの超初心者の人でもできる、おすすめの設定方法です。
CSSを使わなくても蛍光ペン風のアンダーラインを使えます。
次のHTMLコードを、「記事を書く」または記事作成画面の「HTML編集」画面にコピペしてください。（1記事に1つでOK）
<style>
u{
text-decoration: none;
background: linear-gradient(transparent 50%, yellow 50%) !important;}
</style>
下記の例の場合、<p><作成例></p>よりも上の位置に入れておいてください。
そして、記事作成画面で、蛍光ペン風のアンダーラインを引きたい部分を<u></u>で囲んでください。（複数箇所で利用OK）
ダッシュボード画面 → 「記事を書く」または「記事を管理」画面から記事作成画面をだし、「HTML編集」画面を出す。
そして強調したい文字を<u></u>で挟んでください。
プレビュー画面にすると、黄色の蛍光ペン風のアンダーラインが引けていると思います。
<u></u>で強調したい部分を挟むのは、CSSを使う場合と同じですが、CSSを使わなくても同じように簡単に蛍光ペン風のアンダーラインを設定できました！
蛍光ペンの色や太さのカスタマイズや多色展開の方法
蛍光ペン風のアンダーライン（下線）の装飾を使えるようになりましたか？
表示されることを確認できたら、あなたのブログデザインに合わせて、色や太さを「カスタマイズ」することができます。詳しく見ていきましょう。
蛍光ペンのアンダーラインの色や太さをカスタマイズする方法
それでは蛍光ペンの色を好きな色にしたり、太さを変えてみましょう。
CSSコードにも、HTMLコードにも、共通の内容があったことに気がつきましたか？赤色の部分が、カスタマイズしたい内容に合わせて変更する部分です。
background: linear-gradient(transparent 50%, yellow 50%)
数字の％の部分で蛍光ペンの太さを変えることができます。無色（透明）部分の割合を数字部分にセット（２箇所）し、色を指定すればOK。
例えば黄色ペンの太さを文字の30％にしたい場合は transparent 70%, yellow 70% にします。（yellow 30%ではないので注意）
＜解説＞
| 項目 | 内容 |
|---|---|
| transparent 50% | 無色の部分の割合を指定しています。 50%を20％にすると蛍光ペンが太く（無色部分が少なく）、50％を70％にすると、蛍光分が細く（無色部分の面積が多く）なります。 |
| yellow 50% | アンダーラインの色を指定します。yellowの部分を、色名称や色コードで変更して好きな色にしてください。 |
＜作成例＞
background: linear-gradient(transparent
- 水色の
蛍光ペン
background: linear-gradient(transparent 50%, yellow 50%)
- 黄色の蛍光ペン
background: linear-gradient(transparent
- ピンクの
蛍光ペン
アンダーライン（下線）の多色展開
蛍光ペン風のアンダーライン（下線）は、何種類でも設定できます。
<style>
u {
text-decoration: none;
background: linear-gradient(transparent 50%, yellow 50%) !important;}
</style>
記事本文中で対応する色をつけたい部分を<u></u>で挟む代わりに、<u2></u2>や<u3></u3>で挟めばOKです。
CSSにて複数色を設定する場合も同様です。
まとめ｜蛍光ペン風のアンダーライン（下線）装飾を簡単に使う方法
蛍光ペン風のアンダーラインを割と頻繁に使うなら、この記事のCSSに設定する方法で設定しておくと便利です。
蛍光ペンはほとんど使わないという人は、CSSの設定はせず、記事ごとに設定しましょう。
利用頻度に合わせて、好きなようにご利用ください。
なお、
はてなブログの「定型文貼り付け」機能を使いましょう。
定型文に、次の2つを登録しておくと、とても簡単に蛍光ペンのアンダーラインを使うことができます。（編集「見たまま」画面で簡単に使えます）
| 定型文登録 | 内容 |
|---|---|
| 登録1 | <style> u{ text-decoration: none; background: linear-gradient(transparent 50%, yellow 50%) !important;} </style> |
| 登録2 | <u>蛍光ペン</u> |
定型文貼り付け機能の詳細は、次の記事を参照してください。
