AMPページで背景画像を使用する場合は絶対パスに変更を

作成日： 2020年8月30日

WordPressでAMP対応テーマを作成する際に、AMP用のCSSファイルをインクルードして読み込ませていたのですが、ここで背景画像が適用されていないことがわかりました。

これは通常の背景画像の設定するCSSの場合は

CSS

.background{
	background-image: url("images/pattern.png");
}

のように相対パスで構いませんが、AMP用のCSSは各ページ内にインクルードされているので、上記の書き方だとパスが通りません。

なので、AMP用には

CSS

.background{
	background-image: url("https://hogehoge/wp-content/themes/site/images/pattern.png");
}

と絶対パスで書き換える必要があります。

物草灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