【WordPress】テキスト文字色をグラデーションにする方法

2025年7月5日

広告：ページ内にてアフィリエイト広告を利用しています。

ブログ記事やお店のサイトを作った際に、大きく目立たせたいテキスト文字列などをグラデーションで採色したいケースがありますね。赤や青など単色なら簡単ですが、グラデーションさせる場合はいったいどうするのでしょう？

グラデーションテキスト

テキスト色をグラデーションさせる方法はCSSを使って簡単に実施できます。コピーして利用できるよう、サンプルコードを本記事で紹介します。本記事では、テキスト文字の文字色をグラデーションする方法を解説します。どんどんグラグラしちゃいましょう！

＼自宅でする副業で月に〇万円の収入増があると嬉しすぎる！／

ココナラ副業を始めよう

【記事】ココナラで成功する方法はこちら

実際に４か月でプラチナランク（売り上げ10万円以上）を達成した筆者が、ココナラで成功する方法を詳しく解説します。こちらをクリックしてください

グラデーションサンプル

Point.

グラデーション
サンプル

テキスト文字の文字色をグラデーションさせるサンプルです。上下方向、左右方向、中心から外側に向けてのグラデーションなど、多様な表現が可能です。

上下のグラデーション

グラデーション

左右のグラデーション

グラデーション

中心から外側へのグラデーション

グラデーション

グラデーションの設定方法

Point.

グラデーション
設定方法

WordPress でテキスト文字の文字色をグラデーションさせる方法です。

Step.1 文字列を設定し、クラス名をつける

WordPress でテキスト文字列を配置して、ブロックの設定で追加CSSクラスに任意のクラス名（例：myGradientTextSample）を設定する

Step.2 CSS を設定する

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

CSSコードを設定する

設定するCSSのコードは下記です。

/* グラデーションテキスト */
.myGradientTextSample{
  background: linear-gradient(to top, #CC8D00, #FFF488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

赤字の部分で、方向、色を指定します。

上下方向	background: linear-gradient(to top, #CC8D00, #FFF488);
左右方向	background: linear-gradient(to right, #00FFD8, #E6F0FF);
中心から外へ	background: radial-gradient(circle, #ff8080, #000000);

完成です。追加CSSはサイト共通の場所になるので、他の記事内のテキストに同じグラデーションを使いたい場合は（テキストに）同じクラス名を設定するだけでグラデーションになります。（Step.1 だけやればいい）