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

2024年7月8日

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

グラデーションテキスト

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

ポイント

本記事では、

テキスト文字の文字色をグラデーションする方法を解説します。

どんどんグラグラしちゃいましょう！

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 グラデーションサンプル
2 グラデーションの設定方法
- 2.1 Step.1 文字列を設定し、クラス名をつける
- 2.2 Step.2 CSS を設定する
3 まとめ：テキストの文字色をグラデーションさせる方法

グラデーションサンプル

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 だけやればいい）