にぎわいアワードのフォント変更について

Question

お世話になっております。

にぎわいアワード→「縦スライド_ワイド」にてフォントを変更したく、
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
をタイトル部のCSSへ追加したところ、スライダーの動きが一瞬右上に寄って表示されてから
下へ動いてしまいます。
フォントは変えられないのでしょうか？

Accepted Answer

ECマスターズの田中です。

URLをお知らせいただき、ありがとうございます。

ページの構造を確認したところ、
フォントの変更によりタイトル部の高さが高くなりすぎて、
スライダー部に食い込んでしまうことが原因であることが
わかりました。

お手数ですが、
タイトル部がスライダー部に食い込むことのないよう、
CSSを下記のように修正して構造をご変更いただきますよう
お願いいたします。

.award-header の規則にて、
padding: 10px; を 6px 10px 0 10px; に変更
display: flex; を追記
align-items: flex-end; を追記

.award-header .title の規則にて、
float: left; を削除
flex: 1 1 auto; を追記

.award-header .day の規則にて、
padding-top: 10px; を削除
padding-bottom: 10px; を追記

Answer

ECマスターズの田中です。

フォントを変更すること自体は問題ないはずですが、
変更したことにより、スライダーの動作に何らかの影響が出ている可能性がございます。

実際のページを確認する必要がございますので、
お手数ですが、実際の表示が確認できるURLを
お知らせいただきますようお願いします。

フォーラムにてご返信いただきづらい場合は、
元質問右下の「投稿内容について報告する」よりお知らせ願います。

Answer

田中さま

返信ありがとうございます。
URLは
https://www.rakuten.ne.jp/gold/店舗/ecstation/awardA.html
です。
よろしくお願いします。

Answer

回答ありがとうございます。
ご返信いただいた内容へ変更したところ、無事表示されるようになりました。
ありがとうございました。