Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

AMPページでリンクテキストの範囲が広...
 
共有:
通知
すべてクリア

[解決済] AMPページでリンクテキストの範囲が広がってしまうエラー

30 投稿
5 ユーザー
14 Reactions
1,877 表示
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

AMPページでリンクテキストのリンク範囲が広がってしまうエラーがでました
通常ページでは問題ありません
いろいろなAMPエラーのツールを使ってみたのですが、わかりませんでした
そのため、手作業でミスを探しましたが、これも見つかりませんでした
テーマの不具合とはちょっと違うかもしれませんが、もしエラーがわかれば教えていただきたいです

不具合ページ:「 https://airisu745.info/uniqlo-sports/?amp=1
不具合箇所:h4タグ「ブラタンクトップ スポーツ|エアリズムブラ(レーサーバック)」の本文の部分です

 

 

----------------------------------------------

サイトURL: https://airisu745.info
ホームURL: https://airisu745.info
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.2.2
PHPバージョン:7.0.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.8.8.1
カテゴリ数:33
タグ数:154
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.4
----------------------------------------------
Gutenberg:0
AMP:1
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2018/03/123380f84bc5ea670f070d9c6e4c9c7d.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.2
All In One SEO Pack 3.1.1
Autoptimize 2.5.1
Broken Link Checker 1.11.8
Contact Form 7 5.1.3
EWWW Image Optimizer 4.8.1
Google XML Sitemaps 4.1.0
PS Auto Sitemap 1.1.9
Q2W3 Fixed Widget 5.1.9
Redirection 4.3.1
Search Regex 1.4.16
UpdraftPlus - Backup/Restore 1.16.15
Wordfence Security 7.3.4
WP All Export 1.2.3
WP Multibyte Patch 2.8.2
----------------------------------------------

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

これは、こちらのテスト環境で同じコンテンツで試してみないと何とも言えないかもしれません。
よろしければ以下の方法で、本文のソースコードをいただけますでしょうか。
https://wp-cocoon.com/notepad-pw/


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

次のリンクまで画像のリンクになってるので、どこか閉じタグを忘れてるんだと思います。

h ttps://airisu745.info/wp-content/uploads/2018/11/4b667a7a2afdf4788740669fdde0ad41.jpg

ブラウザで確認しても、ブラウザが正常にタグを閉じてくれるので、エディタのHTMLを確認したほうが早そうです。

その画像リンク・画像のパス直後あたりからの、pタグかaタグをチェックしてみるのが良いかも。

  • それでも不明な場合はわいひらさんの案内通りで。
  • 不具合箇所が分かり修正したら、AMPページを確認して

もし反映されなかった場合のみ、Cocoon設定・キャッシュ削除よりAMPキャッシュの削除を行うほうこうで❦

 


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

わいひら様へ

お返事ありがとうございます

恐縮ですがテキストファイル添付でもいいでしょうか・・・

添付して送付させてください

(コピー防止に一部ワードをランダムに抜いております このテキストでもエラーは再現できました)

 

またコクーンの高速化(HTMLとCSS)を解除するとAMPエラーは直るようです(※キャッシュクリアで確認いたしました)

よろしくお願いいたします

 


   
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

かうたっく様へ

アドバイスありがとうございます

閉じタグ忘れを目視でもう一度確認してみますm(_ _)m

 


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

テーマ名:Cocoonバージョン:1.8.8.1のテスト環境で確認しましたけど、問題ないんですよね。

あと目視でも、さらにカスタムHTMLウィジェットでh4タグ以下をコピペしてタグの確認しても問題ないんですよね。

  • Cocoon設定の高速化は全部有効にしてます。

Autoptimizeとか停止すればどうなりますか?

それでもダメな場合は、他プラグインの影響など。

※AMPなのでAMPキャッシュ削除が毎回必要かもしれません?

 


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770

   
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

カウタック様へ

ありがとうございます

プラグイン確認してみます


   
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

かうたっく様

報告します

Autoptimize停止では直りませんでした

ほかのプラグイン停止も、変化なしです

これから外に出てしまうので、夕方頃またいじってみます


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

Cocoon設定・『AMP』タブにある『画像の拡大効果』ですが、こちらのテスト環境では

  • AMPギャラリー(複数画像ギャラリー表示対応)

になってたので、

  • 『AMP Lightbox(単一拡大)』

に変更してキャッシュを切っても、問題なく表示されますねぇ。

 

現状

  • HTML・CSSの圧縮が関係している。
  • Cocoon設定の変更の更新から何かがオカシイ可能性も残る
  • プラグインの影響は皆無

関係あるか不明ですが、テスト環境では
※旧エディタでテストを行ってない。
※クラシックブロックで、テストを行った。
この状況でAMPでは問題ない感じです。


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

忘れてました。31番目あたりをチェックしてもらったら

やっぱタグがオカシイみたいですよ。

https://validator.w3.org/nu/?doc=https%3A%2F%2Fairisu745.info%2Funiqlo-sports%2F%3Famp%3D1

