ワードプレスで下線を引く方法｜文字装飾・色変更・消えない時の対処法まで解説
はじめに
ワードプレスで記事を書いていると、「重要な文字に下線を引きたい」「リンクの下線を消したい」「マーカー風の下線を作りたい」と感じる場面があります。
下線は、文章の中で読者の視線を集めたり、リンクであることを分かりやすくしたりする便利な文字装飾です。ただし、使い方を間違えると、リンクと通常の強調表現が混同されたり、記事全体が読みにくくなったりすることもあります。
ワードプレスで下線を引く方法には、ブロックエディターの標準機能を使う方法、HTMLタグを使う方法、CSSでデザインを調整する方法、プラグインやテーマ機能を使う方法などがあります。この記事では、ワードプレスで下線を引く基本手順から、色変更、太さ変更、マーカー風の装飾、下線が消えない・反映されない時の対処法まで詳しく解説します。
1. ワードプレスで下線を引く方法は主に4つ
ワードプレスで文字に下線を引く方法は、主に次の4つです。
1つ目は、ブロックエディターの標準機能を使う方法です。記事編集画面上で文字を選択し、ツールバーから下線を設定できるため、初心者でも扱いやすい方法です。
2つ目は、HTMLタグを使う方法です。<u>タグや<span>タグを使って、特定の文字だけに下線を引けます。エディター上で細かく調整したい場合に便利です。
3つ目は、CSSを使う方法です。下線の色、太さ、位置、マーカー風デザインなどを自由にカスタマイズできます。サイト全体で統一したデザインにしたい場合に向いています。
4つ目は、プラグインやテーマの装飾機能を使う方法です。CSSが苦手な方でも、ボタン操作で下線やマーカーを追加できる場合があります。
1-1. ブロックエディターの標準機能で下線を引く方法
ワードプレスのブロックエディターでは、文字を選択してツールバーから装飾を追加できます。太字、斜体、リンク、文字色変更などと同じように、下線も設定できる場合があります。
使用しているテーマやワードプレスのバージョンによって表示されるメニューが異なることがありますが、基本的には文章ブロック内の文字を選択し、ツールバーや追加メニューから下線を選びます。
もっとも簡単な方法なので、特定の文章だけにシンプルな下線を引きたい場合におすすめです。
1-2. HTMLタグで下線を引く方法
HTMLで下線を引く場合は、<u>タグを使います。
たとえば、次のように記述します。
HTMLこれは<u>下線を引きたい文字</u>です。
このコードを使うと、「下線を引きたい文字」の部分だけに下線が表示されます。
また、spanタグとstyle属性を使えば、下線の色やデザインを直接指定することもできます。
HTMLこれは<span style="text-decoration: underline;">下線を引きたい文字</span>です。
HTMLを使う方法は、特定の箇所だけを細かく装飾したい場合に便利です。
1-3. CSSで下線デザインをカスタマイズする方法
CSSを使うと、下線の色、太さ、位置、種類を自由に変更できます。
たとえば、次のように書くと、赤い下線を引けます。
CSS.underline-red {
text-decoration: underline;
text-decoration-color: red;
}
さらに、border-bottomやbackground: linear-gradient()を使えば、通常の下線だけでなく、マーカー風の下線も作れます。
サイト全体で同じ下線デザインを使いたい場合は、CSSでクラスを作成しておくと便利です。
1-4. プラグインやテーマ機能で下線・マーカーを追加する方法
ワードプレステーマによっては、装飾用のショートコードやブロック装飾機能が用意されている場合があります。
たとえば、有料テーマやブロック拡張プラグインでは、マーカー、ラベル、囲み枠、吹き出し、ボタンなどの装飾を簡単に追加できることがあります。
CSSを書かずに下線やマーカー風の装飾を使いたい場合は、テーマの標準機能やブロック拡張プラグインを活用するとよいでしょう。
ただし、プラグインに依存しすぎると、プラグイン停止時やテーマ変更時にデザインが崩れる可能性があります。長期的に使う装飾は、CSSで管理する方法も検討しましょう。
1-5. 目的別におすすめの下線の引き方を比較
シンプルに一部の文字へ下線を引きたい場合は、ブロックエディターの標準機能がもっとも簡単です。
特定の文字だけにHTMLで直接指定したい場合は、uタグやspanタグが使えます。ただし、記事内に直接HTMLを書くと管理が複雑になるため、多用は避けた方がよいでしょう。
下線の色や太さを統一したい場合は、CSSでクラスを作る方法がおすすめです。一度設定すれば、複数の記事で同じデザインを使い回せます。
マーカー風の下線を使いたい場合は、CSSのlinear-gradientを使うと、読みやすく自然な強調表現を作れます。
2. ブロックエディターで文字に下線を引く手順
ブロックエディターを使えば、記事編集画面上で文字に下線を追加できます。ワードプレス初心者でも操作しやすい方法です。
2-1. 下線を引きたい文字を選択する
まず、投稿または固定ページの編集画面を開きます。
文章ブロックの中で、下線を引きたい文字をドラッグして選択します。1文字だけでも、単語単位でも、文章全体でも選択できます。
選択した文字の上にツールバーが表示されるので、そこから文字装飾を行います。
2-2. ツールバーから文字装飾メニューを開く
文字を選択したら、ツールバー内の装飾メニューを確認します。
環境によっては、下線アイコンが直接表示されている場合もあれば、追加メニューの中に隠れている場合もあります。表示されていない場合は、ツールバーの「さらに表示」や下向き矢印のメニューを開いて確認しましょう。
また、パソコンではショートカットキーで下線を設定できる場合があります。一般的には、WindowsではCtrl + U、MacではCommand + Uが下線のショートカットとして使われます。
ただし、ブラウザやエディターの状態によってはショートカットが効かないこともあります。その場合は、HTMLやCSSで設定する方法を使うと確実です。
2-3. 下線が表示されない場合の確認ポイント
ブロックエディターで下線を設定したはずなのに表示されない場合は、まずプレビュー画面で確認しましょう。
編集画面では反映されていないように見えても、実際の公開画面では表示されることがあります。
次に、テーマ側のCSSでtext-decorationが上書きされていないか確認します。特にリンクや強調装飾に関するスタイルは、テーマによって独自に設定されていることがあります。
また、ブロックエディターの表示とフロント側の表示が異なる場合もあるため、編集画面だけで判断せず、必ず公開ページまたはプレビューで確認することが大切です。
2-4. クラシックエディターで下線を引く場合の違い
クラシックエディターを使っている場合は、ビジュアルエディター上のツールバーから文字装飾を行います。
以前のエディターでは、下線ボタンが表示されていたり、ツールバー切り替えで追加ボタンが表示されたりすることがあります。
もし下線ボタンが見つからない場合は、テキストモードに切り替えて<u>タグを使う方法が簡単です。
HTML<u>下線を引きたい文字</u>
クラシックエディターでは、ビジュアルモードとテキストモードを切り替えながら編集するため、HTMLタグが自動変換されたり、不要なタグが入ったりする場合があります。編集後は必ずプレビューで確認しましょう。
2-5. スマホ・タブレットから下線を設定できるか
スマホやタブレットでも、ワードプレスの編集画面から下線を設定できる場合があります。
ただし、画面が小さいため、パソコンよりもツールバーの表示が分かりにくいことがあります。文字を選択しても装飾メニューが見つからない場合は、追加メニューを開いたり、横スクロールしたりして確認しましょう。
スマホで細かいHTMLやCSSを編集するのはミスが起きやすいため、下線のデザイン調整はパソコンで行うのがおすすめです。スマホでは簡単な文字装飾、パソコンではCSS調整というように使い分けると効率的です。
3. HTMLでワードプレスの文字に下線を引く方法
ワードプレスでは、ブロックエディターの「HTMLとして編集」やカスタムHTMLブロックを使って、HTMLで下線を指定できます。
HTMLを使うと、エディターの標準機能に下線ボタンがない場合でも、文字に下線を引けます。
3-1. uタグを使ってシンプルに下線を引く
もっともシンプルな方法は、uタグを使うことです。
HTML<p>この記事では<u>ワードプレスで下線を引く方法</u>を解説します。</p>
このように記述すると、「ワードプレスで下線を引く方法」の部分だけに下線が表示されます。
uタグは短い文字列に下線を引きたい時に便利です。ただし、下線はリンクと間違われやすいため、通常の文章で多用しないようにしましょう。
3-2. spanタグとstyle属性で下線を指定する
spanタグを使うと、下線だけでなく色や太さも指定できます。
HTML<span style="text-decoration: underline;">下線を引きたい文字</span>
下線の色を変えたい場合は、次のように指定します。
HTML<span style="text-decoration: underline; text-decoration-color: red;">
赤い下線を引きたい文字
</span>
太さや位置も指定したい場合は、次のように書けます。
HTML<span style="text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 3px; text-underline-offset: 4px;">
太めの赤い下線
</span>
ただし、記事本文内に長いstyle属性を何度も書くと、後から修正しづらくなります。よく使うデザインはCSSクラス化しておくと管理しやすくなります。
3-3. HTML編集モードでコードを追加する手順
ブロックエディターでHTMLを編集する場合は、対象のブロックを選択し、メニューから「HTMLとして編集」を選びます。
その後、下線を引きたい文字を<u>タグや<span>タグで囲みます。
たとえば、通常の文章が次のようになっているとします。
HTMLワードプレスで下線を引く方法を解説します。
この中の「下線を引く方法」に下線を付けたい場合は、次のように編集します。
HTMLワードプレスで<u>下線を引く方法</u>を解説します。
編集後は「ビジュアル編集」に戻し、表示が崩れていないか確認しましょう。
3-4. uタグを使う時の注意点
uタグは手軽ですが、意味づけには注意が必要です。
下線は一般的にリンクを示すデザインとして使われることが多いため、リンクではない文字に下線を多用すると、読者がクリックできる文字だと勘違いする可能性があります。
また、強調を表したいだけなら、太字やマーカー風の背景色を使った方が分かりやすい場合もあります。
下線を使う時は、「本当に下線が必要か」「リンクと混同されないか」「記事全体の読みやすさを損なわないか」を意識しましょう。
3-5. HTMLで下線を引いても反映されない時の原因
HTMLで下線を指定しても反映されない場合は、いくつかの原因が考えられます。
まず、タグの閉じ忘れや記述ミスがないか確認しましょう。
HTML<u>下線を引きたい文字</u>
このように開始タグと終了タグが正しく書かれている必要があります。
次に、テーマやプラグインのCSSでtext-decoration: none;が指定されている可能性があります。この場合、HTMLで下線を付けてもCSS側で打ち消されることがあります。
また、ブロックエディターがHTMLタグを自動変換したり、不要なタグとして削除したりすることもあります。うまく反映されない場合は、カスタムHTMLブロックを使うか、CSSクラスで指定する方法を試してみましょう。
4. CSSで下線の色・太さ・位置を変更する方法
ワードプレスで下線デザインを本格的にカスタマイズしたい場合は、CSSを使うのがおすすめです。
CSSを使えば、下線の色、太さ、位置、種類を細かく調整できます。また、作成したクラスを複数の記事で使い回せるため、サイト全体のデザインを統一しやすくなります。
4-1. text-decorationで基本の下線を設定する
CSSで基本的な下線を引くには、text-decorationを使います。
CSS.underline {
text-decoration: underline;
}
このCSSを設定したうえで、下線を付けたいHTMLにクラスを指定します。
HTML<span class="underline">下線を引きたい文字</span>
これで、対象の文字に下線が表示されます。
4-2. text-decoration-colorで下線の色を変える
下線の色を変えるには、text-decoration-colorを使います。
CSS.underline-red {
text-decoration: underline;
text-decoration-color: red;
}
文字色はそのままで、下線だけ赤くしたい場合に便利です。
HTML<span class="underline-red">赤い下線を引きたい文字</span>
サイトのデザインに合わせて、赤、青、黄色、グレーなどを使い分けるとよいでしょう。
4-3. text-decoration-thicknessで下線の太さを変える
下線の太さを変えるには、text-decoration-thicknessを使います。
CSS.underline-thick {
text-decoration: underline;
text-decoration-thickness: 3px;
}
通常の下線よりも太く表示されるため、強調したい文字に向いています。
ただし、太すぎる下線は文字と重なって読みにくくなることがあります。本文中で使う場合は、2pxから4px程度を目安に調整すると自然です。
4-4. text-underline-offsetで下線の位置を調整する
下線と文字の間隔を調整したい場合は、text-underline-offsetを使います。
CSS.underline-offset {
text-decoration: underline;
text-underline-offset: 4px;
}
下線が文字に近すぎると窮屈に見えることがあります。少し間隔を空けることで、読みやすく洗練された印象になります。
色付きの下線や太めの下線を使う場合は、text-underline-offsetで位置を調整するときれいに見えます。
4-5. border-bottomで自由度の高い下線を作る
border-bottomを使うと、通常の下線より自由度の高いデザインを作れます。
CSS.border-underline {
border-bottom: 3px solid #f5c542;
}
HTML側では次のように指定します。
HTML<span class="border-underline">黄色い下線を引きたい文字</span>
border-bottomは、太さや色を調整しやすい一方で、行間や文字との位置関係に影響する場合があります。本文中で使う場合は、表示が崩れていないかスマホ表示も確認しましょう。
4-6. 追加CSSにコードを入れる手順
ワードプレスでCSSを追加する一般的な方法は、「追加CSS」を使う方法です。
管理画面から「外観」へ進み、「カスタマイズ」を開きます。その中にある「追加CSS」を選択し、CSSコードを入力します。
たとえば、次のコードを追加します。
CSS.marker-yellow {
background: linear-gradient(transparent 60%, #fff176 60%);
}
入力後、公開ボタンを押すとCSSが反映されます。
追加CSSは管理画面から編集できるため、初心者でも扱いやすい方法です。テーマファイルを直接編集する必要がないため、まずは追加CSSから試すのがおすすめです。
4-7. 子テーマのstyle.cssに書く場合の注意点
本格的にCSSを管理したい場合は、子テーマのstyle.cssにコードを書く方法もあります。
子テーマを使うと、親テーマをアップデートしても自分で追加したCSSが消えにくくなります。
ただし、親テーマのCSSとの読み込み順によっては、追加したCSSが上書きされることがあります。その場合は、セレクタを少し具体的にしたり、必要に応じて!importantを使ったりします。
また、親テーマのファイルを直接編集するのは避けましょう。テーマ更新時に編集内容が消える可能性があります。CSSを追加する場合は、追加CSSまたは子テーマを使うのが安全です。
5. マーカー風の下線をワードプレスで作る方法
通常の下線よりも柔らかく目立たせたい場合は、マーカー風の下線がおすすめです。
マーカー風下線は、文字の下半分に背景色を敷くようなデザインです。重要なキーワードや読者に注目してほしい部分を自然に強調できます。
5-1. backgroundのlinear-gradientでマーカー線を作る
マーカー風の下線は、CSSのbackgroundとlinear-gradientを使って作れます。
CSS.marker-yellow {
background: linear-gradient(transparent 60%, #fff176 60%);
}
HTMLでは次のように使います。
HTML<span class="marker-yellow">マーカー風に強調したい文字</span>
transparent 60%は、上部60%を透明にし、下部40%に色を付ける指定です。この割合を変えることで、マーカーの太さを調整できます。
5-2. 黄色・赤・青など色別のマーカーCSS例
黄色のマーカーは、自然で読みやすく、もっとも使いやすい色です。
CSS.marker-yellow {
background: linear-gradient(transparent 60%, #fff176 60%);
}
赤系のマーカーは、注意点や重要度の高い内容に向いています。
CSS.marker-red {
background: linear-gradient(transparent 60%, #ffb3b3 60%);
}
青系のマーカーは、補足情報や冷静な印象を出したい時に使いやすい色です。
CSS.marker-blue {
background: linear-gradient(transparent 60%, #b3e5fc 60%);
}
緑系のマーカーは、安心感やチェックポイントを示す時に使えます。
CSS.marker-green {
background: linear-gradient(transparent 60%, #c8e6c9 60%);
}
色を増やしすぎると記事全体が散らかった印象になるため、基本は1〜2色に絞るのがおすすめです。
5-3. 太め・細め・半透明のマーカー下線を作る
マーカーの太さは、linear-gradientの割合で調整できます。
細めのマーカーにしたい場合は、色が付く範囲を少なくします。
CSS.marker-thin {
background: linear-gradient(transparent 75%, #fff176 75%);
}
太めのマーカーにしたい場合は、色が付く範囲を広くします。
CSS.marker-thick {
background: linear-gradient(transparent 45%, #fff176 45%);
}
半透明のマーカーにしたい場合は、rgbaを使います。
CSS.marker-soft {
background: linear-gradient(transparent 60%, rgba(255, 241, 118, 0.6) 60%);
}
半透明にすると主張が強すぎず、本文になじみやすくなります。
5-4. カスタムCSSクラスをブロックに適用する方法
作成したCSSクラスは、ブロックエディターの「高度な設定」から適用できます。
まず、追加CSSに次のようなコードを入れます。
CSS.marker-yellow {
background: linear-gradient(transparent 60%, #fff176 60%);
}
次に、投稿編集画面で対象のブロックを選択します。右側の設定パネルにある「高度な設定」を開き、「追加CSSクラス」にmarker-yellowと入力します。
ただし、この方法ではブロック全体にクラスが適用されるため、文章の一部分だけにマーカーを付けたい場合は、HTMLでspanタグを使う方が向いています。
HTML<span class="marker-yellow">この部分だけマーカーを付ける</span>
記事内の一部の文字だけを装飾したい場合はspan、ブロック全体に装飾したい場合は追加CSSクラスを使い分けましょう。
5-5. マーカー装飾を使う時の読みやすさの注意点
マーカー風下線は便利ですが、使いすぎると逆に読みにくくなります。
1つの記事の中で、あちこちにマーカーがあると、どこが本当に重要なのか分かりにくくなります。読者の視線を誘導するためにも、重要なポイントだけに絞って使いましょう。
また、色のコントラストにも注意が必要です。背景色が濃すぎると文字が読みにくくなります。本文中では、薄めの黄色や半透明の色を使うと自然に見えます。
スマホ画面では文字が小さく表示されるため、マーカーが太すぎると圧迫感が出ることがあります。パソコンだけでなく、スマホ表示でも確認しましょう。
6. 下線の色を変更する方法
ワードプレスで下線の色を変えたい場合は、CSSを使うのが基本です。
文字色と下線色を同じにすることも、別々に指定することもできます。リンクの下線色やホバー時の色もCSSで調整できます。
6-1. 文字色と下線色を同じにする方法
文字色と下線色を同じにしたい場合は、colorとtext-decorationを指定します。
CSS.underline-red-text {
color: red;
text-decoration: underline;
}
この場合、文字色が赤になり、下線も基本的には文字色に合わせて表示されます。
HTML<span class="underline-red-text">赤い文字と赤い下線</span>
シンプルに文字と下線を同じ色にしたい場合は、この方法で十分です。
6-2. 文字色と下線色を別々に指定する方法
文字色と下線色を別々にしたい場合は、text-decoration-colorを使います。
CSS.underline-different-color {
color: #333;
text-decoration: underline;
text-decoration-color: #ff0000;
}
この指定では、文字色は黒に近いグレー、下線だけ赤になります。
HTML<span class="underline-different-color">文字色と下線色を別々にした例</span>
強調したいけれど文字色は変えたくない場合に便利です。
6-3. リンクの下線色を変更する方法
リンクの下線色を変えるには、aタグに対してCSSを指定します。
CSSa {
text-decoration: underline;
text-decoration-color: #ff9800;
}
ただし、この指定はサイト全体のリンクに影響する可能性があります。記事本文内のリンクだけに適用したい場合は、テーマに合わせて範囲を限定しましょう。
たとえば、本文エリアが.entry-contentで囲まれている場合は、次のように指定します。
CSS.entry-content a {
text-decoration: underline;
text-decoration-color: #ff9800;
}
これにより、記事本文内のリンクだけに下線色を指定できます。
6-4. ホバー時だけ下線の色を変える方法
マウスを乗せた時だけ下線色を変えたい場合は、:hoverを使います。
CSS.entry-content a {
text-decoration: underline;
text-decoration-color: #999;
}
.entry-content a:hover {
text-decoration-color: #ff0000;
}
通常時はグレーの下線、ホバー時は赤い下線になります。
リンクに動きが出るため、読者がクリックできる要素だと分かりやすくなります。
6-5. テーマ側のリンク色設定との違い
ワードプレステーマには、リンク色やホバー色を管理画面から設定できるものがあります。
テーマ設定で変更できるのは、主にリンク文字色やアクセントカラーです。一方、CSSで指定する場合は、下線色、太さ、位置、ホバー時の変化など、より細かい調整ができます。
テーマ設定で十分な場合は、管理画面から変更する方が簡単です。細かいデザインを調整したい場合は、CSSを追加しましょう。
ただし、テーマ設定とCSSの両方でリンク色を指定すると、どちらが優先されているか分かりにくくなることがあります。変更後は必ず公開ページで確認しましょう。
7. ワードプレスで下線が消えない・消せない時の対処法
ワードプレスで「下線を消したはずなのに消えない」という場合、原因は1つとは限りません。
リンクの標準装飾、テーマCSS、border-bottom、box-shadow、キャッシュ、プラグイン設定などが関係している場合があります。
7-1. リンクの下線が消えない原因
リンクの下線が消えない場合、多くはCSSでリンクに下線が指定されています。
一般的には、次のようなCSSが原因です。
CSSa {
text-decoration: underline;
}
また、テーマによっては本文内リンクに対して、より具体的なCSSが指定されていることがあります。
CSS.entry-content a {
text-decoration: underline;
}
このような場合、単純にa { text-decoration: none; }と書いても、テーマ側のCSSに負けて反映されないことがあります。
7-2. テーマCSSで下線が自動表示されている場合
多くのワードプレステーマでは、リンクだと分かりやすくするために、自動で下線を表示しています。
これはユーザビリティの面では有効です。特に本文中のリンクは、色だけでなく下線がある方がリンクだと認識されやすくなります。
どうしても下線を消したい場合は、対象範囲を限定してCSSを指定しましょう。
CSS.entry-content a {
text-decoration: none;
}
ただし、リンクの下線を完全に消す場合は、文字色やホバー効果などでリンクだと分かる工夫を入れることが大切です。
7-3. text-decoration: none;で下線を消す方法
通常の下線を消すには、text-decoration: none;を使います。
CSSa {
text-decoration: none;
}
記事本文内のリンクだけを対象にしたい場合は、次のように書きます。
CSS.entry-content a {
text-decoration: none;
}
ホバー時だけ下線を表示したい場合は、次のようにできます。
CSS.entry-content a {
text-decoration: none;
}
.entry-content a:hover {
text-decoration: underline;
}
通常時はすっきり見せ、マウスを乗せた時にリンクであることを示せます。
7-4. border-bottomやbox-shadowが原因の場合
下線のように見えていても、実際にはtext-decorationではない場合があります。
テーマやプラグインによっては、リンクの下線をborder-bottomで表現していることがあります。
CSS.entry-content a {
border-bottom: 1px solid #333;
}
この場合、text-decoration: none;を指定しても下線は消えません。次のようにborder-bottomを消す必要があります。
CSS.entry-content a {
border-bottom: none;
}
また、box-shadowで下線風の装飾を作っている場合もあります。
CSS.entry-content a {
box-shadow: inset 0 -1px 0 #333;
}
この場合は、次のように指定します。
CSS.entry-content a {
box-shadow: none;
}
下線が消えない時は、それがtext-decorationなのか、border-bottomなのか、box-shadowなのかを確認することが重要です。
7-5. キャッシュが残っていて変更が反映されない場合
CSSを変更したのに下線が消えない場合、キャッシュが残っている可能性があります。
ワードプレスのキャッシュプラグイン、サーバー側キャッシュ、ブラウザキャッシュが影響していることがあります。
まず、キャッシュ系プラグインを使っている場合は、管理画面からキャッシュを削除しましょう。次に、ブラウザを再読み込みします。通常の更新で変わらない場合は、強制再読み込みを試します。
それでも反映されない場合は、別のブラウザやシークレットウィンドウで確認すると、キャッシュの影響かどうか判断しやすくなります。
7-6. プラグインの装飾設定が影響している場合
装飾系プラグインやブロック拡張プラグインを使っている場合、プラグイン側のCSSが下線を表示している可能性があります。
特に、リンク装飾、ブログカード、ボタン、マーカー、目次などのプラグインは、独自のCSSを読み込むことがあります。
一時的にプラグインを停止して下線が消えるか確認すると、原因を切り分けられます。ただし、本番サイトで急に停止すると表示が崩れる可能性があるため、できれば検証環境で確認するのがおすすめです。
7-7. 検証ツールで原因のCSSを確認する方法
下線が消えない原因を調べるには、ブラウザの検証ツールを使うのが確実です。
Chromeの場合、下線が表示されている部分を右クリックし、「検証」を選びます。すると、その要素に適用されているCSSが確認できます。
text-decoration、border-bottom、box-shadowなどの指定がないか確認しましょう。
どのCSSファイルの何行目で指定されているかも表示されるため、テーマ側のCSSなのか、プラグイン側のCSSなのか判断しやすくなります。
8. 下線が表示されない・反映されない時のチェックポイント
下線を設定したのに表示されない場合は、CSSの上書き、記述ミス、クラス名の間違い、キャッシュなどを順番に確認しましょう。
8-1. CSSの指定が上書きされていないか確認する
CSSは、後から読み込まれた指定や、より具体的なセレクタが優先されます。
たとえば、自分で次のように書いたとします。
CSS.underline {
text-decoration: underline;
}
しかし、テーマ側で次のような指定があると、下線が消される場合があります。
CSS.entry-content span {
text-decoration: none;
}
この場合は、セレクタを具体的にします。
CSS.entry-content .underline {
text-decoration: underline;
}
それでも反映されない場合は、検証ツールでどのCSSが優先されているか確認しましょう。
8-2. 追加CSSの記述ミスを確認する
CSSが反映されない原因として多いのが、記述ミスです。
たとえば、セミコロンの抜け、波括弧の閉じ忘れ、全角文字の混入などがあります。
正しい例は次のとおりです。
CSS.underline-red {
text-decoration: underline;
text-decoration-color: red;
}
次のように波括弧が閉じていないと、以降のCSSにも影響することがあります。
CSS.underline-red {
text-decoration: underline;
text-decoration-color: red;
追加CSSに複数のコードを入れている場合は、新しく追加した部分だけを一度削除して、問題が解消するか確認すると原因を探しやすくなります。
8-3. クラス名の指定ミスを確認する
CSSで作成したクラス名と、HTMLやブロック側で指定したクラス名が一致していないと、下線は反映されません。
CSSが次のようになっている場合、
CSS.marker-yellow {
background: linear-gradient(transparent 60%, #fff176 60%);
}
HTML側も同じクラス名にする必要があります。
HTML<span class="marker-yellow">マーカーを付けたい文字</span>
marker_yellow、maker-yellow、marker yellowのように少しでも違うと反映されません。
クラス名は半角英数字とハイフンを使い、分かりやすい名前にしておくと管理しやすくなります。
8-4. テーマやプラグインのキャッシュを削除する
キャッシュプラグインを使っている場合、CSSを変更しても古いCSSが表示され続けることがあります。
管理画面にキャッシュ削除ボタンがある場合は、まずキャッシュを削除しましょう。
また、CSSやJavaScriptを圧縮・結合するプラグインを使っている場合、変更が反映されるまでに時間がかかることがあります。設定画面から最適化ファイルを削除する必要がある場合もあります。
8-5. ブラウザキャッシュを削除して確認する
ワードプレス側のキャッシュを削除しても反映されない場合は、ブラウザキャッシュが原因かもしれません。
まずはページを強制再読み込みします。WindowsではCtrl + F5、MacではCommand + Shift + Rが使われることが多いです。
それでも変わらない場合は、シークレットウィンドウや別のブラウザで確認します。別ブラウザで正しく表示されるなら、元のブラウザにキャッシュが残っている可能性が高いです。
8-6. !importantを使うべきケースと注意点
どうしてもCSSが反映されない場合は、!importantを使う方法があります。
CSS.entry-content .underline-red {
text-decoration: underline !important;
text-decoration-color: red !important;
}
!importantを使うと、その指定が優先されやすくなります。
ただし、多用すると後からCSSを修正しづらくなります。まずはセレクタを具体的にする、読み込み順を確認する、キャッシュを削除するなどの対処を行い、それでも反映されない場合の最終手段として使いましょう。
9. ワードプレスの下線装飾におすすめの使い分け
下線は便利な装飾ですが、すべての強調に使えばよいわけではありません。
リンク、強調、注意喚起、見出し装飾など、目的に合わせて使い分けることが大切です。
9-1. 強調したい文字にはマーカー風下線を使う
本文中で重要な言葉を強調したい場合は、通常の下線よりもマーカー風下線がおすすめです。
通常の下線はリンクと混同されやすいですが、マーカー風の装飾であれば、強調表現として自然に見せられます。
たとえば、結論や注意点、読者に覚えてほしいポイントにだけマーカーを使うと、記事の読みやすさが向上します。
9-2. リンクには読者がリンクと分かる下線を使う
リンクには、読者がクリックできると分かるデザインを使うことが大切です。
文字色だけでリンクを表現すると、読者によっては見落とす可能性があります。特に本文中のリンクは、下線がある方がリンクとして認識されやすくなります。
ただし、デザイン上どうしても下線を消したい場合は、ホバー時に下線を表示したり、色を変えたりして、リンクであることが分かる工夫を入れましょう。
9-3. 見出しやボタンに下線を使う場合の注意点
見出しに下線を使うと、セクションの区切りが分かりやすくなります。
ただし、本文中の下線と見出しの下線が同じデザインだと、全体が単調に見えることがあります。見出しにはborder-bottomを使い、本文の強調にはマーカー風下線を使うなど、役割ごとにデザインを分けるとよいでしょう。
ボタンに下線を使う場合は注意が必要です。ボタンは背景色や枠線でクリック要素だと分かるため、下線を追加すると装飾が過剰になることがあります。ボタンでは下線よりも、ホバー時の色変化や影を使った方が自然です。
9-4. 下線を使いすぎると読みにくくなる理由
下線を使いすぎると、文章全体がごちゃごちゃして見えます。
読者は下線のある部分を重要だと認識します。そのため、下線が多すぎると、どこを読めばよいのか分かりにくくなります。
また、下線は文字の下に線が入るため、行間が詰まって見えることがあります。スマホでは特に読みづらくなる場合があります。
下線は「本当に強調したい部分だけ」に使うことが大切です。
9-5. SEOとユーザビリティを意識した文字装飾の考え方
下線そのものに直接的なSEO効果があるわけではありません。
しかし、読みやすい記事は読者の理解を助け、離脱を防ぎやすくなります。重要な部分が分かりやすく整理されている記事は、ユーザビリティの面で有利です。
SEOを意識するなら、下線やマーカーを使ってキーワードを無理に目立たせるのではなく、読者が内容を理解しやすくなるように装飾することが大切です。
文字装飾は、あくまで本文を読みやすくするための補助です。装飾が主役にならないよう、自然な使い方を心がけましょう。
10. よくある質問
ワードプレスの下線に関して、よくある疑問をまとめます。
10-1. ワードプレスの標準機能だけで下線は引ける？
ワードプレスの環境によっては、ブロックエディターの標準機能やショートカットで下線を引けます。
ただし、テーマやエディターの設定によっては、下線ボタンが見つからない場合もあります。その場合は、HTMLのuタグやCSSを使えば下線を設定できます。
シンプルな下線なら標準機能、デザインを調整したいならCSSを使うのがおすすめです。
10-2. 下線の色だけを変えることはできる？
できます。
CSSのtext-decoration-colorを使うと、文字色はそのままで下線の色だけを変えられます。
CSS.underline-red {
text-decoration: underline;
text-decoration-color: red;
}
文字色と下線色を別々にしたい場合に便利です。
10-3. リンクの下線だけを消しても問題ない？
リンクの下線を消すこと自体は可能です。
ただし、下線を消すとリンクだと分かりにくくなる場合があります。特に本文中のリンクは、読者が見落とさないようにすることが大切です。
下線を消す場合は、文字色を変える、ホバー時に下線を表示する、太字にするなど、リンクだと分かる別の工夫を入れましょう。
10-4. 下線とマーカー線の違いは？
通常の下線は、文字の下に細い線を引く装飾です。リンクや補足的な強調に使われることが多いです。
一方、マーカー線は文字の下半分に背景色を敷くような装飾です。重要なポイントを自然に目立たせたい時に向いています。
本文中で強調したい場合は、通常の下線よりもマーカー風下線の方が読みやすいことが多いです。
10-5. CSSが苦手な場合はプラグインを使うべき？
CSSが苦手な場合は、プラグインやテーマの装飾機能を使うのもよい方法です。
ボタン操作でマーカーや下線を追加できるため、初心者でも簡単に使えます。
ただし、プラグインに依存すると、プラグイン停止時やテーマ変更時に装飾が崩れる可能性があります。長く使うデザインは、少しずつCSSで管理できるようにしておくと安心です。
10-6. テーマ変更後に下線デザインが崩れた時はどうする？
テーマ変更後に下線デザインが崩れた場合は、まず新しいテーマのCSSが影響していないか確認しましょう。
特にリンク装飾、本文エリアのクラス名、見出しデザインなどはテーマごとに異なります。
以前のテーマで使っていたCSSが新しいテーマでは効かない場合、セレクタを変更する必要があります。検証ツールで現在のHTML構造を確認し、新しいテーマに合わせてCSSを書き直しましょう。
また、テーマ独自の装飾機能を使っていた場合は、テーマ変更によってその機能が使えなくなることがあります。重要な装飾は、テーマに依存しすぎない形で管理するのがおすすめです。
まとめ
ワードプレスで下線を引く方法には、ブロックエディター、HTMLタグ、CSS、プラグインやテーマ機能を使う方法があります。
簡単に下線を引きたい場合は、ブロックエディターの標準機能やuタグが便利です。下線の色、太さ、位置を細かく調整したい場合は、CSSを使いましょう。
特に、text-decoration-color、text-decoration-thickness、text-underline-offsetを使えば、通常の下線を見やすくカスタマイズできます。また、linear-gradientを使うと、マーカー風の下線も作れます。
下線が消えない場合は、text-decorationだけでなく、border-bottomやbox-shadowが原因になっていないか確認しましょう。反映されない場合は、CSSの記述ミス、クラス名の間違い、テーマやプラグインのキャッシュもチェックすることが大切です。
下線は便利な文字装飾ですが、使いすぎると読みにくくなります。リンクにはリンクだと分かる下線を使い、強調したい文字にはマーカー風下線を使うなど、目的に応じて使い分けましょう。