Cocoon Child: style.css・editor-style.cssの読み込み順位について - 不具合報告

RE: Cocoon Child: style.css・editor-style.cssの読み込み順位について

かうたっく — Fri, 23 Mar 2018 14:41:26 +0000

https://wp-cocoon.com/community/bugs/cocoon-child-style-css%E3%83%BBeditor-style-css%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E9%A0%86%E4%BD%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/#post-398

たしかに！その方がfontの見栄えが良いですね＾＾

私がつい意味のない先読みをしてしまってダメでした…。『CSSに書いた事が反映されない‥どうして？』と言う書き込みをつい想定してしまいました＾＾；

editor-style.cssのスタイルとかで、important指定をしてもダメでしょうか？

body・#tinymce、どちらも指定方法に間違いないので!importantでも問題なく表示されます。

お忙しい中、ご回答ありがとうございました！

RE: Cocoon Child: style.css・editor-style.cssの読み込み順位について

わいひら — Fri, 23 Mar 2018 14:19:14 +0000

editor-style.cssのスタイルとかで、important指定をしてもダメでしょうか？

RE: Cocoon Child: style.css・editor-style.cssの読み込み順位について

わいひら — Fri, 23 Mar 2018 14:16:31 +0000

ビジュアルエディタースタイルは、以下の順番で適用しています。

function editor_stylesheets_custom($stylesheets) {
  array_push($stylesheets,
    FONT_AWESOME_CDN_URL,
    get_template_directory_uri().'/style.css',
    get_theme_css_cache_file_url(), //テーマ設定で変更したスタイル
    get_template_directory_uri().'/editor-style.css'
  );
  //スキンが設定されている場合
  if (get_skin_url()) {
    array_push($stylesheets,
      get_skin_url()
    );
  }
  //子テーマがある場合、子テーマ内のスタイルも読み込む
  if (is_child_theme()) {
    array_push($stylesheets,
      get_stylesheet_directory_uri().'/style.css',
      get_stylesheet_directory_uri().'/editor-style.css'
    );
  }
  //_v($stylesheets);
  return $stylesheets;
}

editor-style.cssは後からのようです。
子テーマのfunctions.phpに上記関数を貼り付けて呼び出し人を変えることにより、CSSの読み込み順を変更はできます。

RE: Cocoon Child: style.css・editor-style.cssの読み込み順位について

わいひら — Fri, 23 Mar 2018 14:12:28 +0000

Cocoon 設定、全体　より『キーカラー』『サイトキーカラー』で『#dd9933』を設定した際、公開ブログの投稿記事内『h2タグ』のフォント色が白くなるようです。

これは現在そういった仕様にしています。

白にしたくない場合は、テキストからも変更するという形になります。

Cocoon Child: style.css・editor-style.cssの読み込み順位について

かうたっく — Fri, 23 Mar 2018 13:32:10 +0000

Cocoon設定画面より、背景画像を入れたとき画像サイズが大きくなったため、style.cssに背景全てを指定しました。

body {
 background-image: url(https://bibabosi-rizumu.com/wp-content/uploads/2016/02/nuno.png);
 background-repeat: repeat;
 background-position: top left;
 background-attachment: fixed;
 background-size: auto;
}

これが管理画面『投稿』より『投稿一覧』の『ビジュアル』エディタのbodyにも反映するので

body {
 background-image: none;
}

を入れても反映しません。読み込み順番かな？と思ったんですが、不明です。

#tinymce {
 background-image: none;
}

上記で反映します。以下がHTML抜粋です。