上記はAMPですが、通常ぺージでHTMLの検証をしてチェックしてみるのが良いかもです。

HTMLコード冒頭からコピペしてチェックして見なきゃかも。私は今チェックしてませんが。

この投稿は5年前ずつかうたっくに変更されました

   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

かうたっくさんがおっしゃっているとおり、HTML がおかしな部分があります。

私が把握した部分は、下記のとおりです(他にもあるかもしれません)。

①「▲目次トップに戻る」の部分で、li 閉じタグはあるのに開きタグがない。このエラーが複数出ているため、おそらく全ての「▲目次トップに戻る」でそうなっています。

②「(▽ユニクロ エアリズムシームレスVネックブラキャミソール)」の下の画像で、a 閉じタグが 2 つある。おそらく、おっしゃっている症状の原因はこれです。

この部分の HTML を全て修正されると、どうなるでしょうか。

それと、center タグをお使いですが、このタグは HTML5 で廃止になり非推奨となりました。ブラウザが今すぐサポートを停止してもおかしくはないため、お使いになるのはお止めになった方がいいと思います。

参考:文字列の中央揃え要素 (廃止)


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

かうたっく様

Akira様

 

アドバイス感謝です

また、つたないHTML・・お恥ずかしいです・・・すみません

今は出先なのでかえったらすぐ修正してみます

ありがとうございますm(_ _)m


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

https://wp-cocoon.com/wp-content/uploads/wpforo/default_attachments/1562614064-dcc4fe948830b12a52b5e76f22c3defb.txt

カスタムHTMLがやっぱ修正に良さそうです。

※保存はしないで編集のみに閉じタグとか、チェックしやすそう

×印が出てる様子と、変な場所に</li>li終了タグが入ってるバージョン。

https://gyazo.com/353fda58cfac5a2e4a60a1a0a254b833

23個のエラーがあるらしいので修正、頑張ってくださいね。


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

かうたっく様

Akira様

HTMLは「かうたっくさん」の「カスタムHTML」を使うやり方(これ便利ですね・・)でエラーはなくなりました

ですが、AMPのエラーはまだあるようです

次はサイトへの流入が一番少ない時間に全プラグイン止めてみます

 


   
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

修正したテキストを添付します


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

該当ページの通常ページにAMPテストの表示はないですか?

Cocoon設定・管理者画面タブ に管理者メニューがあるので、AMPテスト表示を有効にしたら、誰よりも簡単にテストできるようになってます。

******

そのAMPテストの結果のURLを置いてください。

*

ほか、キャッシュが残っている場合

Cocoon設定・キャッシュ削除・AMPのキャッシュ削除をお試しください。

*********

追記

ってか、今回のリンクテキストが広がるエラー:画像リンクがリンクまで長々とリンクとして表示される件と違ってるかも。

この件はなおりましたか??

この件と全く違う。ってことであれば、新規トピックをお願いします。関連しているのであれば、以下に書き込みくださいね。

この投稿は5年前ずつかうたっくに変更されました

   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

このページに関しては、AMP エラーは解消しています。 

https://airisu745.info/uniqlo-sports/?amp=1

ただ、本題の画像より下がリンクになる問題は解決していません。

アップロードされたテキストを私のテスト環境に貼り付けたのですが、問題を再現できません。

投稿者:: airisu

修正したテキストを添付します

もし、HTML に問題がない場合は、私が原因を作ったのかも。わいひらさんにお願いがあります。amp-lightbox-gallery を適用するための PHP の正規表現をご確認いただけないでしょうか。

https://github.com/yhira/cocoon/blob/master/lib/amp.php#L552

airisu さんのサイトでは、「(▽エアリズムブラ レーサーバック)」の下にある amp-img タグに lightbox 属性が付いていない。また、a 開きタグは削除されていない。けれど、a 閉じタグは削除されてしまっています。

再現できないこともあって、私では原因が分かりません。何で a 閉じタグのみ削除しているんだろう。


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

>かうたっく様

AMPテストは合格みたいです(画像を添付しました)

また、全プラグインを停止しましたが、リンクテキストが広がるところは解消できませんでした

キャッシュ削除もコクーンメニューからAMPキャッシュ削除等やってみましたが、解消していません

>Akira様

確かにAMPのソースをみると 「aタグ」の閉じタグないですね・・・

コクーンの高速化をはずすと「amp-img class="amp-lightbox amp-lightbox-gallery aligncenter size-full wp-image-17617" lightbox src=”画像リンク”」というタグ出てきて、表示が正常になります

今のところ打つ手が見つからない状況です

うーん・・・

 


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

h4タグの見出し、以下文字列から

ブラタンクトップ スポーツ|エアリズムブラ(レーサーバック)

次の見出し、以下文字列までのHTMLをコピぺして

ユニクロ スポーツ レディース 上着|おしゃれウェアおすすめ

新規投稿記事に貼り付けて、プレビューからAMPページをチェックしても同じ症状がでますか?

または、全記事のHTMLをコピペしたほうが良いかな?

 

あと、

別途新規記事を作成してピンクの画像(エアリズムブラ レーサーバック???)をダウンロードして再度アップロードすれば画像のパスが変わるので

アップロードしなおした画像にリンクをつけた場合、同じ症状が改善できますか?

もし万が一改善できたら、本番環境でも試してみるのも良いかもですね。


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

〉かうたっく様

承知しました

出先なので、戻りましたらやってみます

実は他の記事でも同じようなことを見つけました、確認したら、アップしてみます

追加のcssもamp.cssに入れてるので、それも削除して試してみます

 


   
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
 

amp-lightbox-gallery を適用するための PHP の正規表現をご確認いただけないでしょうか。

https://github.com/yhira/cocoon/blob/master/lib/amp.php#L552

リンクの閉じタグが削除されてしまうとのことですが、AMP化でamp-lightbox-galleryに対応する置換ではa 閉じタグのみを空にする仕様ではないため、上記の箇所が問題ではなさそうです。

また、該当のリンクでは置換が行われていないことから、amp-lightbox-galleryの処理以前ですでに問題のリンクが閉じていない形になってしまっているようです。

 

コクーンの高速化をはずすと「amp-img class="amp-lightbox amp-lightbox-gallery aligncenter size-full wp-image-17617" lightbox src=”画像リンク”」というタグ出てきて、表示が正常になります

おそらく、HTMLの縮小化が原因かと。

こちらについては確認していませんが、他のリンクはきちんと置換されているので、minify_html関数と問題箇所前後の文字列の関係からリンクの閉じタグ前までがひとつの段落になってしまっているのではないかと思います。

高速化(HTMLの縮小化)を有効にしたままで解決したいのであれば、問題の箇所前後のHTMLを一度綺麗に書いた方がいいかもしれません。
空のPタグなど、不要なタグが入っているのが気になります。


   
edit and わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

>ロコ様へ

アドバイスありがとうございます

もう一度整理してみたいと思いますm(_ _)m


   
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

関係皆様方へ

HTMLの整理をしたところ、リンクテキスト拡大のエラーが解消しました

ありがとうございました

まだ「Akiraさん」にアドバイスいただいた「center」タグの修正と、まだ一部デザインが直っていないところもあるので、もう少し整理してみたいと思います

自分で見やすいようにスペースを多く取ってしまったことが原因だと思われます

大変ご迷惑をおかけしましたm(_ _)m

 


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

HTML が原因だったんですね。置換部分は私が書いたコードがほんの少し含まれているので、怪しく見えてしまいました。

ただ、HTML を変更されたことで、画像が拡大しなくなっています。

画像を拡大するには、画像と画像を囲む a タグのみを p タグで囲む必要があります(今は br や center などが入ってしまっています)。


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

>Akira様

アドバイスありがとうございます

実は画像の拡大設定をしたつもりがありませんでしたが、AMP画面の場合、ほとんどが画像拡大してくれてるようですね

拡大してくれるのはうれしいです

これもWordPressの本文を整理すれば直るのでしょうか・・


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 
投稿者:: Akira

ただ、HTML を変更されたことで、画像が拡大しなくなっています。

画像を拡大するには、画像と画像を囲む a タグのみを p タグで囲む必要があります(今は br や center などが入ってしまっています)。

投稿者:: airisu

>Akira様

 

これもWordPressの本文を整理すれば直るのでしょうか・・

HTMLを以下のようにしなきゃダメだけど

pタグ aタグ imgタグ /aタグ /pタグ

 

現状は以下。

pタグ aタグ imgタグ /aタグ brタグ centerタグ /pタグ

 

aタグを囲んでいるpタグ領域内に不要なタグ brタグ centerタグ 抜いてくれなきゃ、拡大しないよ ? ? ?

って、AMPの『拡大しない画像たち』が言ってるよ❦

と、Akiraさんが教えてくれてます。

Akiraさんは、そんな言いかたしてないですね(笑


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

失礼しましたm(_ _)m

HTML不勉強で申し訳ありません

画像回り修正してみます


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 
投稿者:: airisu

HTML不勉強で申し訳ありません

WordPressは簡単に始められるので、HTMLから勉強する人もいる。かもですが、それはホンの一握りですよ

 

分からない事は悪ではないです。なので、このようなフォーラムがあるし

謝るより、前向きに考えて頂けたら。
解決できれば前提で、分からない人のためにフォーラムがあるんですよ。
2回言ったけど、おそらくです。

でも、ひそかに応援してますね。


   
わいひら reacted
(@airisu)
Estimable Member Registered
結合: 6年前
投稿: 89
トピックスターター  

>かうたっく様へ

>Akira様へ

この度はいろいろご迷惑をおかけしました

Akiraさんに言われたところを修正してみました

https://airisu745.info/uniqlo-sports/?amp=1

なんとか直ったと思います

今回はいろいろお世話いただき、勉強になりましたm(_ _)m


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました