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つの要素を変えることで、下線をアレンジすることができます。
3つの要素 | 例 |
---|---|
線の位置 | 下線、上線、取り消し線など |
線のスタイル | 実線、二重線、波線など |
線の色 | 好きな色を設定可能 |
例えば、先ほど紹介したコードでは、装飾線の設定は以下のようになっています。
下線を引きたい文字
<span style=" text-decoration: underline solid black;
-webkit-text-decoration: underline solid black ">下線を引きたい文字</span>
3つの要素 | 設定値 |
---|---|
線の位置 | underline(下線) |
線のスタイル | solid(実線) |
線の色 | black |
3つの要素を詳しく解説していきます。
線の位置
下線を引きたいときは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>
簡単にできますので、ぜひ試してみてください!