今回は「はてなブログのアンダーラインをカスタマイズする方法」をまとめてみました。
過去に紹介してきたアンダーラインの設定方法とコードの例を合わせて紹介します。
アンダーラインの見た目は、CSSだけで設定できて超簡単なので、サイトのデザインに合わせてカスタマイズしてみてください。
はじめに
今回は「はてなブログでアンダーラインの見た目を変更する方法」のまとめです。
過去に設定した「uタグ」の見た目も同時に変更できるので、一気にデザインを変更したい方にオススメ。
uタグさえ設定してあれば、どれもCSSだけでカスタマイズできるので基本コピペOKです。
はてなブログで「uタグ」を設定する方法や細かい使用方法については、それぞれの記事でも紹介しているので、合わせてチェックしてみてください。
では、実際のカスタマイズ例とコードをチェックしていきましょう。
デフォルトのアンダーライン
まずはデフォルトのアンダーラインです。
これまでuタグにCSSを設定していない方は、変化は全くなし。
全体的なアンダーラインは「波線」にし、部分的に「通常のアンダーライン」にしたい場合に活用してみてください。
実際のコードがこちら
u {
text-decoration: underline solid red;
}
見た目自体は、普通のアンダーラインになります。
「red」と書かれた部分は「アンダーラインの色」なので、自由に調整してみてください。
デフォルトのアンダーライン
波線
続いて紹介するのは「波線のアンダーライン」
通常のアンダーラインよりもっと目立たせたい時にオススメなカスタマイズです。
u {
text-decoration: underline wavy green;
}
デフォルトのアンダーラインと変わったのは「wavy」の部分だけ。
「green」は先ほど同様「アンダーラインの色」を設定してあるのでデザインに合わせて変更可能です。
波線のアンダーライン
二重線のアンダーライン
次に紹介するのは「二重線のアンダーライン」
通常のアンダーラインより重要な感じを出したい時にオススメです。
実際のコードはこちら。
u {
text-decoration: underline double blue;
}
実際に設定してみると、以下のような見た目になりました。
二重線のアンダーライン
点線のアンダーライン
点線だけは2通りの設定方法があります。
「ドット」と「ダッシュ」と呼ばれるスタイルなのですが、よくわからなければ「普通の点」と「ちょっと横長の点」ぐらいに覚えておけばOKです。
まずは「ドット」のアンダーラインのCSSです。
u {
text-decoration: underline dotted indigo;
}
設定した結果がこちら。
ドットのアンダーライン
続いて「ダッシュ」のアンダーラインのCSSです。
u {
text-decoration: underline dashed indigo;
}
普通の点線なら「dotted」を設定し、ちょっと横長な点線にしたければ「dashed」を設定しましょう。
実際に設定してみると、このようになりました。
ダッシュのアンダーライン
個別にスタイルを設定する
ここまで紹介してきは「text-decoration」は全て1行で記述してきましたが、「線」「見た目」「色」を別々に記述することもできます。
記述方法は以下の通り。
u {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: cyan;
}
使用例としては、クラスごとに「部分的な見た目を調整したい時」に便利です。
実際の見た目は「シアン色」の波線になりました。
シアン色の波線
「1行」で書いた方が記述しやすく管理も楽なので基本は不要
そんな書き方もあったなー、ぐらいに覚えておけばOKです。
まとめ
今回紹介した方法を使うことで、CSSを使うことで「テキストのアンダーライン（uタグ）」の見た目を調整することができました。
スタイルや色をそれぞれ設定することで、サイトのデザインに合わせつつ、より目立つアンダーラインにできるのでぜひチェックしてみてください。
ではまた。
