すいません、画像を複数貼りつける方法がわかりませんでした。

少し説明不足でした。

「試しに他のページでもテストをしましたが、エラーが発生しています」

他のページとは「ギャラリーで作成した」画像部分です。

ギャラリーをWordPress投稿から試して『テキスト』エディタで見るとショートコードで出力されるようですね。※知らなかったのでビックリしてます＾＾；

『WordPressがstyleタグを出力しているみたい。』と、追記のみして後はお任せします。

こんにちは。

それでは、「styleタグを出力」しているのがAMPエラーと関係があるってことですかね？

確かに、ギャラリーで貼りつけていない画像のページはエラーが出てません。

どうしたらいいのでしょうかね？

よろしければ、ソースコードを見やすくするために高速化設定にある縮小化機能を無効にしていただいてよろしいでしょうか。

やり方は以下に掲載してあります。
https://wp-cocoon.com/theme-trouble/

お世話になっております。

お忙しいところ申し訳ありません。

「ソースコード縮小化機能」はオフにしております。

念のため、プラグインも全停止してAMPテストを行いましたがエラーのままでした。

ギャラリーの仕様として、添付画像のように本文中に<style type='text/css'>タグが出力されてしまうんですね^^;
これはちょっと厄介かも。styleタグを取り除いてしまえば、表示が崩れるし。
これはじっくり、明日修正しようと思います。

よろしければ、テスト環境での動作テスト用に本文部分のソースコードを以下のツールに貼っていただいてはてもよろしいでしょうか。
https://notepad.pw/

使い方はこちらです。
https://wp-cocoon.com/notepad-pw/

お世話になっております。

本文部分のソースコードこちらです。

https://notepad.pw/share/834kbplgt

あと余計なことをお願いして申し訳ありません。

私だったら下記のようにします。

まず style タグは、 lib/amp.php の convert_content_for_amp 関数で取り除きます。

次に amp.css に下記の CSS を追加します。

.gallery {
 margin: auto;
}

.gallery .gallery-item {
 float: left;
 margin-top: 10px;
 text-align: center;
}

.gallery-columns-1 .gallery-item {
 width: 100%;
}

.gallery-columns-2 .gallery-item {
 width: 50%;
}

.gallery-columns-3 .gallery-item {
 width: 33%;
}

.gallery-columns-4 .gallery-item {
 width: 25%;
}

.gallery-columns-5 .gallery-item {
 width: 20%;
}

.gallery-columns-6 .gallery-item {
 width: 16%;
}

.gallery-columns-7 .gallery-item {
 width: 14%;
}

.gallery-columns-8 .gallery-item {
 width: 12%;
}

.gallery-columns-8 .gallery-item {
 width: 11%;
}

#gallery img {
 border: 2px solid #cfcfcf;
}

以前 Simplicity のフォーラムで、ほとんど同様のご質問があった時に試したら上手くいった方法です。

ごめんなさい。 1 つミスがあります。

最後から 2 つ目のセレクタは、

.gallery-columns-8 .gallery-item

ではなく

.gallery-columns-9 .gallery-item

です。

だめだ。休日で気が緩んでいる…。最後のセレクタへの指定も間違いです。 CSS を全部書き直します。

.gallery {
 margin: auto;
}

.gallery .gallery-item {
 float: left;
 margin-top: 10px;
 text-align: center;
}

.gallery-columns-1 .gallery-item {
 width: 100%;
}

.gallery-columns-2 .gallery-item {
 width: 50%;
}

.gallery-columns-3 .gallery-item {
 width: 33%;
}

.gallery-columns-4 .gallery-item {
 width: 25%;
}

.gallery-columns-5 .gallery-item {
 width: 20%;
}

.gallery-columns-6 .gallery-item {
 width: 16%;
}

.gallery-columns-7 .gallery-item {
 width: 14%;
}

.gallery-columns-8 .gallery-item {
 width: 12%;
}

.gallery-columns-9 .gallery-item {
 width: 11%;
}

.gallery amp-img {
 border: 2px solid #cfcfcf;
}

そんなナイスな方法があったのか…。
PHPでゴリゴリ書いていました(笑)
すぐさま、それを取り止め、CSSタイプのもので修正しました。
https://github.com/yhira/cocoon/archive/master.zip

Akiraさんありがとうございます。

直近の、Akiraさんのコードに加えて以下のコードを加えました。

.gallery br {
 clear: both;
}

.gallery .gallery-item dd{
 margin: 0;
}

Wordpressデフォルトのギャラリーって、floatでdl要素の高さがそろわないのに対応するために、行が変わるごとに<br style="clear: both">を挟んでるんですね。

どうしても高さがそろわなかったので、ようやく気づきました。

インラインブロックとかflexを使う時はなく、brを使うなんかこのアナログ感^^;

あー…。ごめんなさい。 float を使っているのに、 clear: both を忘れていました。

codex を見てみたら、現在のギャラリーは 2012 年に WordPress 3.5 で改修されたものなんですね。確かにアナログです。

Wordpressのちょっと変な仕様はあったものの(笑)、おかげで、スマートに修正できました。

ありがとうございます。

皆さまご迷惑おかけしました。

・かうたっくさん

・Akiraさん

・わいひらさん

無事エラーが消えました！

ありがとうございます！

ご報告ありがとうございます。
無事改善されたようでよかったです。