CSS、見出しのカラー

Question

https://saruwakakun.com/html-css/reference/h-design

このサイトのグラデーション見出しの『影をつけてみた場合』の背景グラデーションのカラーを変更したいです。
#ff9a9e,#fecfef
この二色を使ってグラデーションにしたいのですが文字色の部分を変えるとうまく反映されません。

どのようなCSSの記述にすればいいでしょうか？

よろしくお願いします。

.widgettitle {
  background: linear-gradient(45deg,#ff9a9e,#fecfef)!important;}
.header {
  background: linear-gradient(45deg,#ff9a9e,#fecfef)!important;
}
.entry-content h2 {
  position: relative;
  padding: 0.2em 0.5em;
  background: -webkit-linear-gradient(to right, #ff9a9e, #fecfef);
  background: linear-gradient(to right, #ff9a9e, #fecfef);
  color: white;
  font-weight: lighter;
	}

Comments

[hatena19]

うまくいっていない現状のCSSを提示してください。

[pikachan]

.entry-content h2:after {
position: relative;
padding: 0.2em 0.5em;
background: -webkit-linear-gradient(to right, #ff9a9e,#fecfef);
background: linear-gradient(to right, #ff9a9e,#fecfef);
color: white;
font-weight: lighter;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}
ありがとうございます。こちらです。

[hatena19]

質問は編集できますので、質問の方に追記してください。
また、コードはマークダウンのコードブロックに入れてください。

あと :after は不要では。

Answer 1

h1 {
  position: relative;
  padding: 0.2em 0.5em;
  background: -webkit-linear-gradient(to right, #ff9a9e, #fecfef);
  background: linear-gradient(to right, #ff9a9e, #fecfef);
  color: white;
  font-weight: lighter;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

のように記載すれば適応されます。

また、cssのみで後で色を変更などしたいなら

:root {
  --color1: #ff9a9e;
  --color2: #fecfef;
}
h1 {
  position: relative;
  padding: 0.2em 0.5em;
  background: -webkit-linear-gradient(to right, var(--color1), var(--color2));
  background: linear-gradient(to right, var(--color1), var(--color2));
  color: white;
  font-weight: lighter;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

のような感じで記載を行うと変更しやすいです。

Comments

[pikachan]

ご丁寧にありがとうございます！！
無事にできました！
本当に助かりました(´；ω；`)

[pikachan]

ちなみになのですが、、、
モバイルでは反映されないのですが
何か追加でCSS必要でしょうか？

[hatena19]

メディアクエリでなにかしているはずですので、その部分のCSSを提示してください。

[pikachan]

ありがとうございます。
メディアクエリとはどの部分でしょうか(´；ω；`)

[pikachan]

今子テーマに入れているコードを載せました。

[hatena19]

メディアクエリが分からなければスルーしてください。
差支えなければサイトのURLを提示してもらえると検証しやすいのですが。

[pikachan]

ありがとうございます。
サイトのURLはこちらです。
https://www.freshnews-pikapika.com/
よろしくお願い致します(;o;)

[hatena19]

リンク先の記事をスマホで確認してみましたが、グラデーションは反映されているようですが、どこがご希望と異なっているのでしょうか。

[pikachan]

本当ですか！私のスマホiPhoneで、Safariでみているのですが
何度やっても反映されていないです。
ヘッダーロゴの背景も、グラデーションではなく単色のままなのですが反映されていますか？ウィジェットタイトルの背景も単色のままですし、見出しも反映されていないです。

[pikachan]

すみません、スマホのキャッシュがクリアになっていないのが原因だったようで
無事に反映されていました。
本当にありがとうございました！
助かりました（ ; ; ）