サイト全体に「モダンブラック 」スキン適用中。

AMPページで読み込むCSSを選択したい | 要望 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
AMPページで読み込むCSSを選択した...
 
Share:

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

  RSS

ぶちくま
 ぶちくま
(@ぶちくま)
ゲスト
参加: 3か月 前
投稿: 3
2018年12月13日 07:53  

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

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

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

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

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

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

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

 


未解決
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2018年12月13日 08:35  

こんにちは。

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

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

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

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

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

This post was modified 3か月 前 by かうたっく

わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2018年12月13日 22:07  

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

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


ぶちくま
 ぶちくま
(@ぶちくま)
ゲスト
参加: 3か月 前
投稿: 3
2018年12月14日 23:50  

かうたっく様

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

親テーマは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)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2018年12月15日 22:27  

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2018年12月15日 22:54  

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2018年12月16日 06:44  

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

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

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

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2018年12月16日 19:11  

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

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

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

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

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

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

This post was modified 3か月 前 2 times by わいひら

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2018年12月16日 22:49  

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

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

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

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


ぶちくま
 ぶちくま
(@ぶちくま)
ゲスト
参加: 3か月 前
投稿: 3
2018年12月17日 12:08  

わいひら様

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

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

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

かうたっく様

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

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

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


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2018年12月17日 17:19  

お疲れ様でございます!

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

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

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

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

もうすでに不要ですね!

お疲れさまでした^^


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2018年12月17日 20:25  

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

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

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

This post was modified 3か月 前 by わいひら

わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2018年12月17日 20:29  

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


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
○アダルト・出会い系サイト可

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
○アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon
  
動作中

ログイン または 登録 してください

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