ナビや各タイトルの書体を変更したい。(英語を小文字で表示させたい)

質問一覧Category: Landscapeナビや各タイトルの書体を変更したい。(英語を小文字で表示させたい)
Rr_asrr_as asked 2か月 ago

上部のナビ(HOME ABOUTなど)や、TOPICS、FEATURED PRODUCTSなどのフォントを変更したいです。
上記の部分も含め、カテゴリを英語の小文字混じりで登録した場合でもすべて大文字表記になってしまうので困っています。登録した通り、小文字で表示させることは可能でしょうか。
HTML編集での追記で解決できる場合、あまり詳しくないので・・どの辺に追加すれば良いかも教えていただけると助かります。
よろしくお願いいたします。

2 Answers
BaseDesignInfoBaseDesignInfo Staff answered 2か月 ago

ご質問ありがとうございます。
ご質問内容の「書体」というのは、大文字小文字の区別という意味でしょうか?
あるいは指定したいお好みのフォントがあり、それを適用させたいという意味でしょうか?すでに使いたいフォントが決まっていて、CSSを書き込む場所だけ知りたいということであれば、比較的簡単な作業となりますのでご案内することができます。
どうぞよろしくお願いいたします。

Rr_asrr_as replied 2か月 ago

分かりにくくてすみません・・
フォントの指定をしたいことと、大文字小文字が混じった表記をしたいことの2点です。

フォントを変えれば小文字が表示されるようでしたら、フォントの指定方法だけ教えていただければと思います。
(「TOPICS」もHTML上では「Topics」になっているので、すべて大文字なのは使われているフォントの特性でしょうか?)

可能でしたら下記部分について、
それぞれフォントの指定をする方法を教えていただきたいです。
・ヘッダーナビ部分
・TOPICSなどのタイトル部分
・サイドナビ部分

よろしくお願いいたします。

BaseDesignInfoBaseDesignInfo Staff answered 2か月 ago

詳細ありがとうございます。
まず独自のCSSを追加する方法についてはごく一般的なものですのでここでは省略し、分かりやすく解説されているサイトをいくつか紹介させていただきます。
http://css.uka-p.com/basic/header.html
https://techacademy.jp/magazine/4872

次にrr_asさんの場合に実際にどんなCSSを追加すればよいかですが、

■大文字小文字をそのままにする

.menu li,
#featuredItems h2, #newsbox h2, h2.category-title,
.widget.category ul li a, .widget.guide ul li a { text-transform: none; } 


■フォントを変更する
.menu li { font-family: 利用したいフォント名;} 
#featuredItems h2, #newsbox h2, h2.category-title { font-family:利用したいフォント名 ;} 
.widget.category ul li a, .widget.guide ul li a { font-family: 利用したいフォント名;}

となります。
これらはHTMLを見るとすべて分かる内容ですが、それぞれ
・ヘッダーナビ部分:.menu li
・TOPICSなどのタイトル部分:#featuredItems h2, #newsbox h2, h2.category-title
・サイドナビ部分:.widget.category ul li a, .widget.guide ul li a
がそれぞれの項目を指しています。

 

現状はLandscapeのデザインとしてそれぞれが指定されています。
個々の嗜好によるカスタマイズはHTML編集で対応が必要となりますが、利用者さま全員にとってメリットのある改善があれば随時アップデートにて取り入れていますので、どうぞよろしくお願いいたします。

Rr_asrr_as replied 2か月 ago

ありがとうございました!出来ました!

あと、すみません・・
AboutページとContactページのタイトル部分だけいろいろ試してみたんですが出来ませんでした。こちらのフォントの変更方法を教えていただけますでしょうか。

よろしくお願いいたします。

BaseDesignInfoBaseDesignInfo Staff replied 2か月 ago

よかったです。
About、Contacty、プライバシーポリシー、特定商取引法に基づく表への指定は以下のとおりです。

#law h2, #privacy h2, .inquirySection h1, .static_wrap #about h2 {

}