アメブロ記事本文の目立たせたい部分に赤ペンでアンダーラインをシュッとひいてみる | サプリブログ

アメブロ記事本文の目立たせたい部分に赤ペンでアンダーラインをシュッとひいてみる

記事中の一部のセンテンスにアンダーラインをひく場合、
普通はエディタのこのボタン↓を使ったり、

サプリブログ-エディタのボタン

はたまたアンダーラインをひきたい部分を直接・・・

<u> ~ </u>

で挟んだり、
普通はそんな感じで表現します。

が、

これだとこんな感じのアンダーラインになっちゃうんですよね。

サプリブログ-アンダーライン

つまりアンダーラインが文字色と同じ色になっちゃうわけです。

そもそもアンダーラインってのは、
他の文章よりも目立たせたい部分に使う
わけで、
これだと効果半減なように感じるのは、僕だけじゃないはず。

そこでです!

まるでカラーペンで線をシュッとひくように
文字色とは異なる色でアンダーラインをひく
には、
どうしたら良いのか?
結論から言うと・・・

border-bottom: 1px solid #ff0000;

これを利用します。
つまり、アンダーラインではなくボーダーラインなわけですな。
ボーダーラインだからこそ、

  • 線の太さ
  • 線の種類
  • 線の色

を自由に設定できるわけです。
で、具体的なCSSとマークアップ例は以下の通り。

CSS
span.underline {
border-bottom: 1px solid #ff0000;
}
HTML
<span class="underline">アンダーラインをひきたいセンテンス</span>

以上でっす。

と、華麗に〆たいところではありますが、
このアンダーラインに関して、
このブログでも採用しているフォント「メイリオ」との関連で、
ひとつ問題が
でてくる
んですよね。
実はこのテーマこそが、今回の記事で書きたかったことなんですが、
また長くなっちゃったので、今回はさわりだけ。

具体的にはコチラを見てみてくだされ↓

サプリブログ-メイリオのアンダーライン

アンダーラインが下に寄りすぎちゃってて、
ちょっとばかし違和感ないですか?
僕はめちゃくちゃ違和感感じました。

次回はこの問題の解決方法をご紹介する予定です。

にほんブログ村 トラコミュ アメブロカスタマイズ井戸端コミュへ
アメブロカスタマイズ井戸端コミュ