WordPressの文字装飾｜蛍光ペン風に設定する方法

文章の中で「ここだけ少し強調したい」「でも派手すぎるのは嫌だ」という場面はよくあります。

そんなときに便利なのが、蛍光ペン風の文字装飾です。

WordPress（標準・SWELL）では標準の装飾だけだと色数が限られていますが、 CSSを少し追加するだけで、6色でも10色でも自由に“蛍光ペンでの色塗り風”を作れます。

この記事では、

• 文字の下だけに色が入る蛍光ペン風
• 空白に色が乗らない
• 標準・SWELL（テーマ）と相性の良い方法 をまとめておきます。

1. 追加CSSにコードを貼る

WordPress管理画面から 外観 → カスタマイズ → 追加CSS を開き、以下のコードを貼ります。

css

/* 蛍光ペン風：文字の下に細く色を引く（6色） */

.ul-yellow {
  background: linear-gradient(transparent 70%, #fff59d 70%);
  box-decoration-break: clone;
  display: inline;
}

.ul-pink {
  background: linear-gradient(transparent 70%, #ffccde 70%);
  box-decoration-break: clone;
  display: inline;
}

.ul-green {
  background: linear-gradient(transparent 70%, #c8f7c5 70%);
  box-decoration-break: clone;
  display: inline;
}

.ul-blue {
  background: linear-gradient(transparent 70%, #cce5ff 70%);
  box-decoration-break: clone;
  display: inline;
}

.ul-orange {
  background: linear-gradient(transparent 70%, #ffe0b2 70%);
  box-decoration-break: clone;
  display: inline;
}

.ul-purple {
  background: linear-gradient(transparent 70%, #e1bee7 70%);
  box-decoration-break: clone;
  display: inline;
}

このCSSのポイント

• 文字の下30%だけに色が入る
• 空白には色が乗らない
• 複数行でも自然に色が続く
• SWELLの装飾と干渉しない

2. 実際の使い方（ブロックエディタ）

1. 色をつけたい文字を選択
2. 右側の「高度な設定」→「追加CSSクラス」
3. 以下のいずれかを入力
   • ul-yellow
   • ul-pink
   • ul-green
   • ul-blue
   • ul-orange
   • ul-purple

これだけで、蛍光ペン風の下線が文字の下にだけ入るようになります。こんな感じですね。

3. 太さや色味を調整したい場合

太さを変える

• もっと細く → transparent 80%
• 少し太く → transparent 60%

色味を変える

• 淡くしたい → 色コードを明るめに
• くすませたい → 彩度を落とす（例：#e8e2c8 など）

4. なぜこの方法が便利なのか

• SWELL標準の4色制限を超えられる
• 文章の“温度”を壊さずに強調できる
• CSSを1回設定すれば、以後はクラス名を入れるだけ
• 自分のサイト文化に合わせて色を育てていける

まとめ

WordPressでは、CSSを少し追加するだけで、 自分だけの蛍光ペン風装飾を自由に作れるようになります。

文章の流れを邪魔せず、 必要なところだけそっと光らせる—— そんな“強調”を作りたいときに、ぜひ使ってみてください。