パソコン操作術

【CSS】WordPressで文字に下線を引く方法を解説!

wordpressで下線を引いたいけど、機能にない、、

wordpressで下線を引けなくて困っている方に向けて、「CSSを用いて簡単に下線を引く方法」を紹介します!

設定方法を覚えれば簡単にアレンジすることができます!

あいうえお かきくけこ さしすせそ たちつてと

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)grayred
maroonwhite(white)purplefuchsia
greenlimeoliveyellow(yellow)
navybluetealaqua(aqua)

他のカラーキーワードを知りたい方はこちら

例えば下線をredにしたい場合は、以下のようにコードを設定します。

下線をredにしました

<p><span style=" text-decoration:underline solid red; 
-webkit-text-decoration:underline solid red ">下線をredにしました</span></p>

まとめ

この記事では「wordpressで文字に下線を引く方法」を紹介しました。

サンプルコード

<span style=" text-decoration: underline solid black; 
-webkit-text-decoration: underline solid black ">あいうえお</span>

簡単にできますので、ぜひ試してみてください!