サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-08-30 22:20
わいひら様
いつもお世話になっております。
当フォーラムではサポート対象外の「CSSのカスタマイズにより起きた不具合の原因究明」に近い内容ですが、どうしても困ってしまい、相談させていただきました。
スマホから自分のサイトを見た際、「エントリーカードのタイトルと記事公開日の文字が重なっている」ことに気付き、記事公開日のmarginやpaddinを調整して対処しようとしました。
すると、画像のように記事公開日の文字が想定しない場所へ移動してしまったので、追加したCSSを削除しました。
これによりほとんどの記事公開日の文字は元の位置に戻ったのですが、なぜか「特定のカテゴリーページの１ページ目」だけでは元に戻らず、スマホ画面から見た時に、記事公開日が添付した画像の赤枠の位置に表示されてしまいます。
具体的には、以下のリンクにある「ブログカテゴリー」の１ページ目をスマホで見た場合だけ、記事公開日の表示位置がズレている状態です。
https://kasegerusikumi.com/category/blog/
以下のCSSを追加したら記事公開日の表示がズレたと記憶しています。
.entry-card-info .post-date{
margin: 2em;
padding: 2em;
}
他の方のスマホからも同じように見えることは確認済みです。
自分でも色々と試していますが、「なぜ一部だけ表示がズレたままなのか」がわからず困っています。
もし何かヒントをいただければ幸いです。
----------------------------------------------
サイト名：続けるくん
サイトURL： https://kasegerusikumi.com
ホームURL： https://kasegerusikumi.com
コンテンツ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-tecurio-sky/style.css
WordPressバージョン：5.8
PHPバージョン：7.4.22
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.5.1
カテゴリ数：5
タグ数：9
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.0
style.cssサイズ：23836バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2020/08/midasi.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.6.1
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Autoptimize 2.9.1
Broken Link Checker 1.11.15
Compress JPEG & PNG images 3.2.1
Contact Form 7 5.4.2
Edit Author Slug 1.8.3
Google XML Sitemaps 4.1.1
Jetpack 10.0
LiteSpeed Cache 4.3
ProfilePress 3.1.17
Search Regex 2.4.1
----------------------------------------------
2021-08-30 22:37
続けるくんさん
私は今時間がなく調べることはできませんが…。
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
お問い合わせの際には、上記はオフにしてください。
外部から調べることが困難です。
オフの仕方は以下をご参照ください。
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
また、以下もお問い合わせの際にはオフにしてください。
LiteSpeed Cache 4.3
キャッシュが有効だと、最新の状態を確認できないことがあります。
以下プラグインはアンインストールすることをお勧めします。
Autoptimize 2.9.1
上に書いたCocoonの高速化と機能が重複しています。
圧縮済のものを、更に圧縮しても、意味はないです。
これにより、不具合が起きることがあります。
それらをオフなどにして、お待ちください。
他の方が調べてくださると思います。
私も時間ができれば、後程確認します。
今は上記のものが有効で、調べるのは困難でした。
わいひら reacted
Topic starter
2021-08-31 00:37
ｍｋ２さん、ご回答ありがとうございます。
縮小化設定やプラグインで調べにくい状態になっているんですね。
お手数をおかけして申し訳ありません。
ご回答の内容を順番に試していたところ、プラグイン「Autoptimize」を無効化した段階で表示のズレが直りました。
ｍｋ２さんのおっしゃる通り、「Cocoonの高速化設定とAutoptimizeの重複」が起きており、表示ズレの原因になっていたのかもしれません。
「CSSの不具合が起きたらプラグインを無効化してみる」というのは以下の記事にも書いてあり、自分の確認不足でした。今後CSSの不具合が起きた場合は、まずは以下の内容を試してみます。
https://wp-cocoon.com/faq-css-trouble/
ｍｋ２さん、ありがとうございました。
わいひら reacted
2021-08-31 00:44
続けるくん
上記を解決しようとして、
.entry-card-info .post-date{
margin: 2em;
padding: 2em;
}
としたのでは？
2021-08-31 00:46
続けるくん
「Autoptimize」は無効化ではなく、削除をオススメします。
2021-08-31 00:49
続けるくん
何らかの修正を行って、サイトの表示を確認する際は、プラグインの LiteSpeed Cache は停止しておくことをオススメします。
Topic starter
2021-08-31 10:08
リフィトリーさん、ご回答ありがとうございます。
───────────────────────────
＞＞エントリーカードの見出しと、投稿日が重なってしまうのは、子テーマCSSファイルの823行目辺りにお書きになった以下のコードが原因です。
/*記事一覧表示の枠内下側の余白削除*/
.entry-card-content{
padding-bottom:0;
}
───────────────────────────
この点についても困っていたので助かりました。
わかりやすく動画まで載せていいただきありがとうございます！
───────────────────────────
＞＞上記を解決しようとして、
.entry-card-info .post-date{
margin: 2em;
padding: 2em;
}
としたのでは？
───────────────────────────
はい、まさにその通りです。
本来の原因とは違う部分で直そうとしたのも、よくなかったのかもしれません。
───────────────────────────
＞＞「Autoptimize」は無効化ではなく、削除をオススメします。
何らかの修正を行って、サイトの表示を確認する際は、プラグインの LiteSpeed Cache は停止しておくことをオススメします。
───────────────────────────
「Autoptimize」は、Cocoonとは相性が悪いのですね…
今後CSSでデザインを変える時は、LiteSpeed Cacheを停止してから行ってみます。
これで、無事に悩みが解決しました！
リフィトリーさん、ありがとうございました。
Topic starter
2021-08-31 10:48
追記
「エントリーカードのタイトルと記事公開日の文字が重なる」件も解決しました。
同じ悩みを持つ方がいるかもしれないので、詳細を残します。
複数のエントリーカードが横に並んでいる時、「一番長いタイトル」を基準に、記事公開日の位置が決まるようです。
添付した画像を見て、自分は「左上のエントリーカードのタイトルと記事公開日の余白が広すぎる」と感じました。しかし、タイトルの長い中央のエントリーカードが基準となり、横一列の記事公開日の位置が決まるため、これが正しい表示です。
「CSSを元に戻してもデザインが元に戻らない現象」については、プラグイン「Autoptimize」を無効・削除。「LiteSpeed Cache（ほぼmixhostサーバー専用プラグイン）」を一時的に無効にすることで解決しました。
相談にお答えいただいたｍｋ２さん、リフィトリーさん。
改めて、ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。