クリアメモリ

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

【はてなブログ】アンダーラインの見た目を調整する方法まとめ!コピペOKで波線や点線を設定可能!

f:id:clrmemory:20180420182818p:plain

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

今回は「はてなブログのアンダーラインをカスタマイズする方法」をまとめてみました。

 

過去に紹介してきたアンダーラインの設定方法とコードの例を合わせて紹介します。

アンダーラインの見た目は、CSSだけで設定できて超簡単なので、サイトのデザインに合わせてカスタマイズしてみてください。

はじめに

 

今回は「はてなブログでアンダーラインの見た目を変更する方法」のまとめです。

過去に設定した「uタグ」の見た目も同時に変更できるので、一気にデザインを変更したい方にオススメ。

 

uタグさえ設定してあれば、どれもCSSだけでカスタマイズできるので基本コピペOKです。

はてなブログで「uタグ」を設定する方法や細かい使用方法については、それぞれの記事でも紹介しているので、合わせてチェックしてみてください。

 

では、実際のカスタマイズ例とコードをチェックしていきましょう。

 

デフォルトのアンダーライン

 

まずはデフォルトのアンダーラインです。

これまでuタグにCSSを設定していない方は、変化は全くなし。

 

全体的なアンダーラインは「波線」にし、部分的に「通常のアンダーライン」にしたい場合に活用してみてください。

 

実際のコードがこちら

u {
    text-decoration: underline solid red;
}

 

見た目自体は、普通のアンダーラインになります。

「red」と書かれた部分は「アンダーラインの色」なので、自由に調整してみてください。

 

デフォルトのアンダーライン

 

波線

 

続いて紹介するのは「波線のアンダーライン

通常のアンダーラインよりもっと目立たせたい時にオススメなカスタマイズです。

 

u {
    text-decoration: underline wavy green;
}

 

デフォルトのアンダーラインと変わったのは「wavy」の部分だけ。

「green」は先ほど同様「アンダーラインの色」を設定してあるのでデザインに合わせて変更可能です。

 

波線のアンダーライン

 

www.clrmemory.com

 

二重線のアンダーライン

 

次に紹介するのは「二重線のアンダーライン

通常のアンダーラインより重要な感じを出したい時にオススメです。

 

実際のコードはこちら。

u {
    text-decoration: underline double blue;
}

 

実際に設定してみると、以下のような見た目になりました。

 

二重線のアンダーライン

 

www.clrmemory.com

 

点線のアンダーライン

 

点線だけは2通りの設定方法があります。

「ドット」と「ダッシュ」と呼ばれるスタイルなのですが、よくわからなければ「普通の点」と「ちょっと横長の点」ぐらいに覚えておけばOKです。

 

まずは「ドット」のアンダーラインのCSSです。

u {
    text-decoration: underline dotted indigo;
}

 

設定した結果がこちら。

 

ドットのアンダーライン

 

続いて「ダッシュ」のアンダーラインのCSSです。

u {
    text-decoration: underline dashed indigo;
}

 

普通の点線なら「dotted」を設定し、ちょっと横長な点線にしたければ「dashed」を設定しましょう。

実際に設定してみると、このようになりました。

 

ダッシュのアンダーライン

 

www.clrmemory.com

 

個別にスタイルを設定する

 

ここまで紹介してきは「text-decoration」は全て1行で記述してきましたが、「線」「見た目」「色」を別々に記述することもできます。

記述方法は以下の通り。

 

u {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: cyan;
}

 

使用例としては、クラスごとに「部分的な見た目を調整したい時」に便利です。

実際の見た目は「シアン色」の波線になりました。

 

シアン色の波線

 

「1行」で書いた方が記述しやすく管理も楽なので基本は不要

そんな書き方もあったなー、ぐらいに覚えておけばOKです。

 

まとめ

 

今回紹介した方法を使うことで、CSSを使うことで「テキストのアンダーライン(uタグ)」の見た目を調整することができました。

スタイルや色をそれぞれ設定することで、サイトのデザインに合わせつつ、より目立つアンダーラインにできるのでぜひチェックしてみてください。

 

www.clrmemory.com

 

ではまた。

新着記事