Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

AMPページで読み込むCSSを選択した...
 
共有:
通知
すべてクリア

[解決済] AMPページで読み込むCSSを選択したい

13 投稿
3 ユーザー
2 Reactions
3,263 表示
(@ぶちくま)
New Member
結合: 6年前
投稿: 3
Topic starter  

質問というよりは要望になると思いますのでこちらに失礼します。

1.4.3からAMPページは子テーマのstyle.cssを読み込むようになりました。

子テーマのスタイルシートを読み込まない設定もできますが、その場合、親テーマのstyle.css

だけを読み込む仕様だと認識しています。

以前のように親テーマstyle.css +amp.cssも読み込むような仕様に選択できるとAMPエラー対応の幅が広がって助かります。

とはいえ、一貫して子テーマのスタイルシートを読み込んだ方が今後の利用者にとってメリットは大きいと思いますので、対応の予定があるかどうかだけ教えていただけますと幸いです。

Cocoon、とても使いやすくて重宝しています。

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

こんにちは。

今バージョンアップして確認しました。

以前のように親テーマstyle.css +amp.cssも読み込むような仕様に選択できるとAMPエラー対応の幅が広がって助かります。

以前の仕様は親テーマamp.css+子テーマamp.cssで表示させていたので、子テーマstyle.css書いてある装飾はAMPではバッサリ削除したものにして調整してました。

  • ampエラーが劇的に減るからです

そのような『対応をしている』人がどれだけ居るかは不明ですが。とりあえず最新版でスタイルを有効にしておきます。

This post was modified 6年前 by かうたっく

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

以前のように親テーマstyle.css +amp.cssも読み込むような仕様に選択できるとAMPエラー対応の幅が広がって助かります。

現在も、「親テーマのstyle.cssとamp.css」は読み込む仕様になっていると思うのですが、読み込まれませんか?
もしかして「親テーマのstyle.cssと親テーマのamp.cssと子テーマのamp.css」を読み込む設定を作るということですか?


   
(@ぶちくま)
New Member
結合: 6年前
投稿: 3
Topic starter  

かうたっく様

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

親テーマはamp.cssを読み込んでいたのですね、間違えておりました。私は子テーマのamp.cssに50000byteを超えないようにCSSを調整していました。

<blockquote>子テーマstyle.css書いてある装飾はAMPではバッサリ削除したものにして調整してました。</blockquote>

つまり、子テーマのstyle.cssまで読み込むと大幅に記述量が増えてしまうので、AMPページに対しては独自のスタイルシートが読み込める仕様の方がありがたいな、ということでした。私もAMPページに対しては、ばっさり削除したCSSで調整していました。

わいひら様

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

私の勉強不足で、誤解を生じるような投稿になってしまいました。申し訳ございません。

AMPページに対しては、50000byteを越えないために調整された、控えめなAMP用のCSSを読み込む設定ができるとありがたい、という内容で投稿したつもりでした。

<blockquote>もしかして「親テーマのstyle.cssと親テーマのamp.cssと子テーマのamp.css」を読み込む設定を作るということですか?</blockquote>

親テーマの読み込むCSSに関しては、1.4.3以前の仕様のままで構いません。style.cssもamp.cssもどちらも読み込んでいたのであれば、その仕様のままで大丈夫です。

子テーマに関しては、style.css(普通のページ用なので記述量多い)は読み込まずに、amp.css(AMP用に節約したCSS)だけ読み込む、という仕様を選択できると助かります。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

子テーマに関しては、style.css(普通のページ用なので記述量多い)は読み込まずに、amp.css(AMP用に節約したCSS)だけ読み込む、という仕様を選択できると助かります。

申しわけないですが、そういった特殊な設定はわかり辛くするだけなので、機能追加まではしないと思います。
その設定をどれだけ利用する人がいるのかといえば、ほとんどいないと思われます。
generate_style_amp_custom_tag関数のカスタマイズで対応していただくしかないかもしれません。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

一応、簡単に出来るようにしてみました。
まず以下でアップデートして、
https://github.com/yhira/cocoon/archive/master.zip

子テーマのfunctions.phpに以下のコードを書き込めば、子テーマのstyle.cssは読み込まれなくなると思います。

add_filter( 'amp_child_css', function(){
  return '';
} ) 

ただ、コードの動作確認はしていないので、うまくいかない場合は元に戻せる状態にして試してみてください。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

そういった特殊な設定はわかり辛くするだけなので、機能追加まではしないと思います。

ただこの設定って、50000バイトを超えるスキンにも有効だと思います。

今は、残念。とあきらめてる人が多いですが。スキンのCSSをamp.cssに貼り付け、ヘッダー~記事下。フッターのみスタイルを残し、切り捨てる項目をバッサリ削除すれば、それなりに対応できそうかもです。

(メディアクエリの重複:PCビューを読み込んでモバイルビューを読み込む項目が、もしあれば修正なども必要そうですが)

