[Hajime Megane Ogushi]

該当ページ
https://case-shinjuku.com/system/amp

通常表示
https://case-shinjuku.com/system/

wp-oembed-blog-cardが表示するサムネイルの箇所が抜けているのがわかります。
これはwp-oembed-blog-cardが生成するコードにおいて画像の部分が背景画像として当てていることが問題かと思われます。インラインのタグが消されているんじゃないかなと思われます。

該当箇所 vendor/inc2734/wp-oembed-blog-card/src/OEmbed_Blog_Card.php

background-image: url(<?php echo esc_url( $cache['thumbnail'] );

試しに以下に取り替えると、問題なく表示されました。

<img src="<?php echo esc_url( $cache['thumbnail']); ?>

改善についてご検討をお願いします！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

Case Shinjuku のサイトは、Snow Monkey ではなくオリジナルで、ブログカードのパッケージだけ利用、そして、AMP については AMP プラグインで対応している、ということであっていますよね？

その場合ですと、パッケージ側での対処ではなく、AMP 用の scss ファイルでブログカードの scss を import し、それを AMP 用のフックで読み込ませる、という処理が必要になります。
（AMP は CSS の容量制限がきついため、強制的に読み込ませるのではなくそのようなフローにしています）

下記参考にしてみてください。

https://github.com/inc2734/snow-monkey/blob/master/resources/app/setup/amp.php

♥ 0

いいねをした人: 居ません

[Hajime Megane Ogushi]

あ、そもそもですね。cssの問題ではなく、おそらくインラインでのstyle要素の利用がAMPでは不可のはずで、その結果、AMPのプラグインがその利用不可のタグと判断してごっそり削除しているようなのです。

なので、background-imageでなくimgタグでsrcにて参照すると表示されたという感じかと考えています。

以下の「サポートされる CSS」の中で許可されないスタイルとしてインラインのスタイル属性が記載されてます。

サポートされる CSS

Like all web pages, AMP pages are styled with CSS, but you can't reference external stylesheets with the exception of custom fonts. Also certain styles are…

amp.dev

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あーなるほど！はやとちりして目が滑ってました、すみません>< うーん、となると img で出力するようにしたほうが良さそうですね…。 background-size: cover にするために背景画像にしているので、object-fit: cover を使って img にするのが良さそうかなと思いました。ちょっとためしてみます！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v4.0 で対応しましたのでクローズします！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