子テーマを使って下さい。
（親テーマ以外に子テーマをダウンロードし、子テーマを有効にして下さい）

自動で子テーマCSSがリンクされ、親テーマCSSより優先されます。
また、変更するコードを子テーマCSSに記述しておけば、親テーマが更新に消されるなど影響を受けず。

https://wp-cocoon.com/downloads/#toc3

前略、miyumaruyamaさん

親テーマ、子テーマにつきましては以下の過去のトピックが参考になるかと思います。

[解決済] 親テーマと子テーマについてです。

https://wp-cocoon.com/community/postid/34811/

公式マニュアルページは以下です。

Cocoonテーマをインストールする方法

https://wp-cocoon.com/theme-install/

miyumaruyamaさん

子テーマを導入後、ダッシュボードの「外観」→「テーマファイルエディター」と辿ると「テーマを編集」のページが開くかと思います。

ここにCSSのコードを記述すればよろしいかと・・

私が変なことを言っているのかもしれません。

お問い合わせ内容は・・・。

投稿者:: @miyumaruyama

全てのページで、こちらの２つのcssが直書きなので、ほかのcssのようにlink rel='stylesheet'とする方法があれば教えていただきたいです。
<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>

これは、おそらくstyleタグで上記2つが出てくるので、それをやめて、styleシート化したい・・・というのことのように思うのですが・・・。

子テーマに関連するものなのでしょうか。

その方法については、私には分からないですし、それらについて詳しくはないですが・・・。

「global-styles-inline-css」については、ブロックテーマにて使用していて、クラシックテーマでは必要ない？
（良く分かっていませんが。）

「global-styles-inline-css」については、検索すれば、読み込み停止方法はいくつか見つかるようです。
（styleシート化はみつかりませんでした。）

「cocoon-style-inline-css」については、Cocoon設定に関連するもののように思いますが・・・。
（フォーラムに、過去トピックに読み込みを止めたいというものはあったようですが、それをするとCocoon設定のものがあたらなくなってしまうような・・・）

この辺は、良く分かりませんので、中途半端で申し訳ないですが、この辺で書くのは止めます。

今までの返信に対して、ご質問者さんのお返事もありませんし・・・。

そもそも、このようにしたい理由というのか、意図みたいなものが、良く分からず・・・。

私が書いていることも、上記のような、なんともはっきりしない感じで、お返事にもなっておらず、申し訳ないところです。

とどのつまり・・・。

もう少し、お問い合わせの意図など分かるようにしていただいた方が、伝わるかもしれないようには感じます。
（何が問題なのでしょう？）

それとは別に、子テーマはご利用になった方が良いとは思います。
（カスタマイズ有無にかかわらず）

私が変なことを言っているようでしたら、スルーしちゃってください。

miyumaruyamaさん　mk2さん

ご質問をよく読んでみると、mk2さんのおっしゃるとおりで、ご質問の内容とは違う回答を書いていたように思います。すみません。

私には以下の２つを外部ファイルにする方法はわかりません。

<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>

しかし、なぜそうしたいのか？という疑問は最初に浮かびます。

リフィトリーさん

ありがとうございます。

投稿者:: @leafytree

しかし、なぜそうしたいのか？という疑問は最初に浮かびます。

はい、私もこれをまず思いました。

@chu-ya 

chu-yaさま

早速のご回答をいただきありがとうございます。

子テーマを有効にしたらすぐに解決しましたm(_ _)m
大変初歩的なことでお恥ずかしいです。

ありがとうございました。

@leafytree 

リフィトリーさま

早速のご回答をいただきありがとうございます。

子テーマについて、ホームページを始めた最初の頃にダウンロードしていたはずが、どこかで無効になり気づいていませんでした。
大変初歩的なことでお恥ずかしいです。

ありがとうございました。

@mk2_mk2 

mk2さま

ご回答をいただきありがとうございます。

長いcssをhtmlに直書きするのは良くない、という教えを耳にしたのでstyleシート化したいと思ったのが質問のきっかけです。

私の返事が遅くすみませんでした。
子テーマが無効になっており、その点も大変初歩的なことでお恥ずかしいです。

ありがとうございました。

教えてくださった皆様、お時間をいただきありがとうございました。

トピ主なのに返事が遅く、また勉強不足が過ぎていて失礼いたしました。

感謝いたしますm(_ _)m

ご本人が解決済と仰っていますので、書かなくても良いのかもしれないとは思います。
ただ、正直良く分からないというところがあり、書いてしまいます。
（きっと私が分かっていないのでしょう）

miyumaruyamaさんのサイトの現状は、子テーマが有効になっているようには見えません。
（インストールなさっているようですが）

（再編集すると途中で切れてしまいますので、続きは分けます。再編集時には、文字数に制限があり、途中で切れる？）

そして、ローカル環境で試してみたところ。

解決なさっているようですが補足として…

cocoon-style-inline-cssは「Cocoon設定」のページで設定したものを反映するためのものです。文字サイズや行間など。

