Simplicity タイトル下のメニュー（グローバルナビ）文字の大きさとフォントの変更の仕方を教えて頂けますか？

このトピックには9件の返信、1人の参加者があり、最後に松浦により4年、 4ヶ月前に更新されました。

9件の返信スレッドを表示中

投稿者

投稿
- 2016年2月13日 8:36 AM #36440 返信
  
  Massan
  ゲスト
  
  はじめてのブログで、Simplicityを使わさせていただいています。
  シンプルでカスタマイズも簡単で初心者でもいろいろできてありがたいです。
  
  いろいろ検索して調べたのですがわかりません。
  
  Simplicity タイトル下のメニュー（グローバルナビ）文字の大きさと
  フォントを変更したいのですが、やり方を教えて頂けますか？
  
  以下のサイトのようなフォントにしたいのですが、
  http://www.masalog.me/simplicity-customize/
  
  宜しくお願い致します。
- 2016年2月13日 10:37 AM #36444 返信
  Hidekichi
  ゲスト
  該当サイトのリンク部分は、
  
  font-family: ‘Quicksand’, “游ゴシック体”, “Yu Gothic”, YuGothic, “ヒラギノ角ゴシック Pro”, “Hiragino Kaku Gothic Pro”, ‘メイリオ’ , Meiryo , Osaka, “ＭＳＰゴシック”, “MS PGothic”, sans-serif !important;
  
  これらが設定されています。
  左から適用される優先順位順ですが、webfontは日本語が無いものが多いのでそれらもいくつか候補があるようです。
  Macなら游ゴシック体が無い場合、ヒラギノ角ゴシックが適用され、もし無い場合はその後の候補をチェックし、更に最終的にどれも見つからなかった場合はその端末のデフォルトのゴシック(sans-serif)を表示するようになっています。
  
  OS X MavericksとWindows 8.1は游ゴシック体が入っているみたいなので、webfontのQuicksandでアルファベットが適用され、日本語には游ゴシック体が適用するみたいですが、うちのlinuxな環境だと日本語はTakaoPGothicがあたっています。
  これらはF12等で表示されるブラウザのデベロッパーツールで確認できます。firefoxならパネル右側の「フォント」タブなど。
  
  Simplicityのメニューは、
  #navi ul li aにfont-sizeが設定されています。よって、通常のやり方で、#navi ul liにプロパティを設定してもその中のaがあるので上書きできません。
  直接#navi ul li aに設定を書くか以下のようにします。
```
#navi ul li {
  font-size: n;
  color: #333;
  font-family: /*何かしら*/
}
#navi ul li a {
  font-size: inherit;
  color: inherit;
}
```
  font-familyは#navi ul li aには設定されていないので、liに書いとけばよいです。これで#navi ul li aはその親である#navi ul liの設定を継承しますので#navi ul liに設定を書くだけでそのリンクもinheritが指定してあるプロパティは#navi ul liと同じ設定で表示されます。
- 2016年2月14日 6:05 AM #36495 返信
  
  Massan
  ゲスト
  
  Hidekichiさま
  
  大変丁寧な説明ありがとうございます。
  
  Simplicity1.9.3: スタイルシート (style.css)
  に以下を記入すればいいのですね。　
  
  例えばフォントのサイズを１７にしてOswaldというフォントを使いたい場合
  
  #navi ul li {
  font-size: 17;
  color: #333;
  font-family: Oswald
  }
  #navi ul li a {
  font-size: inherit;
  color: inherit;
  }
  
  ずっとSimplicity childを編集していて
  うまくいかず悩んでました。
  
  フォントの大きさ反映されました。ありがとうございました。
- 2016年2月14日 10:12 AM #36496 返信
  
  Hidekichi
  ゲスト
  
  > Simplicity1.9.3: スタイルシート (style.css)
  > に以下を記入すればいいのですね。
  
  いえ、カスタマイズの内容は子テーマstyle.cssに書きます。
  また
  
  font-family: Oswaldだけではダメです。
  たいていはokですが、
  font-family: Oswald,sans-serifも付け加えるべきです。
- 2019年6月30日 11:31 PM #61855 返信
  
  松浦
  ゲスト
  
  いつもお世話になっております。
  グローバルメニューのフォントサイズを小さくしたく、こちらの記事を参考に子テーマのstyle.cssに以下の記述を記載しても反映されません。以前から何回かチャレンジしていますが、変更できず困っています。
  
  /* グローバルメニューのフォント・サイズ設定 */
  #navi ul li a {
  font-size: 8
  
  https://kuu-satsu.com/
  
  フォントを小さくしたい理由は、タイトルが少し長くなると、グローバルメニューの中で文字が折り返して、見た目がおかしくなるからです。できれば、枠の大きさも大きくできるとありがたく思います。
  
  お忙しいなか恐縮ですが、よろしくお願いいたします。
