サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2022年11月17日 13:50
不具合・カスタマイズ対象ページのURL： https://www.iphoneclear.jp/introduction/center-shop/battery/
相談内容：
スマホ表示にした際に、特定のtablepressで表示させている部分が大幅にはみ出てしまう現象が起きていて、困っています。
パソコンでは特に問題なく表示されています。
色々とコクーンの高速設定やAMP設定を変更したり、プラグインをオフなどにしたり、
テーブルプレスやページ内容の変更を試してみたのですが、原因が特定できませんでした。
現時点でわかったことは、
・店舗の下層ページ用に作成したテーブルのみ挙動が起きていること。（大幅にはみ出ている箇所です）
・起きている挙動はショートコード(Shortcodes Ultimateというプラグインを使用)が動作しておらず、アコーディオン開きっぱなしで、画像もサイズが大きくなり、テーブルプレスの内容もはみ出ている
・余計に不思議なのは、
該当するページをスマホで開きながら、店舗下層用のテーブルプレスをひとつ非表示にして、
開いてるスマホ画面を更新すると、表示が元に戻り、
さらに、非表示にしていたテーブル部分を元に戻して、再度スマホでページ更新をしても、問題なくうまく表示される。
なので、テーブルプレスの内容の問題ではなく、
読み込み(JavaScriptとか?)の問題なんだと思います。
ちなみに、この現象が起きているページは、
固定ページに、
[metaslider id=16365]
[table id=s-panel01 /]
[table id=center_shop-kasou /]
と、複数のテーブルプレスで作成したテーブルを入れ込んでいるページでのみ起きているので、それも問題に関係あるのでしょうか。
また、Shortcodes Ultimateの挙動が原因な気もするのですが、こちらが原因なのでしょうか。
お手数ですが、ご回答頂けると幸いです。
不具合の発生手順：テーマをコクーンに変更してすぐにこの現象に気づきました。別のテーマを使用しているときは問題なかったです。
解決のために試したこと：コクーンの高速設定やAMP設定を変更したり、プラグインをオフなどにしたり、
テーブルプレスやページ内容の変更を試してみたのですが、原因が特定できませんでした。
環境情報：
----------------------------------------------
サイト名：札幌でiPhone修理・故障は安心の道内企業アイフォンクリア 信用・信頼・高技術の『期待に応える誠実なiPhone修理店』
サイトURL： https://www.iphoneclear.jp/wp
ホームURL： https://www.iphoneclear.jp
コンテンツURL：/wp/wp-content
インクルードURL：/wp/wp-includes/
テンプレートURL：/wp/wp-content/themes/cocoon-master
スタイルシートURL：/wp/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.9.5
PHPバージョン：7.4.28
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.2.1
カテゴリ数：178
タグ数：996
ユーザー数：39
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：7842バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp/wp-content/uploads/2022/10/toplogo_new_phoneclear_60.png
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
All-in-One WP Migration 7.67
All in One SEO Pro 4.2.7.1
BJ Lazy Load 1.0.9
Contact Form 7 5.6.4
Contact Form 7 Datepicker 2.6.0
Enable Media Replace 4.0.0
EWWW Image Optimizer 6.9.2
Google XML Sitemaps 4.1.5
iThemes Security 8.1.3
Jetpack 11.4
List category posts 0.87
MetaSlider 3.27.13
PS Auto Sitemap 1.1.9
PuSHPress 0.1.10
Redirection 5.3.5
Search Meter 2.13.4
Search Regex 3.0.6
Shortcodes Ultimate 5.12.5
Show Current Template 0.4.6
SiteGuard WP Plugin 1.7.3
TablePress 1.14
WP-Doctor Malware Scanner & Security Pro 2.3
WP Fastest Cache 1.0.7
----------------------------------------------※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
2022年11月17日 14:45
osakanaさん
すみません、これから出掛けてしまうので、取り急ぎお願いだけ先にさせていただきます。
WP Fastest Cache 1.0.7
お問い合わせの際は、上記プラグインは無効にしてください。
キャッシュ時点のものが見えてしまい、最新の状態のものの確認ができないからです。
BJ Lazy Load 1.0.9
上記プラグインは、アンインストールをお勧めします。
WordPress 5.5以降は、標準でネイティブLazyLoadに対応しており、このプラグインは必要ないと思います。
また、5年以上メンテナンスされておらず、使用すべきではない気がします。
その他にも、LazyLoad系の機能をプラグインでご利用でしたら、無効化した方が良いと思います。
（現時点では、分からないので曖昧に書いてしまいます。）
（現時点では、分からないので曖昧に書いてしまいます。）
そして、はみ出しているのはモバイル表示だけではないです。
PCもはみ出しています。
すみませんが、通院の時間がありますので、一旦失礼します。
プラグインの無効化などしていただければ、他の方もご覧くださると思います。
わいひら reacted
2022年11月17日 15:08
子テーマの style.css に以下の CSS を追加すれば、一応見た目はまともになると思います。
table.tablepress img {
max-width: 100%;
}
ただし、まともになるのは見た目だけです。
<table> で本文全体のレイアウトを組まれていますが、このやり方はインターネット黎明期の 2000 年代によく使われました。阿部寛さんのサイトで使われているやり方です。
アクセシビリティが考慮されていないため、<table> でレイアウトを組むのは絶対にお止めになるべきです。ページ自体の作り直しを強くおすすめします。<table> はデータを表形式で表す部分で使うものです。
わいひら reacted
トピックスターター 2022年11月17日 15:25
ｍｋ２ 様
とても丁寧にご回答頂き、誠にありがとうございます。
WP Fastest Cache 1.0.7
BJ Lazy Load 1.0.9
こちらのプラグインは無効化致しました。
パソコンの表示もおかしくなっていたのですね。
こちらもご指摘いただきありがとうございます。
また、お時間ある際にご回答頂ければ幸いです。
よろしくお願いいたします。
トピックスターター 2022年11月17日 15:34
Akira様
ご回答いただきありがとうございます。
無知でお恥ずかしいのですが、このやり方ではどのようなデメリットがあるのでしょうか？
また、CSSをスタイルシートに入力したのですが、
はみ出なくはなったのですが、添付した画像のように
ショートコードでいれているアコーディンオン部分が、
すべて開かれていたり、
機種別と症状別で、タブが切り替わるところも、反応しなくなっているのですが、
なにか別の問題があるのでしょうか？
質問ばかりで申し訳ございませんが、よろしければご回答お願い致します。
トピックスターター 2022年11月17日 15:34
画像です。
2022年11月17日 23:54
@osakana さん
このやり方ではどのようなデメリットがあるのでしょうか？
アクセシビリティに問題を抱える恐れがあります。簡単に言えば、サイトの内容を正しく把握できない人が出てくるかもしれません。
絶対に止めるべきと書きましたが、禁止はされていません。ただ、Google などは使ってはダメだよと言っています。
参考：Tables | Google developer documentation style guide | Google Developers
もし <table> でレイアウトを組む場合は、Creating Accessible Tables などをご覧になるのがいいように思えます。
また、CSS を使った見た目の調整が面倒なのもデメリットです。
ショートコードでいれているアコーディンオン部分が、
すべて開かれていたり
以下のページのことであれば、添付画像のとおり私の環境では閉じています。
https://www.iphoneclear.jp/symptom/windshield/
機種別と症状別で、タブが切り替わるところも、反応しなくなっているのですが、
以下のページのことであれば、もともと動いていませんでした。
https://www.iphoneclear.jp/introduction/center-shop/battery/
わいひら reacted
トピックスターター 2022年11月18日 14:53
@akira 様
ご丁寧に返答頂き、ありがとうございます。
アクセシビリティに問題を抱える恐れがあります。簡単に言えば、サイトの内容を正しく把握できない人が出てくるかもしれません。
→こちらですが、内容を正しく把握できないというのは、物理的に文章とかにバグが起きて見えなくなる可能性があるということでしょうか？
https://www.iphoneclear.jp/introduction/center-shop/battery/
こちらのページだと、うまく動作しないのですが、なにか別の問題があるのでしょうか？
[table id=center_shop-kasou /]
このテーブルプレスで作成したものを入れているベージが、恐らくうまく動作しなくなっています。
2022年11月18日 22:21
@osakana さん
こちらですが、内容を正しく把握できないというのは、物理的に文章とかにバグが起きて見えなくなる可能性があるということでしょうか？
アクセシビリティの話です。
参考：アクセシビリティとは？
例えば、視覚が弱い方の中には、支援ツールとしてスクリーンリーダーをお使いになる方がいらっしゃいます。そのスクリーンリーダーがサイトを正確に読み上げない、読み上げた内容とサイトの内容が一致しないなどが起きると、支援ツールの利用者はサイトを正確に把握できない恐れがあります。
このアクセシビリティに問題を抱える可能性があるため、<table> でレイアウトを組むのは避けるべきとの考えが主流です。
尚、昨年の 2021 年 5 月に「障害を理由とする差別の解消の推進に関する法律」（障害者差別解消法）が改正され、2021 年 6 月 4 日に公布されました。この公布日より 3 年以内に施行されます。この改正により、企業や個人事業主を含む民間事業者も合理的配慮の提供が義務付けられます。この合理的配慮には、サイトのアクセシビリティも含まれます。この義務に反すること自体に罰則はありませんが、利用者からの信頼に悪影響を与えるかもしれません。
参考
こちらのページだと、うまく動作しないのですが、なにか別の問題があるのでしょうか？
理由は分かりませんが、「Q.1 交換にはどのくらい時間がかかりますか？」などがクリックできません。この部分は、プラグインの Shortcodes Ultimate でお作りになっているのでしょうか。そうであれば、プラグインにお問い合わせになるのがいいように思えます。
ただ、HTMLエラーチェッカー で調べると HTML の開きタグがと閉じタグの数が一致していません。まずは HTML のタグを正常にするのがいいと思います。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。