その他

Bloggerで蛍光ペン風の下線を引く方法

広告無しの完全無料のBlogであるせいか、お洒落な装飾のできないBlogger。
そんなBloggerを少しでもお洒落にするべく、下線を蛍光ペン風にする方法を説明したいと思います。

Bloggerで蛍光ペン風の下線を引く方法

Bloggerの標準装飾文字

Blogger標準の装飾文字は、太線、斜体、下線、打ち消し線、文字色、テキストの背景色のみで、特別な装飾は容易されていません。

最近（何年も昔からあるけど）下線を蛍光ペンでマークしたような文字を良く見かけることがありますが、けっこうポップで洒落ています。

Bloggerでも同じようなことがしたいので、方法を探ってみました。

CSSでカスタマイズする

ググってみると、みなさんCSSをカスタマイズして実現しているようです。
Bloggerで実現する方法は見つからなかったので、CSSなどチンプンカンプンですが、試行錯誤をしてみました。

今回目指したのは、Bloggerの編集画面で簡単に下線を引きたいので、HTML編集モードは使わない方法です。
「B」（太字）を蛍光マーカーに置き換えます。
よって、単独の太字は使えなくなるので、あしからず。

CSSの追加

Blogger管理画面より「テーマ」→「カスタマイズ」をクリックします。

ソースの中から「</b:skin>」を検索し、その上に下記CSSを追加します。

b {
background: linear-gradient(transparent 60%, #ff99ff 60%);
}

編集が終わったら「テーマを保存」をクリック。

これでCSSの編集は完了

後は、編集画面で蛍光マーカーにしたい文字を太字にしてください。
編集画面では単なる太字ですが、プレビューでは蛍光マーカーになっています。

マーカーの色を変えたい場合は、さきほどのCSSのカラーコードを変更してください。

カラーコードの参考

WEB色見本 原色大辞典 - HTMLカラーコード