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

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

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

グラデーションサンプル

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

上下のグラデーション

グラデーション

グラデーション

左右のグラデーション

グラデーション

グラデーション

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

グラデーション

グラデーション

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

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

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

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

Step.2 CSS を設定する

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

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

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

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

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

まとめ：テキストの文字色をグラデーションさせる方法

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

記事やサイトの表現力がまた一つアップしますね。