サポート » 使い方全般 » 子テーマでブログ本文の日本語のみフォントを変更したい

  • 解決済 NCIT

    (@ncit)


    こんばんは。昨日Wordpressを始めたばかり、CSSLの知識もない初心者です。今までアメブロを運営していたのですが、こちらに移すことを決め、現在移行作業中です。

    昨日から10時間以上、あれこれ検索して試しているものの、うまくいかないので質問させてください。

    海外のサイトでテーマを購入しましたが、英語フォントが主体で作られているものですので、日本語が綺麗ではないため、記事本文の日本語の部分のみフォントを変更したいと思っています。日英両方で運営するブログですので、英語は現在のフォントを優先させたいと思っています。

    子テーマを作成し、Activateさせるところまではなんとか完了し、子テーマのStyle.cssに以下を打ち込んでみましたが、フォントに変化がありません。

    /* =Fonts
    ————————————————————– */
    body,
    input,
    textarea,
    .page-title span,
    .pingback a.url {
    font-family: 游ゴシック体, ‘Yu Gothic’, YuGothic, ‘ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;
    }

    そこで親テーマのStyle.cssを全コピーし、一個一個フォントの部分を探して「font-family: 游ゴシック体, ‘Yu Gothic’, YuGothic, ‘ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;」に書き換えるという地道な作業も試しましたが、全く変化なし。

    親テーマにはあちこちに「!important`」が埋め込まれており、これを全削除するなども考えたのですが、素人判断でぐちゃぐちゃになってしまっては…と思い留まりました。

    こんなざっくりとした相談で申し訳ございませんが、もしどなたか解決法がお分かりになる方がいらしたら、ぜひともお力を貸していただけないでしょうか。もう何十時間も取り組んでいるのですが一向に解決せず…。よろしくお願いいたします。

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • トピック投稿者 NCIT

    (@ncit)

    ちなみに、ページはこちらです。よろしくお願いいたします。

    gblsm

    (@gblsm)

    有償のテーマはテーマの購入先で問い合わせを受け付けてくれるのが一般的だと思いますので問い合わせなさってはいかがですか。このフォーラムでは有償のテーマを取り扱うことができません。

    トピック投稿者 NCIT

    (@ncit)

    こんばんは、ご丁寧にコメントありがとうございます。購入先に問い合わせてはいるのですが、海外ということもあるのかあまり協力的とはいえない対応でして、日本語のこととなるとわからないの一点張りで…。引き続きGoogle等で調べてみます。ありがとうございました。

    Honda

    (@rocketmartue)

    ページのhtmlソースを見たところ、子テーマのstyle.css(14行目)を読み込んだ後で、親テーマのstyle.css(53行目)が読み込まれています。
    複数のcssを読み込んだ場合、基本的に先に読み込んだcssが後から読み込んだcssで上書きされますので、この場合は、子テーマのstyle.cssが親テーマのstyle.cssで上書きされることになります。
    子テーマのstyle.cssを後から読み込むように、テーマファイルを変更するか、
    Simple Custom CSSのようなプラグインを使用すると良いかと思います。

    トピック投稿者 NCIT

    (@ncit)

    Rocket Martueさん、コメントありがとうございます。お忙しいところご確認いただいてありがとうございます。

    「子テーマのstyle.cssを後から読み込むように、テーマファイルを変更」の方法が調べても出てこなかったので、取り急ぎお勧めいただいたプラグインを入れてみました。便利そうで(ここに打ち込むタグが優先されるというものですよね)やってみたのですが、Updateを押すとロリポップの「このページへのアクセスは禁止されています」というエラーが出てしまいどうにもならず、現在ロリポップに問い合わせ中です。

    引き続きご意見等ありましたらお寄せいただけますと幸いです。

    トピック投稿者 NCIT

    (@ncit)

    ちなみに

    /* =Fonts
    ————————————————————– */
    body,
    input,
    textarea,
    .page-title span,
    .pingback a.url {
    font-family: 游ゴシック体, ‘Yu Gothic’, YuGothic, ‘ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;
    }

    のタグですと、現在の英語フォントも変更になってしまうのでしょうか?現在の親テーマで指定されているタグは英語の場合引き続き使用したいのですが、そのような設定は可能でしょうか?

    천궁 메텔

    (@digitmaetel)

    「このページへのアクセスは禁止されています」と出るのは不正アクセスによる改ざんを回避するセキュリティが有効になっているからです。
    ロリポップの WAF を一時的に無効にしましょう。

    トピック投稿者 NCIT

    (@ncit)

    맹조さん、ありがとうございます。無効にして試しましたが、変化ありませんでした。再度ログインをしたり、再起動をしてみましたが、変化ありません。時間をおいて再度やってみます。

    천궁 메텔

    (@digitmaetel)

    すぐはだめです。15分ぐらいはまたないと切り替わりませんよ。

    トピック投稿者 NCIT

    (@ncit)

    맹조さん、ありがとうございます。無事更新できました!

    が、フォントの変更は反映されませんでした。

    引き続き、アドバイスをいただける方はよろしくお願いいたします。

    Honda

    (@rocketmartue)

    子テーマのheader.phpで、<?php wp_head();?>の前に、
    <link rel="stylesheet" type="text/css" media="all" href="http://〇〇〇.com/wp-content/themes/simpleandcleanchild/style.css" />を記入していませんか?
    もしそうならば、その部分を削除して子テーマのfunction.phpに

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array('parent-style')
        );
    }

    を記入することで、親テーマのcssを読み込んだ後に子テーマのcssが読み込まれるようになります。

    トピック投稿者 NCIT

    (@ncit)

    RocketMartueさん、ありがとうございます。

    色々なウェブサイトを何十と見ていく中で「子テーマに作るのはStyle.cssのみで良い(変更する箇所だけで良い)」という記事を読んだので、Style.cssしか作っていません(functionは親テーマを反映させるために作りました)。そこに入れているのは、このコードだけです↓

    /* =Fonts
    ————————————————————– */
    body,
    input,
    textarea,
    .page-title span,
    .pingback a.url {
    font-family: 游ゴシック体, ‘Yu Gothic’, YuGothic, ‘ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;
    }

    今、ご提案いただいたコードをfunction.phpに入れてみたところ、こんな風になりました。フォントに変化はありません。

    本当に初心者で申し訳ないです。

    Honda

    (@rocketmartue)

    function.phpが無かったのなら、PHP 開始タグが抜けているからだと思います。
    下記のように修正してみてください。

    <?php // PHP 開始タグ - この前には、空白も含め何も書かないでください。
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array('parent-style')
        );
    }

    トピック投稿者 NCIT

    (@ncit)

    RocketMartueさん、度々すみません。

    function.phpがなかったのではなく、存在しており、そこに先ほどのコードを入れましたところ、現在のように表示されているという意味でした。言葉足らずで申し訳ないです。

    また、現在のfunction.phpには

    <?php
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    }
    ?>

    というコードがすでに存在しています。

    その部分を先ほどご提案頂いたコードに変えたところ、ページ自体が表示されなくなってしまいました。

    Honda

    (@rocketmartue)

    関数名がダブってるようなので、function.phpは一旦元に戻してください。

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • トピック「子テーマでブログ本文の日本語のみフォントを変更したい」には新たに返信することはできません。