- 2019年7月1日 10:38 AM #61857 返信
  Akira
  ゲスト
  子テーマの style.css に、このようにお書きになっています。
```
/* アンダーラインカスタマイズ */
under {
    font-weight: bold;
    background: linear-gradient(transparent 60%, #66ccff 60%);

/* グローバルメニューのフォント・サイズ設定 */    
#navi ul li a {
font-size: 6;
}
```
  フォントサイズが反映されない原因は、2 つあります。
  
  1 つは、under { が閉じられていないこと。もう 1 つは、font-size の単位がないこと。このように修正すると反映されると思います。
```
/* アンダーラインカスタマイズ */
under {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #66ccff 60%);
}

/* グローバルメニューのフォント・サイズ設定 */    
#navi ul li a {
  font-size: 6px;
}
```
  それと、under {} ですが、under というタグはありません。class であれば .under、id であれば #under と . か # が抜けてはいないでしょうか。
- 2019年7月1日 10:45 AM #61858 返信
  Akira
  ゲスト
  できれば、枠の大きさも大きくできるとありがたく思います。
  
  これは子メニューの幅のことでしょうか。だとすると、このような CSS で最低限の幅を指定できます。
```
#navi ul.sub-menu,
#navi ul.children {
  min-width: 200px;
}
```
  200px は、Simplicity のデフォルト値です。
- 2019年7月6日 9:13 PM #61869 返信
  
  松浦
  ゲスト
  
  Akira 様
  
  いつもお世話になっております。
  ご返信ありがとうございます。
  
  単純な記述ミスがあり恐れ入ります。underの｝閉じ抜けに関しては修正いたしました。
  それで、フォントをご指摘のように単位を入れて変更してみたのですが、色々値を変更しても丁度良い大きさに変更できませんでした。現状のサイズか、極端に小さいか、あるいは極端に大きいか、どれかにしか変更されませんでした。ブラウザーはエッジを利用していますが、Chromeも同様でした。キャッシュは毎回クリアして確認しています。6px～16px位まで振ってみましたが、小さい方は6か8位になると急に小さくなる、9から12間は全く変わらず、14にするとデフォルトの大きさ、大きい方もどこかで急激に大きくなります。
  
  また、子メニューのサイズに関しても、ご指摘の記述を入れても反映されませんですた。min-width: 400px; に変更しても何も変化しない状況です。現在、以下の記述となっています。
  
  /* グローバルメニューのフォント・サイズ設定 */
  #navi ul li a {
  font-size: 14px;
  }
  
  /* グローバルメニューの子メニューサイズ最低幅
  #navi ul.sub-menu,
  #navi ul.children {
  min-width: 400px;
  }
  
  お忙しい所恐縮ですが、以上よろしくお願いいたします。
- 2019年7月6日 11:05 PM #61870 返信
  Akira
  ゲスト
  ①フォントサイズに関して
  
  Chrome のデベロッパーツールで子テーマの style.css を変更すると、一応フォントサイズは変更できました。12px にすると 12px に。10px にすると 10px にと、任意のフォントサイズになりました。
  
  おっしゃっている症状の原因がはっきりとしないのですが、子テーマの style.css に 1 ヶ所おかしな部分がありました。
```
/* 「日付」「SNSボタン」「RSSボタン」を非表示 */
#post-xx(1桁ならx) .article .post-meta { 
 display: none; 
}
```
  日本語がセレクター名に入っているため、これ以降の CSS が変になるのかもしれません。この部分の削除、またはコメントアウトをされるとどうなるでしょうか。
  
  ②子メニューの幅に関して
  
  子メニューの幅が変更できないのは、コメントアウトされているためです。
```
/* グローバルメニューの子メニューサイズ最低幅
#navi ul.sub-menu,
#navi ul.children {
  min-width: 400px;
}
```
  /* グローバルメニューの子メニューサイズ最低幅の最後に */ がないために、CSS の部分までコメントアウトの対象になっています。
- 2019年11月27日 12:24 AM #62255 返信
  
  松浦
  ゲスト
  
  Akira 様
  
  お返事大変おそくなりましたが、解決しましたのでご連絡いたします。
  素人ミス連発をお助け頂きましてありがとうございました。
  キャッシュ（サーバ側？、ローカル側？）の兼ね合いもあるのか、フォントと子メニュー幅の関係の制限があるのかわかりませんが、変更が反映されたりされなかったりするのが、気になりますがとりあえず所望の形になりました。ありがとうございました。
投稿者

投稿