サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
20
投稿
6
ユーザー
33
Reactions
1,241
表示
Topic starter
2022年9月11日 16:36
はじめまして。初心者の丸山と申します。
いつもお世話になっております。
不具合・カスタマイズ対象ページのURL: https://kosodate.earth/
相談内容:
全てのページで、こちらの2つのcssが直書きなので、ほかのcssのようにlink rel='stylesheet'とする方法があれば教えていただきたいです。
<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>
解決のために試したこと:
縮小化を解除し、プラグインを全部無効化にしました。
環境情報:
----------------------------------------------
サイト名:子育てQ
サイトURL: https://kosodate.earth
ホームURL: https://kosodate.earth
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
WordPressバージョン:6.0.2
PHPバージョン:7.4.28
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.9
カテゴリ数:8
タグ数:1
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
----------------------------------------------
よろしくお願いいたします。
2022年9月11日 16:52
子テーマを使って下さい。
(親テーマ以外に子テーマをダウンロードし、子テーマを有効にして下さい)
自動で子テーマCSSがリンクされ、親テーマCSSより優先されます。
また、変更するコードを子テーマCSSに記述しておけば、親テーマが更新に消されるなど影響を受けず。
2022年9月11日 18:14
前略、miyumaruyamaさん
親テーマ、子テーマにつきましては以下の過去のトピックが参考になるかと思います。
[解決済] 親テーマと子テーマについてです。
https://wp-cocoon.com/community/postid/34811/
公式マニュアルページは以下です。
Cocoonテーマをインストールする方法
miyumaruyama and わいひら reacted
2022年9月11日 21:25
私が変なことを言っているのかもしれません。
お問い合わせ内容は・・・。
全てのページで、こちらの2つの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設定のものがあたらなくなってしまうような・・・)
この辺は、良く分かりませんので、中途半端で申し訳ないですが、この辺で書くのは止めます。
今までの返信に対して、ご質問者さんのお返事もありませんし・・・。
そもそも、このようにしたい理由というのか、意図みたいなものが、良く分からず・・・。
私が書いていることも、上記のような、なんともはっきりしない感じで、お返事にもなっておらず、申し訳ないところです。
とどのつまり・・・。
もう少し、お問い合わせの意図など分かるようにしていただいた方が、伝わるかもしれないようには感じます。
(何が問題なのでしょう?)
それとは別に、子テーマはご利用になった方が良いとは思います。
(カスタマイズ有無にかかわらず)
私が変なことを言っているようでしたら、スルーしちゃってください。
2022年9月11日 21:41
miyumaruyamaさん mk2さん
ご質問をよく読んでみると、mk2さんのおっしゃるとおりで、ご質問の内容とは違う回答を書いていたように思います。すみません。
私には以下の2つを外部ファイルにする方法はわかりません。
<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>
しかし、なぜそうしたいのか?という疑問は最初に浮かびます。
2022年9月11日 21:49
リフィトリーさん
ありがとうございます。
しかし、なぜそうしたいのか?という疑問は最初に浮かびます。
はい、私もこれをまず思いました。
Topic starter
2022年9月12日 08:30
Topic starter
2022年9月12日 08:32
リフィトリーさま
早速のご回答をいただきありがとうございます。
子テーマについて、ホームページを始めた最初の頃にダウンロードしていたはずが、どこかで無効になり気づいていませんでした。
大変初歩的なことでお恥ずかしいです。
ありがとうございました。
リフィトリー reacted
Topic starter
2022年9月12日 08:34
mk2さま
ご回答をいただきありがとうございます。
長いcssをhtmlに直書きするのは良くない、という教えを耳にしたのでstyleシート化したいと思ったのが質問のきっかけです。
私の返事が遅くすみませんでした。
子テーマが無効になっており、その点も大変初歩的なことでお恥ずかしいです。
ありがとうございました。
Topic starter
2022年9月12日 08:38
教えてくださった皆様、お時間をいただきありがとうございました。
トピ主なのに返事が遅く、また勉強不足が過ぎていて失礼いたしました。
感謝いたしますm(_ _)m
2022年9月12日 12:36
解決なさっているようですが補足として…
cocoon-style-inline-cssは「Cocoon設定」のページで設定したものを反映するためのものです。文字サイズや行間など。
設定内容は当然サイトによって異なるので、実際にCSSファイルがテーマ内にあるわけではなく、設定内容に応じてコードを生成しています。なので「ほかのcssのようにlink rel='stylesheet'とする」ことはできません。
その上でインラインのCSSをなくしたいということであれば以下の感じでしょうか。
・cocoon-style-inline-cssの出力をやめる
→可能だと思いますが、Cocoon設定の内容はサイトに反映されなくなります。
・cocoon-style-inline-cssが出力している内容をコピペして手作業でCSSファイルを作成する
→こちらも可能だと思いますが、設定を変更したければCocoon設定でなくCSSファイルを書き換えることになると思います。
長いcssをhtmlに直書きするのは良くない、という教えを耳にしたのでstyleシート化したいと思ったのが質問のきっかけです。
「良くない」というのはページ表示速度が遅くなるからということでしょうか…?
それともコンテンツとデザインを記述する箇所は分けるべきということでしょうか…?
前者であれば、確かにそのような面もありますが、styleシート化するのもそれはそれでページ速度の低下に繋がります。
インラインであれば1ページにリクエストを送るだけでCSSの取得も済みますが、styleシート化するとその分別のリクエストを送る必要が出てきてしまいます。
「長いCSSを書くのは良くない」というのは「無くても動く、要らない内容は書かない方が良い」ぐらいだと思った方が良さそうです。
「良くない」理由が後者であれば、WordPressのようなCMS(自分でコードを書くのではない)であれば気にする必要はないと思います。
リフィトリー and miyumaruyama reacted
Topic starter
2022年9月12日 19:26
mk2さま
ご確認ありがとうございます。
おっしゃる通りでした。
有効化を押したあとソースを見に行った時に、右端で折り返すにチェック入れず、ザっと見ただけだったので「あのもじゃもじゃが無い!解決した!!!」と思い込んだだけの早とちりです。
今度こそ子テーマの方を有効化しました。
そして
<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>
も変化がないことも自分で直視してきました…。
「WordPressとCocoonのもの」なのですね。
気にする必要はないと書いていただき、おっしゃる通りだと思います。
今後は、自分の作業の高速化とか、早とちりをしないとか、こっちの方が圧倒的に気にした方がいいですよね…。
何度も相手をしてくださりありがとうございました。
がんばります。
Topic starter
2022年9月12日 19:36
はる様
私が早とちりで解決済と押してしまったのに、ご解答ありがとうございます。
cocoon-style-inline-cssは、ほかのようにink relができないのですね!
長いcssを直書きするとページ速度が低下するから良くない、というのをどこかで見たのですが、styleシート化してもそれなりに時間がかかる、ということで。
教えていただき感謝します。
私にとって必要な部分だと思うので、<style id='global-styles-inline-css'>
<style id='cocoon-style-inline-css'>は触らず、このままでいきたいと思います。
ありがとうございました。
2022年9月12日 19:51
miyumaruyamaさん
「PageSpeed Insights」でトップページを確認してみたところ、以下の状態でした。
- 携帯電話、96
- PC、99
最新の投稿ページでは、以下の状態でした。
- 携帯電話、87
- PC、98
特に、速度を気になさるような状態ではなさそうに思います。
これから、カスタマイズをもっとしていくうちに、Scriptや外部リソースなどの読み込みがあれば、「PageSpeed Insights」のスコアは悪くなると思います。
それらの重さに比べれば、問題にはならないレベルなような気はします。
気にする必要はないと書いていただき、おっしゃる通りだと思います。
今後は、自分の作業の高速化とか、早とちりをしないとか、こっちの方が圧倒的に気にした方がいいですよね…。
そうですね。
今回のことはお気になさらずに、ブログを書くことに集中していただいて良いと思います。
2022年9月12日 20:03
念のため、私も補足を書いておきます。
長いcssを直書きするとページ速度が低下するから良くない、というのをどこかで見たのですが、styleシート化してもそれなりに時間がかかる、ということで。
10 年ほど前は、直書きする CSS の量は 15 キロバイトまでにするのがいいと言われていました。ただ、現在は少なくとも 75 キロバイトは直書きしても問題ありません。
また、直書きした方が、サイトの表示速度は速くなるのが一般的です。そのため、直書きは積極的にするのが望ましいです。
尚、Cocoon 設定 > 高速化の「CSSを縮小する」は、CSS を 1 つにまとめて直書きします。この「CSSを縮小する」を有効にした場合、PageSpeed Insights のスコアはほぼ間違いなく良くなると思います。現在は有効にしていらっしゃらないですが、有効化をおすすめします。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。