AMPでも通常ページと同じ印象を受ける(デザインが全く違う別サイト感てき印象が減る)と思います。

現状はCSSの編集にくわえて、functions.phpで試さなきゃダメなのか…。とハードルが高そうなので、誰かユーザーさんがそんな記事を作れば

検索したユーザーだけでも、反映させることも可能かもですけどね。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

ただこの設定って、50000バイトを超えるスキンにも有効だと思います。

今は、残念。とあきらめてる人が多いですが。スキンのCSSをamp.cssに貼り付け、ヘッダー~記事下。フッターのみスタイルを残し、切り捨てる項目をバッサリ削除すれば、それなりに対応できそうかもです。

上でも書いたように、それだけややこしい機能を追加しても「その機能を利用した上で、さらにそのようなカスタマイズをする人がどれだけいるのか?」ということだと思います。

おそらく、これまでの経験上全体の1%の方も利用されないのではないかと推測します。
機能追加するのでしたら、1割くらいの人は利用する機能にしたいです。せめて5%ぐらいの方は利用する機能でないと、設定画面で余計なスペースをとるだけだと僕は考えます。

現状はCSSの編集にくわえて、functions.phpで試さなきゃダメなのか…。とハードルが高そうなので、

この返信の冒頭で引用したようなことをするよりは、こちらで書いたfunctions.phpでの編集の方が、三行コピペするだけなので手軽に思うのですが。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

需要が少ない的判断は揺るがないよ。って事ですね。

私の言ってた事は全て多数派のこと『ではない』感じです。

3行のコピペと言うより、PHPだけでNoooo~っとなってしまう人のことをつい考えてしまいがちだったりするのかもです。

色んな実装お疲れさまです❦


   
(@ぶちくま)
New Member
結合: 6年前
投稿: 3
Topic starter  

わいひら様

ありがとうございます! 無事、AMPエラー回避できました!

私個人としても、わいひらさんにはより多くの人にとってメリットの大きいCocoon開発に集中していただければと思います。このような投稿にもお付き合いいただき、ありがとうございました。いただいたコードは無事エラーを吐き出すことなく、元気に稼働しています!

今後は子テーマのamp.cssの存在意義が薄れそうなので、何れにせよ自分でテーマをいじる力をつけていかないとダメそうですね。Cocoonテーマはこれからも楽しく使っていきたいですし、その中でも自分らしさを出せるよう、頑張ります!

かうたっく様

お恥ずかしい話、私自身が「PHP!? NOOOOO!」となってしまう人でした。できることならあまり触りたくない。。。実際、今回のアップデート対応も一回、画面白くなりました(笑)

需要としては、アプリーチやRinkerなど外部機能でコード生成されたものを実装されている、サイトデザインをできる限りは統一したい、自作HTMLタグで「タイトル付きのボックス」など作りたい、かつ「どうしてもAMP対応させたい」人となりますかね。というか私なんですけどね。

お付き合いいただきありがとうございました! ちなみに、FTPテーマダウンロードについてかうたっく様のブログ拝見して勉強させてもらいました、重ねてお礼申し上げたいです。


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

お疲れ様でございます!

画面が白くなると焦るかもですが、後から思えばいい経験?だと思った事も多々あったり、人と変わった見かたをする変わり者だったりするタイプです。個人的に ?

「PHP!? NOOOOO!」だったんですね。ですが終わってみれば簡単だったり、何がダメか分かればやっぱり良い経験と思ってしまいます^^;

FTPのバックアップとか、早く復元するために準備することとか、アレコレ書いてるので眠れない日にでもどうぞ ? 

簡易的バックアップ!初心者用WordPressファイル内説明と、5秒で復元する方法

もうすでに不要ですね!

お疲れさまでした^^


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

需要がない機能を全て取り入れていては、何でもかんでも詰め込んだだけのインターフェースになってしまい、どうしても使いづらくなってしまうと思います。
1個や2個程度ならすぐには問題にはなりません。けれど、ある程度の基準がないと、バージョンアップごとにどんどん使いづらくなると思います。
やはり、需要のない部分はカスタマイズで対応していただくしかないと思います。やはり専門性のあるテーマでもない限り機能化するにあたっては汎用性は大切です。

※今回元々僕の設定ミスから来る部分なので、大変申しわけないのですが、それと需要のない機能の追加は、別として判断させていただいています。

amp.cssは、本来AMPページのみに対応させたい場合に記述するためのCSSです。
AMPだと、imgがamp-imgタグなどに置き変わってしまい、表示上の不具合が出る場合があります。
そういった場合に、CSSで調整するために本来は用意してあります。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

以前からできる限りやってはいるのですが、今回のように大変なカスタマイズが必要な場合は、出来る限り簡略化して書けるように今後ともしていこうと思います。
その方が、コード側で制御したい方にもやさしい設計になると思うので。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました