タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。

WordPress Twenty Seventeen
Search Console の AMP
「CSS !important」が含まれています エラー
 
Search Console の AMPで、『タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。』というエラーが出る。
 
「CSS !important」が含まれています エラー
 
以下、「CSS !important」エラーの修正記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. エラーの内容
 
タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。
タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません
 
該当ページが【 138 】もある。
 
 
 
2. 「AMP テスト」による エラー箇所の特定
 
AMP テスト」サイトを開き、エラーが出ているページのURLを入力する。
「AMP テスト」サイトを開き、エラーが出ているページのURLを入力する
 
テスト結果が表示されるので、「検証の問題」をクリックして「AMP HTML」を表示して、【important】を検索してみる。
テスト結果が表示されるので、「検証の問題」をクリックして「AMP HTML」を表示して、【important】を検索してみる
 
何処に、「 !important 」を記述しているかが判る。
 
 
 
3. 原因
 
ampのテンプレート「style.php」に、プラグイン【WordPress Related Posts】による関連記事一覧表示のスタイル調整のために、「 !important 」付きのCSSを組み込んでいた為。
 
組み込んでいたCSS。
/*-----------------------------------------------------------*/
/*    関連記事一覧 WordPress Related Posts CSS               */
/*-----------------------------------------------------------*/
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
    zoom: 1 !important;
    *display: inline !important;
    width: 160px !important;
    margin: 10px 10px 10px 0 !important;
    padding: 0 !important;
    background: 0 0 !important;
	font-weight: bold;
}
ul.related_post li a {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
}
/* a.wp_rp_thumbnail {
	border: solid 2px #000000;
} */
ul.related_post li img {
	width: 160px !important;
	height: 96px !important;
}
/*-----------------------------------------------------------*/
 
 
 
4. 「CSS !important」エラーの修正
 
組み込んでいたCSSから、「 !important 」を除去する。
 
修正後のCSS。
/*-----------------------------------------------------------*/
/*    関連記事一覧 WordPress Related Posts CSS               */
/*-----------------------------------------------------------*/
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    width: 160px;
    margin: 10px 10px 10px 0;
    padding: 0;
    background: 0 0;
	font-weight: bold;
}
ul.related_post li a {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
}
ul.related_post li img {
	width: 160px;
	height: 96px;
}
/*-----------------------------------------------------------*/
 
 
 
5. 修正を検証
 
修正が完了したので、「修正を検証」をクリックする。
修正が完了したので、「修正を検証」をクリックする
 
検証が開始される。
検証が開始される
 
 
後日、エラーが消える。
 
 
以上。
(2020.01.26)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください