hacesjapan asked 4年 前
現状、見出しフォントと本文フォントに使用できるフォントが”ゴシック体”と”明朝体”しかないのですが、”ゴシック体”を”游ゴシック”に替えたいと思っております。
その場合、HTMLのどこをどのように修正すればフォントを変更できるでしょうか。
ご教示いただけたら幸いです。
BaseDesignInfo Staff answered 4年 前
ご質問ありがとうございます。
「游ゴシック」を使用したいということで、「游ゴシック」をウェブ上で利用するにはどのようなCSSを書いたら良いかを理解されているという前提でアドバイスさせていただきます。
UNIVERSEにはHTML編集をしなくても、設定項目として追加のCSSだけを追加できるようになっています。
適用させたいCSSが決まっていれば、それをデザイン編集画面の一番下「独自CSS」に入力してください。
「独自CSS」は一番最後に適用されますので、フォント設定よりも優先されます。
対象とするHTML要素は、ご自身のショップを表示させた状態でHTMLソースを表示して確認できます。
「.hero h2」に対して指定し「 !important 」をすればおそらく適用されると思います。
よろしくお願いいたします。
hacesjapan
replied 4年 前 お返事ありがとうございます。
独自CSSに
Body{
font-family: -apple-system, BlinkMacSystemFont, Roboto, “Segoe UI”, “Helvetica Neue”, HelveticaNeue, “游ゴシック体”, YuGothic, “游ゴシック Medium”, “Yu Gothic Medium”, “游ゴシック”, “Yu Gothic”, Verdana, “メイリオ”, Meiryo, sans-serif;
font-weight: 500;
}
このように入力したのですがヘッダーとフッターにしか効きません。それ以外の部分を変えるにはどのようにすれば良いでしょうか。
bodyだけでは弱いかもしれませんね。サイト全体で細かく指定されていますのでセレクタの個別性を考え、細かいセレクタ名を指定したり、アスタリスク、!importantなど組み合わせてみてはいかがでしょうか。
hacesjapan
replied 4年 前 ありがとうございます。
頂いたアドバイスをもとにコード変更したらうまくいきました。
以下、他の方検索した際に参考になるようコードを載せさせていただきます。
body{
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif !important;
font-weight: 500;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif !important;
font-weight: 400;
}
よかったです。参考情報、ありがとうございます！