設定内容は当然サイトによって異なるので、実際にCSSファイルがテーマ内にあるわけではなく、設定内容に応じてコードを生成しています。なので「ほかのcssのようにlink rel='stylesheet'とする」ことはできません。

その上でインラインのCSSをなくしたいということであれば以下の感じでしょうか。

・cocoon-style-inline-cssの出力をやめる
→可能だと思いますが、Cocoon設定の内容はサイトに反映されなくなります。

・cocoon-style-inline-cssが出力している内容をコピペして手作業でCSSファイルを作成する
→こちらも可能だと思いますが、設定を変更したければCocoon設定でなくCSSファイルを書き換えることになると思います。

投稿者:: @miyumaruyama

長いcssをhtmlに直書きするのは良くない、という教えを耳にしたのでstyleシート化したいと思ったのが質問のきっかけです。

 「良くない」というのはページ表示速度が遅くなるからということでしょうか…？
それともコンテンツとデザインを記述する箇所は分けるべきということでしょうか…？

前者であれば、確かにそのような面もありますが、styleシート化するのもそれはそれでページ速度の低下に繋がります。

インラインであれば1ページにリクエストを送るだけでCSSの取得も済みますが、styleシート化するとその分別のリクエストを送る必要が出てきてしまいます。

「長いCSSを書くのは良くない」というのは「無くても動く、要らない内容は書かない方が良い」ぐらいだと思った方が良さそうです。

「良くない」理由が後者であれば、WordPressのようなCMS(自分でコードを書くのではない)であれば気にする必要はないと思います。

@mk2_mk2 

mk2さま

ご確認ありがとうございます。
おっしゃる通りでした。

有効化を押したあとソースを見に行った時に、右端で折り返すにチェック入れず、ザっと見ただけだったので「あのもじゃもじゃが無い！解決した！！！」と思い込んだだけの早とちりです。

今度こそ子テーマの方を有効化しました。

そして
<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>
も変化がないことも自分で直視してきました…。

「WordPressとCocoonのもの」なのですね。

気にする必要はないと書いていただき、おっしゃる通りだと思います。
今後は、自分の作業の高速化とか、早とちりをしないとか、こっちの方が圧倒的に気にした方がいいですよね…。

何度も相手をしてくださりありがとうございました。
がんばります。

@haruinoue 

はる様

私が早とちりで解決済と押してしまったのに、ご解答ありがとうございます。

cocoon-style-inline-cssは、ほかのようにink relができないのですね！
長いcssを直書きするとページ速度が低下するから良くない、というのをどこかで見たのですが、styleシート化してもそれなりに時間がかかる、ということで。

教えていただき感謝します。
私にとって必要な部分だと思うので、<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>は触らず、このままでいきたいと思います。

ありがとうございました。

miyumaruyamaさん

「PageSpeed Insights」でトップページを確認してみたところ、以下の状態でした。

• 携帯電話、96
• PC、99

 
最新の投稿ページでは、以下の状態でした。

• 携帯電話、87
• PC、98

 
特に、速度を気になさるような状態ではなさそうに思います。

これから、カスタマイズをもっとしていくうちに、Scriptや外部リソースなどの読み込みがあれば、「PageSpeed Insights」のスコアは悪くなると思います。

それらの重さに比べれば、問題にはならないレベルなような気はします。

投稿者:: @miyumaruyama

気にする必要はないと書いていただき、おっしゃる通りだと思います。
今後は、自分の作業の高速化とか、早とちりをしないとか、こっちの方が圧倒的に気にした方がいいですよね…。

そうですね。
今回のことはお気になさらずに、ブログを書くことに集中していただいて良いと思います。

@miyumaruyama さん

念のため、私も補足を書いておきます。

長いcssを直書きするとページ速度が低下するから良くない、というのをどこかで見たのですが、styleシート化してもそれなりに時間がかかる、ということで。

10 年ほど前は、直書きする CSS の量は 15 キロバイトまでにするのがいいと言われていました。ただ、現在は少なくとも 75 キロバイトは直書きしても問題ありません。

また、直書きした方が、サイトの表示速度は速くなるのが一般的です。そのため、直書きは積極的にするのが望ましいです。

尚、Cocoon 設定 > 高速化の「CSSを縮小する」は、CSS を 1 つにまとめて直書きします。この「CSSを縮小する」を有効にした場合、PageSpeed Insights のスコアはほぼ間違いなく良くなると思います。現在は有効にしていらっしゃらないですが、有効化をおすすめします。

@mk2_mk2 

mk2様

速度を確認してくださり感謝します。

今後カスタマイズをしながら速度が気になった時は「PageSpeed Insights」を使っていきます。

ありがとうございました。

@akira 

Akira様

補足をいただき感謝します。
CSSの直書きについて、現在は75キロバイトでも問題はないとのこと、覚えておきます。

CSSを縮小する、について有効にしておくのを忘れていました！
さっそく有効化してまいります。

ありがとうございました。