「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

先週(今週かも)テーマ更新したところA...
 
共有:
通知
すべてクリア

先週(今週かも)テーマ更新したところAMPテストによって「タグ「span」の属性「style」のプロパティ「-webkit-text-stroke-width」は許可されていません。」が多発。

5 投稿
5 ユーザー
3 Reactions
1,892 表示
(@ゆう)
New Member
結合: 6年前
投稿: 1
Topic starter  

わいひら様

お世話になります。

simplicityより、とても素晴らしいテーマ、使わせていただきありがとうございます。

さて、不具合報告の可能性が高く、ココに書き込ませていただきましたが、先週(今週?)のテーマ更新をしてから、サーチコンソールのAMPのエラー「タグ「span」の属性「style」のプロパティ「-webkit-text-stroke-width」は許可されていません。」が多発しています。

※以下の記事のテキスト画面のようになります。

https://shiny-heart.com/face-on-affiliate

文章中のいたるところに「<span style="display: inline !important; float: none; background-color: transparent; color: #545b63; cursor: text; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 500; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">・・・<strong>」

この記事に関しては1つでしたが、多いもので20カ所を超える場合もあります。

また、これは日に日に増えており、AMPの検索パフォーマンスも比例して低下しています。

現在はエラーになったものを随時1つ1つ削除して、URL検査をし、再インデックスをかけているところです。

しかし、非常に手間であり、とてもブログ作成に時間をかけることができません。

何か解決方法のようなものがあればお伺いしたいと思います。

お忙しいとは思いますが、よろしくお願い致します。

ゆう

 


   
引用
(@jamkun)
Estimable Member Registered
結合: 6年前
投稿: 158
 

私の環境では再現しているページが(現在判明分では)なかったため、環境情報も書いていただけるとスムーズな調査がなされるかもしれません。

テスト記事拝見したところ

書き出した出来事について「得意・不得意」を付ける

の部分に、ゆうさんのおっしゃっている問題があるようですね。添付画像のように、前後と違うフォントが指定されています。spanで指定されているタグどおりの動作ですね。

フォントを変えるような設定、もしくはビジュアルエディターでコピペしたところ無意識のうちに変わってしまっているのであれば、あり得る状況でしょうか。意図してフォントを変えているのであれば、お好みではありますが、子テーマのCSSに記述しエラーが発生しないよう修正したほうが、後々のメンテナンスも楽になるかと思います。

 

修正は、たとえばではありますが、「Search Regex」で

<span style="display

と検索し、一覧として出てきた記事を編集、テキストエディターで開き、Ctrl(Command)+Fで同じように文字列を検索、必要ないと判断すればタグを消して(プレビューして間違いないこと確認して)更新していくだけでも、エラーになったものから判断していくより楽にすべての該当記事編集にこぎつけられると思います。

新しいサーチコンソールでは、AMPエラーの「修正を検証」できるようになっていますので、クロール完了までは時間がかかりますが、即反映しないとマズい状況でなければ、上記のような修正完了後に修正を検証し、エラーゼロになるよう監視するだけでも負担は減るのではないでしょうか。検証だけで不十分に感じるのであれば、更新後にサイトマップを送ると、少しはクロールが早くなるかもしれません。

(たとえURL再検査を手動で行っても確実ではありませんので、どうしても修正完了したのに反映がなければ、Googleのフォーラムに相談する必要もあるかもしれません)


   
わいひら reacted
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

テーマの不具合ではなく、ゆうさんのサイトの特有の問題です。

AMP エラーの原因は、2 つあります。

1 つは、AMP に限らずサイトで使ってはいけない -webkit-text-stroke-width をお使いになっていること。

もう 1 つは、style 属性で !important をお使いになっていること。AMP では、!important は禁止されています。そもそも、style 属性は最も優先順位が高い CSS の指定方法です。その style 属性に、優先順位を無視して CSS を適用する !important は普通は書きません。

これまで AMP エラーが出ていなかったのは、Cocoon でも Simplicity でも AMP で style 属性をまるごと削除していたためです。

しかし、AMP で style 属性が使えるようになったため、Cocoon 1.3.3 から AMP で style 属性を削除しないように変更されました。

そのために、表面化していなかった問題が、一気に表面化しています。

すぐにでも AMP エラーを解消するには、下記のコードのどちらかを子テーマの functions.php に追加します。

Cocoon 1.3.2 以前と同じく AMP で style 属性を削除する場合

add_filter( 'convert_content_for_amp', function( $the_content ) {
  
  $the_content = preg_replace( '/ +?style=["][^"]*?["]/i', '', $the_content );
  $the_content = preg_replace( '/ +?style=[\'][^\']*?[\']/i', '', $the_content );
  
  return $the_content;
});

style 属性は残しつつ、-webkit-text-stroke-width と !important のみを削除する場合

add_filter( 'convert_content_for_amp', function( $the_content ) {
  
  $the_content = preg_replace( '/style="(.*?)-webkit-text-stroke-width:.*?;(.*?)"/i', 'style="$1$2"', $the_content );
  $the_content = preg_replace( '/style="(.*?)!important(.*?)"/i', 'style="$1$2"' , $the_content );
  
  return $the_content;
});

ただ、どちらのコードも対症療法です。

根本的に解決するには、-webkit-text-stroke-width と !important のご使用をおやめになるしかありません。

また、HTML に直接 style 属性を使うのは、基本的に非推奨です。

私であれば、-webkit-text-stroke-width と !important を削除。style 属性に書かれている CSS を子テーマの style.css や amp.css に移管。そして、style 属性を全て削除という作業を面倒でも全ての記事で行います。


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

!importantはampで非表示にされてないんですかね?

全ページの『 -webkit-text-stroke-width: 0px;』どのような指定をしているか不明ですが、それが不要であれば、その項目を置換ができるプラグインで削除していくのも手だと思います。

 

置換元を、はじめに半角を空けて『 -webkit-text-stroke-width: 0px;』で検索。置換後は何もない状態に。後に半角を空けて『-webkit-text-stroke-width: 0px; 』など。

はじめにテスト環境でどのようにふるまうか確認後、本番環境で復元できるデータベースのpostをエクスポートしてから、置換される文字列を確認しながらやってみるのも良いと思います。

あと。

いつもどのようにHTMLにいれてますか?手書きではないような気がしますが、アドクイックタグにそれを入れているなら、アドクイックに登録済みの『 -webkit-text-stroke-width: 0px;』を削除しないと新規ページも同じようになると思います。

 

イロイロ状況が不明なので説明が、分かる人しか分からないもので雑で申しわけないです。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16743
 

-webkit-と!importantが使われているインラインタグは、可能性は低いながらも今後もありえるかもしれないので、取り除く処理を加えておきました。
https://github.com/yhira/cocoon/archive/master.zip


   
返信引用
共有:

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

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

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

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

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

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

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

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