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

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など Simplicity タイトル下のメニュー(グローバルナビ)文字の大きさとフォントの変更の仕方を教えて頂けますか?

このトピックには8件の返信が含まれ、1人の参加者がいます。2 ヶ月、 2 週間前 Akira さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #36440 返信

    Massan

    はじめてのブログで、Simplicityを使わさせていただいています。
    シンプルでカスタマイズも簡単で初心者でもいろいろできてありがたいです。

    いろいろ検索して調べたのですがわかりません。

    Simplicity タイトル下のメニュー(グローバルナビ)文字の大きさと
    フォントを変更したいのですが、やり方を教えて頂けますか?

    以下のサイトのようなフォントにしたいのですが、
    http://www.masalog.me/simplicity-customize/

    宜しくお願い致します。

  • #36444 返信

    Hidekichi

    該当サイトのリンク部分は、

    font-family: ‘Quicksand’, “游ゴシック体”, “Yu Gothic”, YuGothic, “ヒラギノ角ゴシック Pro”, “Hiragino Kaku Gothic Pro”, ‘メイリオ’ , Meiryo , Osaka, “MS Pゴシック”, “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と同じ設定で表示されます。

  • #36495 返信

    Massan

    Hidekichiさま

    大変丁寧な説明ありがとうございます。

    Simplicity1.9.3: スタイルシート (style.css)
    に以下を記入すればいいのですね。 

    例えばフォントのサイズを17にしてOswaldというフォントを使いたい場合

    #navi ul li {
    font-size: 17;
    color: #333;
    font-family: Oswald
    }
    #navi ul li a {
    font-size: inherit;
    color: inherit;
    }

    ずっとSimplicity childを編集していて
    うまくいかず悩んでました。

    フォントの大きさ反映されました。ありがとうございました。

  • #36496 返信

    Hidekichi

    > Simplicity1.9.3: スタイルシート (style.css)
    > に以下を記入すればいいのですね。

    いえ、カスタマイズの内容は子テーマstyle.cssに書きます。
    また

    font-family: Oswaldだけではダメです。
    たいていはokですが、
    font-family: Oswald,sans-serifも付け加えるべきです。

  • #61855 返信

    松浦

    いつもお世話になっております。
    グローバルメニューのフォントサイズを小さくしたく、こちらの記事を参考に子テーマのstyle.cssに以下の記述を記載しても反映されません。以前から何回かチャレンジしていますが、変更できず困っています。

    /* グローバルメニューのフォント・サイズ設定 */
    #navi ul li a {
    font-size: 8

    https://kuu-satsu.com/

    フォントを小さくしたい理由は、タイトルが少し長くなると、グローバルメニューの中で文字が折り返して、見た目がおかしくなるからです。できれば、枠の大きさも大きくできるとありがたく思います。

    お忙しいなか恐縮ですが、よろしくお願いいたします。

  • #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.# が抜けてはいないでしょうか。

  • #61858 返信

    Akira

    できれば、枠の大きさも大きくできるとありがたく思います。

    これは 子メニューの幅のことでしょうか。だとすると、このような CSS で最低限の幅を指定できます。

    #navi ul.sub-menu,
    #navi ul.children {
      min-width: 200px;
    }

    200px は、Simplicity のデフォルト値です。

  • #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;
    }

    お忙しい所恐縮ですが、以上よろしくお願いいたします。

  • #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 の部分までコメントアウトの対象になっています。

返信先: Simplicity タイトル下のメニュー(グローバルナビ)文字の大きさとフォントの変更の仕方を教えて頂けますか?
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)