アメブロ記事本文の目立たせたい部分に赤ペンでアンダーラインをシュッとひいてみる
記事中の一部のセンテンスにアンダーラインをひく場合、
普通はエディタのこのボタン↓を使ったり、
はたまたアンダーラインをひきたい部分を直接・・・
<u> ~ </u>
で挟んだり、
普通はそんな感じで表現します。
が、
これだとこんな感じのアンダーラインになっちゃうんですよね。
つまりアンダーラインが文字色と同じ色になっちゃうわけです。
そもそもアンダーラインってのは、
他の文章よりも目立たせたい部分に使うわけで、
これだと効果半減なように感じるのは、僕だけじゃないはず。
そこでです!
まるでカラーペンで線をシュッとひくように
文字色とは異なる色でアンダーラインをひくには、
どうしたら良いのか?
結論から言うと・・・
border-bottom: 1px solid #ff0000;
これを利用します。
つまり、アンダーラインではなくボーダーラインなわけですな。
ボーダーラインだからこそ、
- 線の太さ
- 線の種類
- 線の色
を自由に設定できるわけです。
で、具体的なCSSとマークアップ例は以下の通り。
CSS
span.underline { border-bottom: 1px solid #ff0000; }
HTML
<span class="underline">アンダーラインをひきたいセンテンス</span>
以上でっす。
と、華麗に〆たいところではありますが、
このアンダーラインに関して、
このブログでも採用しているフォント「メイリオ」との関連で、
ひとつ問題がでてくるんですよね。
実はこのテーマこそが、今回の記事で書きたかったことなんですが、
また長くなっちゃったので、今回はさわりだけ。
具体的にはコチラを見てみてくだされ↓
アンダーラインが下に寄りすぎちゃってて、
ちょっとばかし違和感ないですか?
僕はめちゃくちゃ違和感感じました。
次回はこの問題の解決方法をご紹介する予定です。
アメブロカスタマイズ井戸端コミュ |