![テキスト文字色をグラデーション](https://boonboonblog.com/wp-content/uploads/2022050676-1024x576.jpg)
ブログ記事やお店のサイトを作った際に、大きく目立たせたいテキスト文字列などをグラデーションで採色したいケースがありますね。赤や青など単色なら簡単ですが、グラデーションさせる場合はいったいどうするのでしょう?
グラデーションテキスト
テキスト色をグラデーションさせる方法はCSSを使って簡単に実施できます。コピーして利用できるよう、サンプルコードを本記事で紹介します。
\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/
目次
グラデーションサンプル
サンプル
テキスト文字の文字色をグラデーションさせるサンプルです。上下方向、左右方向、中心から外側に向けてのグラデーションなど、多様な表現が可能です。
上下のグラデーション
グラデーション
グラデーション
左右のグラデーション
グラデーション
グラデーション
中心から外側へのグラデーション
グラデーション
グラデーション
グラデーションの設定方法
設定方法
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 だけやればいい)
まとめ:テキストの文字色をグラデーションさせる方法
テキストの文字色をグラデーションさせる方法です。
記事やサイトの表現力がまた一つアップしますね。
ブログの作り方などについてココナラにて「支援作業」を販売しております。
よかったらご利用くださいませ。
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。