無料ブログやWordPressでサイト運営を行っている皆さん、文章に下線(アンダーライン)を引きたくなることってありますよね?

その際、恐らく以下の画像のような記事上に出ている下線マークを押して、アンダーラインを引いていると思います。

スクリーンショット 2016-02-27 17.04.01

 

しかし、下線部分のソースコードを見たときにhtmlタグで「<u>〜</u>」と書かれている場合は”要注意“です。

html5では廃止が予定されており、既に非推奨な書き方なのです。

スポンサーリンク

html5から下線タグとして廃止予定の<u>、変わりに<span>タグ(or CSS)で「text-decoration: underline;」と指定しよう!

当サイトはCMSのWordPressを利用しており、テーマにStinger6を利用しています。(参考:WordPressテーマをSimplicityからStinger6へ。サイトデザイン変更、Twitter/Facebookアカウント作成!)

恐らく使っているテキスト記述用のプラグイン(TinyMCE Advanced)が適用してくれているからだと思いますが、当サイトではビジュアルエディタ上の下線ボタンを押して、しっかり「<span style=”text-decoration: underline”>~</span>」と記述してくれます。

無料ブログの場合デフォルトのエディタの下線ボタンを押すと<u>タグを吐き出している可能性がある!

注意して頂きたいのが、アメブロやFC2、はてなブログといった無料ブログを利用している場合。

恐らくビジュアルエディタがデフォルトであると思いますが、<span>タグあるいはCSSによる「text-decoration: underline;」の指定をしてくれていないケースも。(多分アメブロ)

参考:htmlの強調タグ(bold,strong,em,i)の意味とSEO効果について、太字にするならどれが良いか考える

ハイパーリンクの下線を消したい場合は、「text-decoration: none;」と指定すればOK

ここまでhtml・cssで文字に下線を引きたい時の書き方について述べてきましたが、逆にリンク等のデフォルトで入っている下線を消したい場合もあると思います。

それもtext-decorationで簡単に消すことができます。

こんな感じで記述すれば、リンクの下線が消えます。

 

自分のブログを確認して、htmlの<u>タグで下線を引いている場合は今すぐ<span>タグかCSSで「text-decoration: underline;」と指定しましょう!

参考:htmlで取り消し線を書くstrikeタグは非推奨!delタグか「text-decoration: line-through;」と指定すべし

TechAcademyでWebマーケティングを学ぶ

スポンサーリンク
3a9822cda5ea097849711034f62c188f_s

この記事が役に立ったらいいね!をしよう