サポート » テーマ » twentyfourteenのフォント変更

  • 解決済 anumakatak

    (@anumakatak)


    公式テーマのtwentyfourteenを利用しているのですが、
    以下の部分のフォントの色、サイズ、形式を
    変更したいのですがうまくいきません。

    ①プライマリーメニュー
    ②セカンダリメニュー
    ③ウイジット
    ④投稿メニュー
    (詳細は以下の資料を確認いただけますでしょうか)
    https://docs.google.com/presentation/d/15OXeB9HS3l4V6-g5FbE1mFHd_e5WxHSXlybDd-nmQZQ/edit?usp=sharing

    一応、プラグインをインストール(styles: twentyfourteenとstylesという二つのプラグイン)して利用した所、①②④の色と文字の大きさは変更できましたが、フォント形式(明朝体、ゴシック体等)は変更できませんでした。

    そして、プラグインを停止して、子テーマのstyle.cssに

    —-
    /*
    Theme Name: npo-greengrass
    Template:twentyfourteen
    Theme URI:
    Description: 当サイト用にカスタマイズした子テーマ。
    Author: Sadaki Awada
    Author URI:
    */

    @import url(‘../twentyfourteen/style.css’);

    textarea {
    color: #2b2b2b;
    font-family: “メイリオ”,Meiryo,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”HiraKakuPro-W3″,”MS Pゴシック”,”MS PGothic”,Arial, Helvetica,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    }
    —-
    のようにtextareaを書き加えてみたのですが、うまくいきません。

    どうやったら、①−④の各部位のフォントの色、サイズ、形式を変更できるか、分かる方がいれば教えていただけませんでしょうか?

    お手数をおかけしますが、どうぞよろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • こんにちは

    チャイルドテーマを作成して、
    http://wpdocs.sourceforge.jp/Child_Themes

    チャイルドテーマのstyle.cssに以下のルールを追加すると変更できると思います
    値は、ご自身で必要な値に変更してください。

    @import url('../twentyfourteen/style.css');
    @import url(http://fonts.googleapis.com/css?family=Parisienne);
    
    .nav-menu li a{
        color:yellow;
         font-family: 'Parisienne', cursive;
    }
    .entry-header a,
    .header-main a,
    .primary-sidebar a{
        color:red;
         font-family: 'Parisienne', cursive;
         font-size:16px;
    }

    nobitaさん

    ご回答誠にありがとうございます!
    大変助かります。

    ただ、一部うまくいって、一部分からない部分があるので
    再度質問させていただいてよいでしょうか?

    まず、

    .nav-menu li a
    .entry-header a,
    .header-main a,
    .primary-sidebar a

    のそれぞれ指し示す箇所は以下のリンクの通りでよろしいでしょうか?
    https://docs.google.com/presentation/d/1wNR0FLnInDxDl4257e9NJRhxfVsbsGosLy0V0o0em18/edit?usp=sharing

    その場合、
    .entry-header a,
    .header-main a,
    .primary-sidebar a
    フォントサイズ、フォント形式についてはうまくいったのですが
    フォントカラーが反映されません。上記のリンクの通り
    .entry-header a,
    の下部投稿部分のみがフォントカラーが反映されている状態です。

    こちらは何か原因等おわかりになりますでしょうか?

    また
    .nav-menu li a
    に関しては、フォントサイズ、フォント形式、フォントカラー
    全てが反映されず、さらに
    .nav-menu li a{
    color:black;
    font-family: ‘Hiragino Mincho Pro’, cursive;
    font-size:16px;
    }
    をチャイルドテーマに追加した場合、他の箇所(.entry-header a,
    .header-main a,.primary-sidebar a)のフォントサイズが変わらなかったり、
    他の箇所のフォントカラーが勝手に変わってしまったりしてしまいます。
    (先ほど書いた.entry-header a,.header-main a,.primary-sidebar aについてと
    リンク先の画像は.nav-menu li aは削除している状態です)

    こちらも、もし何か原因等わかれば教えていただけませんでしょうか。

    また作成したチャイルドテーマは以下です。
    こちらは「.nav-menu li a」を含めた形で記載しています。
    —–
    /*
    Theme Name: npo-greengrass
    Template:twentyfourteen
    Theme URI:
    Description: 当サイト用にカスタマイズした子テーマ。
    Author: Sadaki Awada
    Author URI:
    */

    @import url(‘../twentyfourteen/style.css’);
    @import url(http://fonts.googleapis.com/css?family=Parisienne);

    .entry-header a{
    color:red;
    font-family: ‘Hiragino Mincho Pro’, cursive;
    font-size:16px;
    }

    .header-main a{
    color:red;
    font-family: ‘Hiragino Mincho Pro’, cursive;
    font-size:16px;
    }

    .primary-sidebar a{
    color:red;
    font-family: ‘Hiragino Mincho Pro’, cursive;
    font-size:16px;
    }

    .content-area {
    padding-top: 48px;
    }

    .hentry {
    margin: 0 auto 48px;
    max-width: 672px;
    }

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    margin: 0 auto;
    max-width: 600px;
    }

    .content-sidebar {
    margin-left: -25%;
    width: 25%;
    }

    —-

    「.content-area {」以下は以前作成した部分ですが、
    この「.content-area {」以下を全部削除しても事象は変わりませんでした。

    大分複雑になりお手数をおかけしますが
    もしお分かりになればご回答いただけますと幸いです。

    デフォルトの状態で、簡単にテストしているだけなので、anumakatakさんがサイトを構築する過程で、指定したスタイルと、コンフリクトしているかもしれないですね。

    ブラウザ、要素を検証等を使って、スタイルが打ち消しあっていないかどうかチェックしてみてください。

    nobitaさん

    ご指摘通り、フォントや色系のプラグインが問題だったようです。

    位置から作り直し、以下を子テーマに追加した所うまくいきました!!

    .entry-header a{
    background:#faf0e6;
    color:#440000;
    font-family: ‘Arial’, cursive;
    font-size:14px;
    }

    .header-main a{

    color:#440000;
    font-family: ‘Arial’, cursive;
    font-size:14px;
    }

    .primary-sidebar a{

    color:#440000;
    font-family: ‘Arial’, cursive;
    font-size:14px;
    }

    .secondary-navigation a{
    color:#440000;
    font-family: ‘Arial’, cursive;
    font-size:14px;
    }

    この度は、誠にありがとうございました^^
    とても助かりました。感謝感謝です。

    無事解決しました!

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「twentyfourteenのフォント変更」には新たに返信することはできません。