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

WordPress Twenty Seventeen
Search Console の AMP
「CSS !important」が含まれていますエラー

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

以下、「CSS !important」エラーの修正記録。

　目　次

1.　エラーの内容
2.　「AMP テスト」によるエラー箇所の特定
3.　原因
4.　「CSS !important」エラーの修正
5.　修正を検証

1. エラーの内容

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

該当ページが【 138 】もある。

2. 「AMP テスト」によるエラー箇所の特定

「AMP テスト」サイトを開き、エラーが出ているページのURLを入力する。

テスト結果が表示されるので、「検証の問題」をクリックして「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)

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル