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カスタマイズ依頼

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

5月末からのレイアウト崩れについて
 
共有:
通知
すべてクリア

[解決済] 5月末からのレイアウト崩れについて

43 投稿
5 ユーザー
30 Reactions
2,758 表示
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

■不具合・カスタマイズ対象ページのURL:
https://uutu.life/2021/09/25/tenjositajiseach02-magnet1-12258/

■相談内容:
お世話になっております。
三年ほど前からCOCOONを利用させて頂いております。
・・・が、相変わらずよく分からないまま使わせて頂いているため、的外れな相談になってしまう場合はご容赦願えると有難いです。

相談としましては、5月末頃にWP自体の更新と、COCOON親の更新が来ていたため、両方とも更新しましたら、一部のページにレイアウト崩れが出てしまっているようなので、改善策をご指導いただけないでしょうか?という相談になります。

よく分からないまま運用しているため、他にも不具合があるのかもしれないのですが、現状で気付いているのは、添付①のようなレイアウト崩れになりまして、
要するに、センタリングしたはずの画像が左寄りになってしまう・・という現象です。

とは言え、全ての画像にこの現象が発生している訳ではなく、なぜか画像の「キャプション」や「alt」を更新したものに限って見られるのですが、
多くのページでは、この画像以下に配された画像で、何も触っていない画像についても、共通して、そのほとんどが左寄りになってしまっています。

また、タブボックス内に配置した画像については、「キャプション」や「alt」を更新しても、センタリングされたままのようですし、投稿本文のテキスト部分を更新するだけの場合は、左寄り現象は発生していないように見えます。
※ちなみに、5月末以降に更新していないページでは、何も症状は出ていません。
 画像の「キャプション」や「alt」を更新したページは、すべてこのレイアウト崩れが発生しています。

勉強不足もあると思いますが、コードエディタに切り替えても、特に記述がおかしいようにも見えません。

なお、原因の切り分けのために、Health Check & Troubleshootingをインストールして、①デフォルト有効化、②親COCOON有効化、③子COCOON有効化での表示違いを確認してみました。

知識がないため正しく使えているかどうかは微妙なのですが、結果としましては、①デフォルト有効化では、左寄り現象は見られず、②親COCOON有効化より、左寄り現象が発生するようでしたので、こちらに相談させて頂くことにした次第です。
※トラブルシューティングモード内でその他のプラグインが無効化されていることは一応確認しているつもりです。
 スクリーンショットの取り方が分からないため写真で失礼しますが、添付②の通りの表示です。

こちらの勉強不足で、ご面倒をお掛け致しますが、お力添えのほど、どうぞ宜しくお願い致します。

※私事で恐縮なのですが、本業が[超]繁忙期につき、反応が送れる場合がありますが、合わせてご容赦願えると有難いです。

■解決のために試したこと:
・Health Check & Troubleshootingをインストールして、①デフォルト有効化、②親COCOON有効化、③子COCOON有効化での具合を確認してみました。
・投稿本文のテキストのみを修正しただけのページで不具合が出るかどうかを確認してみました。
・タブボックス内に配置してある画像の「キャプション」や「alt」を更新してみて、不具合が出るかどうかを確認してみました。
・COCOON親のダウングレードも試みましたが、上手く適用できているのか・・・
 いずれにしても症状は改善されませんでした。

■環境情報:
----------------------------------------------
サイト名:とある建築士の憂鬱
サイトURL: https://uutu.life
ホームURL: https://uutu.life
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-blue/style.css
WordPressバージョン:6.0
PHPバージョン:7.4.29
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.63 Safari/537.36 Edg/102.0.1245.33
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.5.4
カテゴリ数:18
タグ数:204
ユーザー数:3
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
style.cssサイズ:22503バイト
functions.phpサイズ:527バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.2.4
All-in-One WP Migration 7.61
Broken Link Checker 1.11.16
Contact Form 7 5.5.6.1
Ganohr's Toggle Shortcode 0.0.2
Google XML Sitemaps 4.1.3
Health Check & Troubleshooting 1.4.5
LiteSpeed Cache 4.6
Shortcodes Ultimate 5.12.0
SiteGuard WP Plugin 1.6.1
Site Kit by Google 1.75.0
WebP Converter for Media 4.3.6
WP Multibyte Patch 2.9
----------------------------------------------


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

初めて見る感じで、これで改善するのか分かりませんが、お試しいただきたいことがあります。

投稿者:: @epz1

LiteSpeed Cache 4.6

上記プラグインの「画像 遅延読み込み」「遅延読み込み iframe」が「オン」になっているようでしたら、「オフ」にすると、どうなるのか確認していただいてよろしいでしょうか。

WordPress 5.5以降は、ネイティブLazyLoad(遅延読み込み)に標準で対応していますので、プラグインの当該機能は「オフ」にしておいた方が良さそうに思います。

 

投げっ放しで申し訳ないですが、こんな時間ですので、もう休みます・・・。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

すみません、2点書き忘れました。

投稿者:: @mk2_mk2

上記プラグインの「画像 遅延読み込み」「遅延読み込み iframe」が「オン」になっているようでしたら、「オフ」にすると、どうなるのか確認していただいてよろしいでしょうか。

上記対応後に、一旦このプラグインの無効化が必要かもしれないです。
(キャッシュクリアが必要かもしれません)

 

お問い合わせの際は、フォーラム上部の案内にあります通り、高速化の無効化、及び、キャッシュ系プラグインの無効化をお願い致します。

投稿者:: @epz1

HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1

 

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

高速化設定を無効にするにはこちら。
→  https://wp-cocoon.com/theme-trouble/

今回は先に、遅延読み込みのオフをして、それでも改善しない場合にしていただければ良い思います。

圧縮されていると人間の目では確認が難しい場合があります。

(プラグインにも圧縮系機能がありそうですね)

 

では、本当に休みます。


   
わいひら reacted
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

早々のアドバイス、どうも有難うございます。
高速化設定解除については、うっかりしており、大変失礼しました。

「COCOON設定」内、「サイト高速化」の部分で、以下の三つを解除しました。
・HTMLを縮小化する
・CSSを縮小化する
・JavaScriptを縮小化する

さらに、同設定の「Lazy Load設定」にて
・Lazy Loadを有効にする
も解除し、下段にて「設定を保存する」を押してみました。

「キャッシュクリア」はよく分からないのですが、LiteSpeedCacheの「ツールボックス」より「すべてをパージする」を押して、再表示してみました所、画像は左寄りのままであることを、今ほどEdgeとchromeで確認しました。

※今はこの4つを解除したままにしてあります。
-------
キャッシュ系プラグインの無効化についても、勉強不足でよく分からず、申し訳ないのですが・・・

既述の通り、Health Check & Troubleshootingのトラブルシューティングモードで、一通りのプラグインが無効化されている状況下での表示は確認したつもりです。

先ほどの添付②でお示ししたつもりでしたが、無効化されていない状態の画面になっていたというご意図でしょうか・・・
もしくは、LiteSpeed Cache「画像 遅延読み込み」と「遅延読み込み iframe」がONのままだと、ソース表示が読みづらくなってしまう・・というご意図でしょうか?
※これも勉強不足で申し訳ないです。

-------
「画像 遅延読み込み」「遅延読み込み iframe」の設定確認については・・・
LiteSpeed Cache自体が全く理解できないまま、サーバーの仕様に合わせて、ココナラで見つけた、とあるプログラマーの方に1年前に設定してもらって、そのまま一切触っていないのですが、明日にでも隙を見つけて、設定画面を見てみるように致します。

※LiteSpeed Cacheは、当初、自分で設定しようと試みたところ、色んな不具合が出てしまって、収拾が付かなくなってしまったため、止むを得ず、知識のあるっぽい方にお願いして、一通り見て頂いた・・・という経緯があります。

(また収拾がつかない不具合が出ると、心底困ってしまうので、怖くて触れていない・・という意味です)

 

また、念のためなのですが、先の4点とLiteSpeedCacheは、1年前にそのプログラマーの方の助言で設定したまま、まったく触っていない中での、つい先日の5月末のWPとCOCOON親の更新だけによる症状になります。

取急ぎとなりますが、遅い時間までお付き合いいただき、どうも有難うございました。

引続き、アドバイスのほど、宜しくお願いできると助かります。

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

ご納得いただくには、かなり長い説明が必要な印象を受けました。
また、そこまで詳しいご説明ができるものかどうか・・・という印象も受けましたので、返信を分けることにします。

まずは、本題から。

投稿者:: @epz1

LiteSpeed Cache 4.6

上記プラグインは、無効にしてください。

いろいろ第三者の方にご依頼をして設定していただいたという経緯があるみたいですが、これが有効だと、外部からの確認が困難です。

無効化する分には、再び有効化すれば同じ設定内容で、元に戻るはずです。
(但し、それを保証することはできません。)

無効化する理由は、キャッシュプラグインが、いろんなものを改変し、外部からの確認を困難にしてしまうためです。

 

例えば、画像ブロックは、通常は以下のようなソースです。

 
「wp-block-image」のdivタグの中に、「aligncenter」のfigureタグがあります。
 
 
しかし、epz1さんが当該画像は、以下の状態です。
 
divタグがなくなり、figureにまとめられています。
 
 
また、画像の中央揃えをすると、通常は以下のようなCSSが適用されます。
 
 
しかし、epz1さんのサイトは以下のような状態です。
 
上記は、以下のものです。
https ://uutu.life/wp-content/litespeed/css/c0643bbe54892aaa6b45edfbae237282.css
 
これは、最初に上げたプラグインが作っているもので、WordPressやテーマやその他のCSSをマージして作成したもので、中身は以下のようなものです。
 
人間の目には、解読が難しいです。
また、解読できたとしても、複数のCSSをマージしてしまっていますので、元々がWordPressのものか、Cocoonのものか、その他のものか、判別ができないです。
 
 
上記のような理由から、最初に上げたプラグインの無効化をしていただかないことには、外部からの確認は非常に難しいと思います。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

続いては、いくつかのご質問にできるだけお答えはしようと思います。
ただ、どこまでご説明できるかは、正直分からないです。

投稿者:: @epz1

既述の通り、Health Check & Troubleshootingのトラブルシューティングモードで、一通りのプラグインが無効化されている状況下での表示は確認したつもりです。

このプラグインは、実際のページ表示に影響を与えることなく、ログインした管理者のみ、プラグインやテーマの影響を排除することができます。

但し、万能ではないです。

それに影響を完全に排除できない場合があります。

データベース・サーバーのデータを更新する。
.htaccessの内容を参照・変更する。

それらのものは、このプラグインを使用しても排除できないことがあるようです。
(過去にこのフォーラムのお問い合わせ時に、そのようなことがありました。)

 


今回の事象は、画像を中央揃えにしたのに、左に寄ってしまうということかと思います。

確かに、上記のプラグインをご使用いただいて、確認はしていただいたと思います。
他のプラグインの影響などは排除していただいたのだと思います。

そう考えると、WordPressもしくはCocoonの不具合の可能性もあると思っています。

ただ、そうだとすると、同様に画像を中央揃えにした方は、全員が左寄りになってしまうのではないか。
もっとお問い合わせが多数あってのよいのではないか。

そういう気持ちも湧いてきます。

ただ、この部分は感情論に過ぎません。

 


先に書かせていただきました通り、まずは、「Litespeed Cache」のプラグインを無効化していただいて、確認をさせていただきたいです。

(確認の結果、他のプラグインを無効化をお願いすることもあるかもしれないです。)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 
投稿者:: @epz1

先ほどの添付②でお示ししたつもりでしたが、無効化されていない状態の画面になっていたというご意図でしょうか・・・

これは、epz1さんに見えた状態です。
あのプラグインを使って、ログインした管理者に見えた状態ではあります。

しかし、外部からは、プラグインの影響を受けた状態でしか確認ができないです。
添付いただいた画像の状態を、外部から確認はできないので・・・。

それに、先に書かせていただいた通り、あのプラグインも万能ではないことがあります。
(今回がそうかは分かりません。)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 
投稿者:: @epz1

LiteSpeed Cache「画像 遅延読み込み」と「遅延読み込み iframe」がONのままだと、ソース表示が読みづらくなってしまう・・というご意図でしょうか?

これは、そもそもソースを改変していますので、オフにして、「Litespeed Cache」の影響を受けない状態を確認させていただきたいと考えました。

但し、3つ前に返信させていただきました通り、そもそも「Litespees Cache」そのものを無効化していただきたいため、該当機能のオフは不要に変更させてください。

 

「Litespeed Cache」は複数の機能があるようで、それらが確認の妨げになっていますので、プラグインそのものを無効化していただきたいと思います。

(外部にご依頼して設定していただいたという経緯もあるみたいですし。)

 


そして、他にも理由があります。

最初の返信にも書かせていただきましたが・・・

WordPress本体が、LazyLoad(遅延読み込み)に対応しています。
プラグインの機能を必要としません。

それなのに、プラグインの遅延読み込み機能をオンにすることで、同じ機能が2つ働きます。

一般論として、機能重複・機能衝突(コンフリクト)して、不具合が発生しがちですので、書かせていただきした。

少なくとも、同じ機能を2つ使う理由はないと思います。

 

このフォーラムでも、他のプラグインの遅延読み込み機能とWordPress本体のそれが機能重複・機能衝突して、不具合のご相談が多数あります。

また、「Litespeed Cache」においても、数は少ないですが、先日ご相談があったような記憶があります。

そのため、書かせていただいた次第です。

 


なお、CocoonのLazyLoadは無効化する必要はないと思います。

CocoonのLazyLoadは、WordPressがカバーしていない範囲に適用されます。
(ただし、Cocoonと「Litespeed Cache」のものは、機能重複・機能衝突する可能性はあります。)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

06:20の返信に書かせていただいた際に、書き漏れましたので続きとして書かせていただきます。
https://wp-cocoon.com/community/postid/62425/

現在は、以下のような感じです。

 
左右のmarginのautoが無効になっていて、それそれが0になっている?
 
これも、以下の「Litespeed Cache」が生成しているもので、元々が何の影響なのか正直良く分からないです。
https ://uutu.life/wp-content/litespeed/css/c0643bbe54892aaa6b45edfbae237282.css
 
 
大変長くなりました。
これで伝わったかどうかは分かりませんけれど、可能な限りご説明させていただいたつもりです。
 
私は「Litespeed Cache」を無効化していただかないと、確認は難しいと思います。
(諸事情あり無効化はしたくないということであれば、それは仕方ないです。)
 
もしかすると、他の詳しい方だとそうではないのかもしれませんので、詳しい方をお待ちいただいても良いと思います。
 
 
ちなみに、私は本日通院がありまして、返信はなかなかできないと思います。

   
わいひら reacted
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

mk2様

おはようございます。
お忙しい最中、朝早くから、沢山のご回答とご丁寧なご解説、どうも有難うございます。
こちらの勉強不足でご説明を難しくしてしまって、申し訳ございません・・

LLiteSpeed Cache自体が解読しにくくしてしまっていたんですね?
Health Check & Troubleshootingが万能でない旨、CocoonのLazyLoadは無効化する必要はない旨なども承知しました。
おそらく概ねは理解できた気がします。
お手数をお掛けしてしまい、申し訳ございませんでした。

今ほど、LiteSpeed Cacheの方については、思い切って無効化し、CocoonのLazyLoadは元の状態に戻してみました。
もちろんご通院から戻られてからで構いませんので、お時間が許されるようでしたら、ご覧になってみていただけると助かります。
-----
基本的に勉強不足のため、このフォーラムに投稿するにしても、的確な説明もできないでしょうし、(案の定でしたが・・)、きっと皆さんを困らせてしまうのではないかと思って、三年間ほど遠慮しておりました。

また、今回のレイアウト崩れについても、仮にCOCOONやWPの更新に問題があるなら、mk2さんもおっしゃる通り、もっと多くの方々からの報告が沢山上がってくるはず、と思いましたので、一週間ほど様子をみていたところでした。

・・・が、一向に似たような話が上がってくる様子がみられませんし、こちらでの小細工レベルではどうすることもできないため、恐縮ながら、ご相談させて頂くことにした次第です。

ご面倒をお掛けすることになり、大変申し訳ないのですが、引続き、お力添えいただけると有難く思います。

どうぞ宜しくお願い申し上げます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

おかげさまで、CSSは見えるようになりました。

ただ、特に変なものではなく、普通のもので…。

しかし、ソースがやはり変というのか・・・。

私が普段ブロックエディタを使わないからなのか、どうやるとこういうカタチになるのかが、いまいち分かっていません。

該当箇所は、figureタグだけ。

 
その下の上手くいっている?ものは、divタグの中にfigureタグ
 
 
もし、よろしければ・・・ですが。
 
編集画面を開いていただいて、「コードエディタ」にしていただき、表示されるコードのご提示は可能でしょうか。
左寄りになってしまう部分だけで良いのですが。
 
この部分が変なので、上手くCSSが当たっていないのだと・・・思うのですが・・・。
(ちょっと自信ないです。)
 
CSSが上手く当たれば、中央にはなるのですけど。
 
 
 
すみませんが、そろそろ出かけなければなりませんので、しばらく返信はできなくなってしまいます。

   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3152
 

●原因
https://github.com/yhira/cocoon/commit/00c688100982e1fc947a03566c59b9dda95e7a1c

5月22日CSSバージョン2.4.5.4の時

.body .aligncenter→.aligncenter

に変更しています。
これにより、同じ要素に付いている
.wp-block-imageが優先となり、中央寄せにならなくなったのでは。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

一応確認しました。

長くなります。

 

まずは、おさらいということで、epz1さんのサイトの左寄りになっていものの確認から。

 
HTMLが以下のような構造になっています。
<figure class="wp-image-block aligncenter">

 

 
その結果、以下の赤矢印の部分があたって、左のmarginがゼロになって、左寄りになってしまっているという状態だと思います。
 
 
ただ、HTMLの構造に違和感がありました。
 
これ以降は、私のローカル環境で試した結果を書いていきます。
 

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

続きです。

WordPress 6.0、Cocoon 2.4.5.4で、確認を進めました。

まずは、ブロックエディタで、「画像ブロック」を中央揃えで追加します。

その時の、「コードエディタ」の表示です。

 
この時のHTMLは以下のような構造です。
<figure class="wp-image-block aligncenter~>
 
 
実際のページ表示は以下のような感じで、中央揃えでした。
 
そして、出力されているHTMLの構造は、以下です。
 
<div class="wp-image-block">
    <figure class="aligncenter~>
 
「コードエディタ」の構造とも、epz1さんのサイトに出力されているものとも、構造が違います。
 
上記の構造であるため、以下のCSSが適用され、左右のmarginがautoで、中央揃えになります。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

続きです。

まだ、WordPress 6.0、Cocoon 2.4.5.4です。

 

どうしても、ブロックエディタで、epz1さんのサイトの構造が再現できませんでした。

そのため、無理矢理作りました。

「コードエディタ」で以下のような感じにしました。

 
ブロック判定用の最上部と最下部のコメントの部分を削除しました。
具体的には、以下の部分を消しました。
<!-- wp:image ~(中略)~ -->
<!-- /wp:image -->

 

すると、編集画面では「クラシックブロック」扱いになり、左寄せになりました。

 
そして、実際のページ表示も、左寄せで、HTMLの構造が、epz1さんのサイトと同じ状態になりました。
 
 
<figure class="wp-image-block aligncenter~>
 
その結果、適用されるCSSも、epz1さんのサイトと同じになりました。
 
 

   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3152
 

前回の回答が根本原因ではありませんでした。

●根本原因

Alt テキスト (代替テキスト)を入力する際、改行を入れています。
改行を削除して下さい

●動作
Alt テキスト (代替テキスト)に改行を入力すると<div class="wp-block-image">が付かない。
この時、<figure class="wp-block-image aligncenter size-full">となる。
前述のCSSの変更も合わさり、中央寄せにならなくなり。

 


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

更に続きます。

chu-yaさんご指摘の対応は、Ver.2.4.3.5 ~ 2.4.4の間に入っています。

そのため、Cocoonを 2.4.1.1にバージョンダウンして確認しました。

まずは、通常の「画像ブロック」です。

 
HTMLの構造が以下の通りで、問題なく中央揃えになります。
<div class="wp-image-block">
    <figure class="aligncenter~>

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

続いては、Cocoonを 2.4.1.1にバージョンダウン環境で、無理矢理以下の構造にしたものを確認します。

<figure class="wp-image-block aligncenter~">

すると、上記構造でも中央揃えになりました。

 
 
確かに、Cocoonのバージョンアップにより、影響を受けていると考えられます。
 
しかし、そもそもの原因はそこではなく、HTMLの構造がおかしいということだと、思います。
(ということを、朝の段階では確証がなく、ぶつぶつとつぶやくように、「figureが」「divが」と書いていました。)
 
普通に、ブロックエディタで「画像ブロック」を追加すると、epz1さんのサイトのような構造にはならなかったです。
 
epz1さんのサイトでも、中央揃えになっているものは、正しいHTMLの構造です。
 
 
以上です。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

なるほど、altですか。

 
 
こんなことで、HTMLの構造が変わってしまうなんて。
(「コードエディタ」のまま出力されていると言えば、そうですが。)
 
まだまだブロックエディタは、クセがあるというのか、脆いというのか・・・。
 
上記のような感じみたいです。
epz1さん、お試しください。

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17394
 
投稿者:: @chu-ya

●動作
Alt テキスト (代替テキスト)に改行を入力すると<div class="wp-block-image">が付かない。
この時、<figure class="wp-block-image aligncenter size-full">となる。
前述のCSSの変更も合わさり、中央寄せにならなくなり。

こちらの仕様は僕も初めて知りました。いつからそういう仕様だったんだろうか。
ただこれWordPressの仕様なのか不具合なのか判断が難しいところですね…。
mk2さんが書かれたとおり、Alt属性の改行一つでHTMLコードが変わってしまうのは、やはりちょっと違和感を感じてしまいます。


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

「WordPress wp-block-image alt 改行」で検索してみても、それっぽい症状は出てこないですね…。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

これからできる範囲で、順番に確認してみます。

まずは、WordPress 5.7.2、Twenty Twenty-One: 1.4

上の画像ブロックは、altの途中で改行あり。
下の画像ブロックは、alt未入力です。

 
構造は変わらなかったです。
 

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

WordPress 5.8.3、Twenty Twenty-One: 1.5

上の画像ブロックは、altの途中で改行あり。
下の画像ブロックは、alt未入力です。

 
こちらも、変わらず。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

WordPress 5.9.3、Twenty Twenty-One: 1.6

上の画像ブロックは、altの途中で改行あり。
下の画像ブロックは、alt未入力です。

 
こちらも変わらず・・・あれれ?

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

WordPress 6.0、Twenty Twenty-One: 1.6

先程、Cocoonのバージョンを変えながら、確認した環境です。

投稿は何も触らずに、テーマをTwenty Twenty-Oneに変更だけしました。

 
 
この環境は、HTMLが変わります。
 
 
Twenty Twenty-Oneに切り替えてから、新規投稿を作成しても、やはり構造は変わりました。
 
 
 
Twenty Twenty-OneのCSSが上手く当たっているみたいで、構造は変わっても中央揃えです。
 
figureだけのものは、以下が適用されています。
(altを改行したもの)
 
 
div、figureの構造のものは、以下が適用。
(alt未入力)
 
 
意図したものが当たっている訳ではないものの、たまたま上手くいっている・・・という感じに見えます。
 
WordPress本体の不具合だと思いますが、気づいていない・・・という感じでしょうか。

   
わいひら reacted
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

mk2様、chu-ya様、わいひら様、ご見解をお聞かせいただき、どうも有難うございます。

確認が遅れてしまい、大変申し訳ございません・・・
本業の方が[超]繁忙期中ですので、恐縮ながらご容赦願えればと思います。

今ほど皆さんのご見解を一通り読み下りてきたのですが、僕の知識レベルでは、正直なところ、一回読んだだけではよく分かりませんでした。(苦笑)

もうちょっと落ち着いてから熟読してみますので、しばしご猶予いただけると有難いです。

皆さん、本当にどうも有難うございました。
引続き、宜しくお願い致します。


   
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

mk2様、chu-ya様、わいひら様

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

今ほど熟読しまして、何となく理解できた気がしましたので、取急ぎ、サンプルページとしてお出ししていた以下の記事の、前半の10個ほどの画像ブロックのaltから、改行を削除してみました。
https://uutu.life/2021/09/25/tenjositajiseach02-magnet1-12258/

・・・ら、お蔭さまでセンタリングに戻りました!

皆さま、本当に有難うございました。社交辞令でなく、心より御礼申し上げます。

-----

素人的な解釈で恐縮なのですが、mk2さんでご検証いただいた結果を見る限り、5月末までは許されていたalt内の改行が、バージョンアップによって許されなくなった・・ということなのでしょうか?

alt内にも書き込んだ方がSEO上はいいんだ!と聞いたことがあったため、バカ正直に、ほぼ全ての記事の全ての画像に、改行アリの文言を片っ端から書き込んであるのですが、きっと、既存の画像関係を更新する際には、alt内のすべて改行を削除していかないといけなくなったということですね。

専門から離れすぎていて、良し悪しはよく分からないのですが、差し当たっては解決策が見つかって、心底ホッとしました。

-----

ところで、高速化設定やLiteSpeed Cacheは元に戻して大丈夫でしょうか?

思っていたより、体感のスピードは変わらないようですし、左寄り以外の不具合はパッと見はないように見えますので、特に急がないのですが、ご教示願えると助かります。

この度は、貴重なお時間を拝借してしまい、申し訳ございませんでした。
(ご迷惑でなければ・・)今後とも、どうぞ宜しくお願い申し上げます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

投稿者:: @epz1

5月末までは許されていたalt内の改行が、バージョンアップによって許されなくなった・・ということなのでしょうか?

WordPress 6.0から、仕様が変わったということですね、結果的には。
それが、仕様変更なのか、不具合なのかは、分からないですが。
(気持ち的には不具合・・・)

 

投稿者:: @epz1

既存の画像関係を更新する際には、alt内のすべて改行を削除していかないといけなくなったということですね。

そうですね、altから改行を削除しないとならないと思います。

もしくは、改行を&#形式の文字コードで指定すると上手くいくかもしれないです。

「html alt属性 改行」などで検索すると、いくつか見つかると思います。

 

投稿者:: @epz1

高速化設定やLiteSpeed Cacheは元に戻して大丈夫でしょうか?

大丈夫だと思います。

 

こういうケースもあるものかと、勉強になりました。

特に迷惑なんて思わないですよ。
epz1さんが協力してくださったので、助かりました。

解決して良かったです。
お疲れさまでした。
(たくさんある場合、修正が大変だと思いますが。)

こちらこそ、よろしくお願い致します。


   
わいひら reacted
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

mk2様

ご返信ありがとうございます。

altの修正については、画像自体はおそらく2500~3000枚とかの枚数になるのですが、画像関係を更新しなければ、その記事内の画像は既存のままで大丈夫のようですので、商品リンク切れなどで画像関係をイジることになった時に、その記事内の画像ごとに地道に対応しようと思います。

職業柄か、一部のレイアウトが崩れているだけで、記事を更新する気すらが失せてしまうタイプの人間ですので、解決策が見つかって、本当に有難く思っています。

※本音はWPなどの新たな更新でスパッと直ってくれると有難いんですけど(笑)

 

この度は、貴重なお時間をお割きいただいて、色々とご検証いただきまして、本当にどうも有難うございました。

今後とも宜しくお願い申し上げます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

以下の部分は、再度確認なさった方が良さそうに思います。

投稿者:: @epz1

画像関係を更新しなければ、その記事内の画像は既存のままで大丈夫のようですので

更新有無は関係ないのではないかと、推測します。

これは、キャッシュが働いていたから大丈夫だっただけではないかという気がします。

WordPressが動的にページを作る際には、更新有無に関わらず、今回の事象が発生しても不思議ではない気がします。

確かなことは言えないのですけれど。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3152
 

●ご参考

子テーマCSSに以下を追加すれば、画像を中央寄せになります。

.wp-block-image.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

   
わいひら reacted
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

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

引続きのアドバイス、どうも有難うございます!

------
mk2さん

画像をイジっていない記事の画像にも同様の現象が出ている可能性がある・・というご意図ですよね?
確かに、話の筋から言うと、仰る通りかもしれません。

恥ずかしながら、キャッシュの概念が今ひとつ分かっていないのですが、注意して確認してみるようにしようと思います。

ちなみに、LiteSpeed Cacheでのキャッシュのクリア方法は、「すべてをパージする」でいいんだ!と、先日お伝えした、LiteSpeed Cacheの設定をしていただいた、とあるプログラマーの方から教わったのですが、キャッシュのクリアの仕方としては、そもそもこれは大丈夫なのでしょうか?

この措置で良ければ、LiteSpeed Cacheを戻した後、「すべてをパージする」をやってみて、確認してみたく思います。
※バタバタしており、実はまだ何も戻せていないので・・・。

-----
chu-yaさん

素人的な質問で申し訳ないのですが、alt内に改行が残っていても、子テーマCSSにお示しいただいた記述を追記するだけで、左寄りになってしまっている部分が、一括で改善される・・というご意図ですよね?

もしそれだけで改善されるなら、とても有難いお話ですので、後ほど、試しにやってみるように致します。

自分が無知すぎるのが、そもそもの問題なのですが、専門的なアドバイスを頂戴できると、非常に助かります。
皆さま、本当にどうも有難うございました。

引続き、どうぞ宜しくお願い申し上げます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

申し訳ないですが、私は「LiteSpeed Cache」を使ったことがないため、操作までは分からないです。

キャッシュは、WordPressが動的にページを作った後の、最終的な完成イメージのページを保存しておくものです。

2回目以降は、その保存されたものを表示させ、動的にページを作成することを止めてしまいます。

そのため、速くなるという感じだと思います。

 

このキャッシュが、WordPress 6.0以前の状態で保存されていれば、今回の事象は発生しないと思います。
何かの機会で、キャッシュが更新された際に、この事象が発覚すると思います。

今回の事象は、alt属性がどうか・・・というだけであって、更新があったらということではないと思います。

 

chu-yaさんの書いてくださったものは、以下の構造のものを中央揃えにするものです。

<figure class="wp-image-block aligncenter~">

これを書いておけば、今回のWordPress本体の不具合?によるaltの影響はないと思います。

WordPressの不具合?が修正された場合は、不要にはなりますが、害はないと思います。
(修正されるか、分からないですけれど。)


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3152
 

@epz1 さん

投稿者:: @epz1

素人的な質問で申し訳ないのですが、alt内に改行が残っていても、子テーマCSSにお示しいただいた記述を追記するだけで、左寄りになってしまっている部分が、一括で改善される・・というご意図ですよね?

YES。


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

mk2さん、詳しい検証ありがとうございます!
その症状でしたら、不具合の可能性が濃厚ですね…。
6.0.1までちょっと様子見してみようと思います。


   
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

mk2様、chu-ya様

ご返信、どうも有難うございます。

投稿者:: @mk2
今回の事象は、alt属性がどうか・・・というだけであって、更新があったらということではないと思います。

これ↑については、素人ながらですが、僕でも確かにそんな気がします。

今ほど、念のため他のページも見てみたのですが、何も触っていない(気がする)記事でも、仰る通り、一部で左寄り現象が出ているページもありました。
(ただ、今のところは、ザッと20記事くらい見たところだと、1記事だけでした)

でも、mk2さんのご指摘の通り、こちらでの表示がキャッシュが効いている状態なのだとすれば、更新された時の可能性を考えるなら、やっぱりchu-yaさんのご提案を試してみた方が良いということですね・・

後ほど、試してみまして、ご報告するように致します。

 

毎度のことながら、どうも有難うございました。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

例えば、ですが。

以下のようにクリックしても、少し反応が遅いページがあります。
(良く見ていただくと、クリックした瞬間、カーソル周辺に円が表示されますので、クリックした瞬間は分かると思います。)

 
 
これは、おそらくページキャッシュが残っていなくて、キャッシュを作り直しているので、少し遅いのだと思います。
(キャッシュの保持期限というのかそういうものが、おそらくあるのでは・・・。)
 
こういうタイミングで、今回のような事象が発生すると思われます。
(alt内に改行があれば。)
 
 
ページのソースを見ても、まさにアクセス時間でキャッシュを作ったようなコメントが、最下行に入っています。
 
投稿者:: @epz1

更新された時の可能性を考えるなら、やっぱりchu-yaさんのご提案を試してみた方が良いということですね・・

もし、これが私が商売でやっているサイトだったら、即座に対応しますね。

別に、このCSSを追加したからといって、害がある訳ではないと思いますし。
同じようなclassのものがあれば、それも中央揃えになりますが、そういうものって他にありますかねぇ・・・。
(「画像ブロック」で、かつ、中央揃えのクラスが、同一タグに入ったものが他に・・・)

むしろ、やらない理由はなんだろう・・・と思います。
(不具合が起きそうだと、事前に分かっているのに、対応しない理由は・・・)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

わいひらさん

はい、そうですね、WordPress本体というのか、Gutenbergなのか、不具合だと思われます。

時間を見つけて、「WordPress 6.0の不具合」のトピックにも追加しておこうと思います。
(明日くらいに…今日はちょっと難しそうですので)


   
わいひら reacted
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

mk2様、chu-ya様、わいひら様

色々と有難うございます。

今ほど、子テーマcssにchu-yaさんにお示しいただいたコードを貼ってみましたら、おっしゃる通り、左寄りは解消されたようです。
・・・と言っても、全部を確認したわけではないのですが。

キャッシュの考え方についても、わざわざご丁寧に有難うございます。
なるほど、そういうニュアンスなんですね・・・
先ほど、高速化設定と合わせて、LiteSpeed Cacheも戻したところですので、僕の理解を超えたところで、色んなことがまた再開されたんだろうと思います。

繰り返しになりますが、この画像が左寄りになってしまう原因が、仮に、alt内で改行を入れることでhtmlが変わってしまうという、WP6.0側の不具合だとすると、もっと多くの方々が困っている可能性があるところで・・・
WEBで見る限り、多くの人が困っている様子が見られないのは、alt内に改行までしながら、バカ正直にたくさん書き込んでいるような人があまり多くない・・ということなのかもしれませんね。(笑)

あとは、PCなどの巾広の画面で見ない限りは、画像が左寄りになってしまっていることに気付き得ないことで、気付いている方が少ないだけなのかもしれません・・・
(今回の問題となった僕のブログも、スマホでの閲覧が7割ほどのようですので)

 

この度は、本当に有難うございました。

今夜はぐっすり眠れそうです!
・・・と言っても、本業の方で夜なべにはなってしまうのですが。(苦笑)

とても勉強になりましたし、非常に救われました!
しつこいようですが、本当に、皆さんどうも有難うございました。

これを機に、今後とも宜しくお願いできると有難いです。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

epz1さん

投稿者:: @epz1

WP6.0側の不具合だとすると、もっと多くの方々が困っている可能性があるところで・・・
WEBで見る限り、多くの人が困っている様子が見られないのは、alt内に改行までしながら、バカ正直にたくさん書き込んでいるような人があまり多くない・・ということなのかもしれませんね。(笑)

なんとなく思うのは・・・。

alt属性を改行している方がどれくらいいらっしゃるか・・・だと思います。
alt属性は入力なさっていても、改行はなさっていないかもしれないなという印象です。

WordPress 6.0、かつ、alt属性で改行。
この条件を満たす方は、少ないかもしれないです。

 

そして、epz1さんもお書きになった通り、モバイル機器での閲覧の場合、気づかないということでしょうね。
やはり、スマホでご覧になる方が、多いと思います。

7割というのは、私の感覚的にもそれくらいという印象を受けています。
(私の場合、電車の中や、お昼休みにご覧になる方が多いみたいです。)

 

でも、以下のサイトを見ると・・・

2021年デバイス別シェア、パソコンがスマホを上回る
https://news.mynavi.jp/techplus/article/20220103-2242624/

日本ではPCが多い?
コロナ禍の影響もあるのでしょうか。

確かに上記サイトにもあるStatcounter Global Statsを確認すると、そんな感じなんですよねぇ。

 

とりあえず、解決して良かったです。
今後ともよろしくお願い致します。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3152
 

メディア追加時のalt属性の入力はinput(改行不可)
Gutenbergのalt属性の入力はtextarea(改行可)
ここに違いがあり。

以前は、alt属性はメディア一覧に追加の際、メディア一覧側で入力していた。
Gutenbergになり、エディタ中で容易にalt属性を入力可能となった。
この為、今回のような事が起きたと思われます。

属性の改行は初めて見ました。


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

@epz1 さん

バカ正直にたくさん書き込んでいるような人があまり多くない

このようにお書きになったのが気になったため、念のために書いておきます。

alt テキストは、「文脈にそって簡潔に書く」必要があります。

① 文脈にそうとは?

alt テキストが、前後の文章とつながっているのが理想です。

以下の説明が分かりやすいと思います。

お前らはまだ img タグの alt 属性の付け方を間違っている - 例5:挿絵

② 簡潔に!

alt テキストの最大文字数は 125 文字です。これ以上の文字数の alt テキストは、スクリーンリーダーが読み上げません。

また、簡潔ではない説明は、スクリーンリーダーの読み上げを聞いている方から「うざいな」と思われるかもしれません。

125 文字を超える場合は、キャプション(figcaption)に書きます。

③ 「解説用画像」「~の画像」は不要

alt テキストは、画像を説明するテキストです。そのため、alt テキストに「解説用画像」や「~の画像」を含める必要はありません。含めずとも画像の説明だと分かります。

この投稿は3年前ずつAkiraに変更されました

   
わいひら reacted
 epz1
(@epz1)
Active Member Registered
結合: 3年前
投稿: 10
トピックスターター  

mk2様

ご返信、どうも有難うございます。

最近はPCでの閲覧も増えているんですね?
僕のサイトは、コロナ禍に入ったころに、ようやく伸び始めてきたのですが、最初っからコロナ禍だったようなものですので、変化の比較はできそうもありませんでした。

ただ、二年前は7:3ほどだったのが、最近は6.5:3.5くらいの比率になってきているのは感じていましたので、確かに徐々に増えてきているような印象ではあります。

何はともあれ、解決して、本当に良かったです。

当初からご相談に乗っていただき、心から感謝しております。

-----

chu-ya様

alt属性のご解説、どうも有難うございます。
そうなんですね、そもそもは、altは改行不可が基本だったということですね。

ブロックエディタの方でしか入力をしたことがありませんでしたし、そもそも勉強不足なので、基本的なルールが抜けて落ちていたということになりますね(苦笑)
(おそらく他にも色々と抜けていると思いますが。)

僕のような無知な人間が、訳が分からぬまま書き込んだことによって生じることになった不具合ということでしょうか・・。
※不具合というより、ただの僕のミステイクのような気もしますね。

非常に有益なご解説、どうも有難うございました。

-----

Akira様

ご指摘ありがとうございます。

画像がどのような画像なのかを解説すればいいだけの欄なのかと思って、勘違いしておりました・・。
どこかのサイトでそんなことが書いてあった気がしたのですが、当初から間違って解釈していたようですね。

大変失礼致しました。

ご案内いただいたリンク先も見てみたのですが、パッと見では、今ひとつピンときませんでしたので、時間のある時にじっくり拝見させて頂き、正しいニュアンスを勉強するようにしようと思います。

「125文字以内」や「文脈にそって簡潔に書く」というルールも、まったく知りませんでしたので、とても有難いです。
問題が起こるたびに常々感じていますが、やっぱり色々と奥が深いですね・・

 

訳が分からぬまま運営しているので、詳しい方からの客観的なご意見は非常に助かります。

皆さん、本当にどうも有難うございす。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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