クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】アンダーラインを点線にするtext-decorationの使い方!コピペOK!

f:id:clrmemory:20180412113845p:plain

こんにちはクリアメモリです!

今回は、はてなブログのアンダーラインを「点線」にするCSSを紹介します。

 

これまで紹介してきた「波線」や「二重線」と同じように「text-decoration」を調整することで実装できるので、ぜひ試してみてください。

今回のCSSも基本コピペOKです。

 

はじめに

 

今回紹介する内容は「はてなブログのアンダーラインを点線にする方法」です。

過去に紹介している「波線」「二重線」については以下のリンクからどうぞ。

 

www.clrmemory.com

www.clrmemory.com

 

同じアンダーラインでも、スタイルを変えるだけで全然違う見た目になるので、サイトのデザインに合わせて調整してみてください。

 

テキストにアンダーラインを設定する

 

これまで何度も紹介してきたので、すでにわかってるよ!って方は飛ばしてOK

記事編集ページを開くと、以下のようなボタンが見つかると思います。

 

f:id:clrmemory:20180409071034p:plain

 

テキストにアンダーラインを設定する場合は、記事編集欄から「アンダーラインを引きたいテキスト」を選択した状態で「U」ボタンをクリックします。

テキストにアンダーラインを設定すると「uタグ」で囲まれます。

 

<u>選択したテキスト</u>

 

こんな感じになっていれば、アンダーラインを設定できているはずです。

このような下線の見た目を調整するイメージですね。

 

CSSを追加する

 

アンダーラインは「text-decoration」の値を調整することで、見た目を変更できます。

今回紹介する「点線」は2種類あるので、まず先にチェックしておきましょう。

 

アンダーライン(点線1)

アンダーライン(点線2)

 

「普通の点線」と「ちょっと横長の点線」って感じですね。

今回の記事では、1番目のアンダーラインを「点線1」2番目のアンダーラインを「点線2」として解説していきます。

 

サイトデザインによって、どっちにするか選んでください。

 

点線1のCSS

 

まずは、普通の点線を設定してみましょう。

今回のカスタマイズでは以下のようなCSSを設定します。

 

u {
  text-decoration: underline dotted;
}

 

こんな感じのCSSを「はてなブログ > デザインCSS」の中に追加することで、以下のような見た目になります。

アンダーライン(点線1)

 

ちなみに「dotted」の後ろに「カラーコード」を追加すれば点線の色も自由に設定できるので、合わせてチェックしておいてください。

これは、点線2でも同じです。

 

u {
  text-decoration: underline dotted indigo;
}

 

カラーコードについては、以下の記事も参考にしてみてください。

www.clrmemory.com

 

点線2のCSS

 

続いて、点線2のCSSをチェックしましょう。

この場合設定するスタイルは、dottedではなく「dashed」となります。

 

u {
  text-decoration: underline dashed orange;
}

 

こちらも点線の色を調整できるので、その部分は自由に書き換えてみてください。

こんな感じのテキストができました。

 

まとめ

 

今回紹介した方法を使うことで、はてなブログのアンダーラインを「点線」にすることができました。

一言に点線といっても、text-decorationを使った場合は2種類の点線を設定できるので、サイトデザインによって使い分けてみてください。

www.clrmemory.com

 

ではまた。

新着記事