wordpressで下線を引いたいけど、機能にない、、
wordpressで下線を引けなくて困っている方に向けて、「CSSを用いて簡単に下線を引く方法」を紹介します！
設定方法を覚えれば簡単にアレンジすることができます！
あいうえお かきくけこ さしすせそ たちつてと
※CSS…Webサイトの見た目を装飾する言語
下線を引く方法
「HTMLとして編集」をクリック
下線を引きたい段落で「HTMLとして編集」をクリックします。
以下のようにHTML形式の表示になります。
※HTML…Webサイトのテキストを設定する言語
コードを挿入
以下のように、下線を引きたい文字をspanタグで囲みます。
<span style=" text-decoration: underline solid black;
-webkit-text-decoration: underline solid black ">あいうえお</span>「text-decoration: underline solid black; -webkit-text-decoration: underline solid black」の部分がCSSに該当し、spanタグで挟まれた文字に下線の装飾をしてくれるのです。
PC・スマホのブラウザ両方で表示させるために「text-decoration」「-webkit-text-decoration」の2つで同じ設定をします。
「ビジュアル編集」で確認
「ビジュアル編集」を押せば、下線が引かれた状態を確認することができます。
下線が引かれています⇩
下線をアレンジする
あなた好みにアレンジ可能
text-decoration:の後に続く3つの要素を変えることで、下線をアレンジすることができます。
| ３つの要素 | 例 |
|---|---|
| 線の位置 | 下線、上線、取り消し線など |
| 線のスタイル | 実線、二重線、波線など |
| 線の色 | 好きな色を設定可能 |
例えば、先ほど紹介したコードでは、装飾線の設定は以下のようになっています。
下線を引きたい文字
<span style=" text-decoration: underline solid black;
-webkit-text-decoration: underline solid black ">下線を引きたい文字</span>| ３つの要素 | 設定値 |
|---|---|
| 線の位置 | underline（下線） |
| 線のスタイル | solid（実線） |
| 線の色 | black |
３つの要素を詳しく解説していきます。
線の位置
下線を引きたいときはunderlineを指定すればいいですが、その他の値も使いこなせると便利です！
| underline | 下線 |
| overline | 上線 |
| line-through | 取り消し線 |
underline
線の位置を設定します
<p><span style=" text-decoration: underline solid black;
-webkit-text-decoration: underline solid black ">線の位置を設定します</span></p>overline
線の位置を設定します
<p><span style=" text-decoration: overline solid black;
-webkit-text-decoration: overline solid black ">線の位置を設定します</span></p>line-through
線の位置を設定します
<p><span style=" text-decoration: underline solid black;
-webkit-text-decoration: underline solid black ">線の位置を設定します</span></p>また、線の位置を複数設定することもできます！
underline×overline
線の位置を設定します
<p><span style=" text-decoration: underline overline solid black;
-webkit-text-decoration: underline overline solid black ">線の位置を設定します</span></p>線のスタイル
| solid | 実線 |
| double | 二重線 |
| wavy | 波線 |
| dotted | 点線 |
| dashed | 破線 |
solid
線のスタイルを設定します
<p><span style=" text-decoration: underline solid black;
-webkit-text-decoration: underline solid black ">線のスタイルを設定します</span></p>double
線のスタイルを設定します
<p><span style=" text-decoration: underline double black;
-webkit-text-decoration: underline double black ">線のスタイルを設定します</span></p>wavy
線のスタイルを設定します
<p><span style=" text-decoration: underline wavy black;
-webkit-text-decoration: underline wavy black ">線のスタイルを設定します</span></p>dotted
線のスタイルを設定します
<p><span style=" text-decoration: underline dotted black;
-webkit-text-decoration: underline dotted black ">線のスタイルを設定します</span></p>dashed
線のスタイルを設定します
<p><span style=" text-decoration: underline dashed black;
-webkit-text-decoration: underline dashed black ">線のスタイルを設定します</span></p>線の色
もっとも簡単な「カラーキーワード」での指定方法を紹介します。ほかにもカラーコード、RGBやHSLといった形式もありますが、本記事では割愛させていただきます。
ここではほんの一部を紹介します。
| black | silver(silver) | gray | red |
| maroon | white(white) | purple | fuchsia |
| green | lime | olive | yellow(yellow) |
| navy | blue | teal | aqua(aqua) |
他のカラーキーワードを知りたい方はこちら
例えば下線をredにしたい場合は、以下のようにコードを設定します。
下線をredにしました
<p><span style=" text-decoration:underline solid red;
-webkit-text-decoration:underline solid red ">下線をredにしました</span></p>まとめ
この記事では「wordpressで文字に下線を引く方法」を紹介しました。
- 「HTMLとして編集」をクリック
- コードを挿入
- 「ビジュアル編集」で確認
サンプルコード
<span style=" text-decoration: underline solid black;
-webkit-text-decoration: underline solid black ">あいうえお</span>簡単にできますので、ぜひ試してみてください！
