サポート » テーマ » 子テーマが作れない

  • 解決済 YUTO

    (@yuto)


    私が初心者なので、おそらく皆様にとっては超初級の質問になってしまうかと思います。。

    子テーマが作れない(親テーマが反映されない)ので質問です。
    自分なりに半日かけて調べましたが、私と同じような人がいませんでしたのでご教授お願いします。

    CSSをいじりたく、子テーマを作ろうと思っています。
    テーマはTwenty Twelveを使っています。以下のようにすれば子テーマを作れると調べました。

    1.階層
    public_html/wp-content/themes/child
    というようにTwenty Twelveのフォルダがある階層に子フォルダを作り、その中にstyle.cssというファイルを作りました。

    2.ファイルの中身
    style.cssのファイルの中に以下のコードを入力しました。
    —————————
    @charset “utf-8″;
    /*
    Theme Name: child
    Description: twentytwelve theme の子テーマ
    Author: ○○○
    Author URI: http://○○○.com/
    Template:twentytwelve
    Version:1.1
    */

    @import url(‘../twentytwelve/style.css’);
    ————————————–
    その後、ダッシュボードのテーマの管理から子テーマを有効にしました。

    するとレイアウトが崩れてしまっています。
    ブログを始めたばかりですので、まだ記事やCSSなどはいじっておりません。
    @import url(‘../twentytwelve/style.css’);
    さえ記述すれば、デフォルトのレイアウトが表示されると思ったのですが、レイアウトは崩れたままです。
    なぜだかお分かりになりますでしょうか。

    また、最悪twentytwelveのスタイルシートをまるごと子テーマにコピペしたら大丈夫かと思ったのですが、それもだめでした。

    子テーマを作ってCSSをいじれるようになるためにはどのようにすればいいでしょうか。
    年末のお忙しい中見てくださってありがとうございます。ぜひご回答お待ちしています。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • YUTOさん

    ご質問文にて示されている子テーマの style.css のコードを拝見するに、シングルクォーテーション(’)やダブルクォーテーション(”)が全角のようです。子テーマの style.css では半角で記述していますか?

    tecking様

    早速のご回答本当にありがとうございます。

    確かに全角で記述されていましたので、半角に直しましたが、やはり反映されませんでした。。

    また、サーバーにファイルをアップして、ダッシュボードのテーマの編集からコードを確認すると、@charset “utf-8”;があるにもかかわらず、日本語で入力している部分が
    Description: twentytwelve theme �̎q�e�[�}
    のように記号になっていましたので、直うちで修正しました。
    この箇所は必須ではないと調べたので、問題はないと思いますが、なぜこのようになってしまうんでしょう。。

    YUTOさん

    @charset “utf-8”; が記述されていても、実際にはutf-8で保存されていない状態ではないでしょうか?
    WindowsならTeraPadなどのテキストエディタで開いてみて、「ファイル」→「文字/改行コード指定保存」などで確認してみてはどうかと思います。

    テーマを『Twenty Twelve』に戻せばスタイルシートが適用される、『child』にしたときにスタイルシートが適用されないということなら、子テーマの style.css のパス指定が怪しいのですが……

    親テーマ・子テーマの style.css はこのように配置されていますか?

    wp-content/themes/twentytwelve/style.css
    wp-content/themes/child/style.css

    余談ですが

    @charset “utf-8”;があるにもかかわらず、日本語で入力している部分が
    Description: twentytwelve theme ??q?e?[?}
    のように記号になっていましたので、直うちで修正しました。

    style.css がShift-JISで保存されているのでUTF-8で保存し直した方がよいかとおもいます。
    (UTF-8で保存すれば、1行目の @charset “utf-8”; も不要でしょうし)

    kurudrive様

    ご返信本当にありがとうございます。
    確認しましたところ、おっしゃるとおりで、文字の問題は解決しました。ありがとうございます。

    あとは子テーマが反映されない件ですが、ひとつわかったのですが、Googlechromeで開くと問題なく表示されますが、IEだとやはりレイアウトが崩れているようです。
    なぜこのようになってしまうのでしょうか。。

    tecking様

    2度もありがとうございます。

    >親テーマ・子テーマの style.css はこのように配置されていますか?
    >wp-content/themes/twentytwelve/style.css
    >wp-content/themes/child/style.css

    もう一度確認しましたが、やはり正しいようでした。
    上記と重複してしまいますが、Googlechromeでは問題なく表示されますが、IEだとレイアウトが崩れているようです。

    UTF-8の件ありがとうございます!

    IEだとレイアウトが崩れているようです。

    ということは、スタイルシートは一応適応されているとの解釈でOKでしょうか? 具体的に、どのへんのレイアウトが崩れてますか? IEのバージョンもおきかせください。

    ちなみに『Twenty Twelve』はレスポンシブデザインのテーマで、ブラウザのウインドウ幅によってレイアウトが可変する仕組みとなっていますので念のため。

    tecking様

    ご返信ありがとうございます。

    chromeだと大丈夫なので、一応適応されているということだと思います。そして今確認したところiPhoneでも大丈夫だったので、サファリでも大丈夫ということかと思います(はじめてiPhoneで見たので、スマホ表示だと、もともとこの表示なのかどうかわかりません。。)

    IEで表示すると、子テーマのファイルに何も記述しなかった時のようになっております。(全く適応されていないような状態)

    バージョンは9.0.8112.16421 (Windows Vista SP2)でした。
    ご迷惑をかけてすみません。

    tecking様

    解決できました。tecking様のお時間をいただきながら、理由がしょうもなく大変申し訳ないのですが、キャッシュが原因でした。。
    tecking様が半角の指摘をしていただいたおかげで解決できましたので本当に本当に感謝しております。

    貴重なお時間ありがとうございました。私もtecking様のように人に教えられるようになるよう頑張ります。

    また何かあればよろしくお願いします。

    YUTOさん、解決してなによりです。

    ちなみに子テーマの読み込みかたして wp_enqueue_style() という関数を使う方法もあるので、いずれお時間のあるときに試してみてくださいね。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「子テーマが作れない」には新たに返信することはできません。