タグ「style amp-custom」の CSS 構文エラーですを修正してみますタグ「style amp-custom」のCSS構文エラーを修正してみた【AMP対応】

Google Search Console（サーチコンソール）を見ていると、
「タグ『style amp-custom』のCSS構文エラーです」と表示されることがあります。私も5ページ分エラーが出てしまい、最初は原因がわからず戸惑いました。
今回は、実際に試してみた修正方法と結果をまとめました

⚙️ AMPエラーの内容

google search consolede で調べるとまたAMPが５ページエラーになっています

タグ「style amp-custom」の CSS 構文エラーです

「style amp-custom」の CSS 構文エラーをクリックすると

すべて;font-display:swap}}</style>のコードがエラー

エラーのページが出てきました ５ページ全部調べたらすべて同じコードがエラーになっていました

;font-display:swap}}</style>どうやらこの部分がAMPで正しく解釈されず、構文エラー扱いになっていたようです。

🧩 原因を調べてみる

この font-display:swap は、ウェブフォントの読み込み中の表示方法に関する指定です。
AMPページではCSSの記述に制限があるため、
テーマやプラグインの自動最適化でコードが壊れてしまうことがあります。

WordPressで「font-display:swap エラー」と検索してみると、
（Kobe Wingさん）が詳しく説明されていました

対策法「ウェブフォント読み込み中のテキストの表示」PageSpeed Insights テーマLuxeritas | Kobe Wing ここに入って見たら その他、編集後記 この変更後、「キー リクエストのプリロード」が発生する可能性があります。どちらの方が速度早いかで、採用する方を決定すればいいかと思います。後の読み込みに回したものを優先的に読んでねって言われているので、どっちが良いかは、速度の結果次第かな・・・ <link rel=”preload” href=”https://kobewing.com/wp-content/themes/luxeritas/style.async.min.css” crossorigin> 今回の対策をやめて、代わりにヘッダーに上記のように今回いじったファイルをpreloadで先読みにした方が「キー リクエストのプリロード」になり、結果的にPageSpeed Insights の診断結果が上がるときがありそうです。この記事記載後の、このサイトは最終的には、この記事の内容の採用を辞め、ヘッダーにこのコードを入れる方が点数がよかったです。

Kobe　Wing　さんより引用

🧠 試した修正方法

最初はテーマエディターを開いて修正しようとしましたが、
「このテーマを直接編集すると不具合が発生する可能性があります」という警告が出たので中止。

代わりに、Kobe Wingさんの記事で紹介されていた
「ヘッダーに preload を追加する方法」を試すことにしました。

🪄 ヘッダーにコードを追加

紹介されていたコードはこちらです👇

Cocoonの場合は、管理画面から以下の手順で追加できます。

1. 「Cocoon設定」→「アクセス解析・認証」タブを開く
2. 「ヘッダー用コード」に上記のコードを貼り付け
   （※1つ目にはアドセンスコードを入れているため、2つ目に追加）
3. 保存してブログを更新

見た目は変わりませんが、内部的には読み込み順序が最適化されます。

ダッシュボードのcocoon設定のアクセス解析・認証の中の

１個目にはgoogleｓアドセンスのコードを貼っているので２個目のヘッダー用コードに貼り付けてみます

💡 検証結果

ブログがどうなったか確認します、見た目は変わりません

もう一度GooleSearchConsoleのAMPで検索します

検証中

５件のうち３件修正できたみたいです

残り2件はまだ「検証中」でしたが、
少しずつ改善が進んでいることが確認できました。

🪶 まとめ

AMPエラーの「style amp-custom」構文エラーは、
CSSの自動最適化やフォント設定が原因で起きることが多いようです。

もし同じようなエラーが出た場合は、
焦らずに一つずつ検証し、ヘッダーに preload を追加してみるのがおすすめです。

ブログは日々の修正と検証の繰り返し。
少しずつ改善して、より快適なサイトを目指しましょう🌿

スポンサーリンク

お名前.com