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

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

インデックスカード(エントリーカード)...
 
共有:
通知
すべてクリア

[解決済] インデックスカード(エントリーカード)の上部に余白ができてしまう

12 投稿
4 ユーザー
0 Reactions
18 表示
(@picsis2007)
Active Member Registered
結合: 1日前
投稿: 4
トピックスターター  

お世話になります。
会社のブログの運営を担当しています。コードは全くの初心者で先人のカスタマイズの知恵をお借りして、ホームページに実装しました。
ところが、ちょっと気になるところを見つけたので修正したいのですが、うまくいきません。

お力をお貸しいただくことは可能でしょうか?

不具合・カスタマイズ対象ページのURL: https://picsis.co.jp/blog/

相談内容:
インデックスカード(エントリーカード)の上部に余白ができてしまう

不具合の発生手順:
https://yujiblog.org/cocoon-index-cardを参考にカスタマイズ
カスタマイズすると、縦型カード(2列)で角丸、上、左右の余白がない状態になるはずなのですが、上部に余白ができてしまいました。

解決のために試したこと:
figure.entry-card-thumb.card-thumb.e-card-thumbと、entry-card-wrap.a-wrap.border-element.cfのmarginやpaddingの最初の数値をいじってみましたが、上、左右に余白ができたりなど、解決に至りませんでした。
paddingの数値でしたら、0 0.5 で 上下、左右みたいな並びになると思うのですが、最初の数値をいじると左右に余白ができるのはなんかおかしい気がします。別の要因の可能性があるのでここは違うかなと。

display:flex;~の辺りの方が問題なのかもと思いましたが、center(真ん中揃え)と書いてあるのでこのdisplayに対するサムネイルの高さ不足かとも思いましたが、上下に余裕があるので違うようです。

なんとなく、カードに対して、ホバー分サムネイル画像が下がっている気がするのでこの辺りの修正ではないかと考えはしたものの、解決できませんでした。

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

----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.5.1
カテゴリー数:10
タグ数:36
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:40443 バイト
functions.phpサイズ:204 バイト
----------------------------------------------


   
Y.INABA
(@yinaba)
Eminent Member Registered
結合: 2週間前
投稿: 23
 

@picsis2007 さんへ。

環境情報は全て貼り付けていただいてもよろしいでしょうか?

また、コード圧縮されているようなので、その辺りの設定を無効化いただいてもよろしいでしょうか?

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

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

 

原因の早期特定のため、ご協力いただけますと幸いです。


 

スキンによっては、ご教示いただいた記事のとおりに進めると不具合が出る場合があるのかもしれません。

試しにスキンを変えてみるなどのことはできますでしょうか?

この投稿は6時間前 2回ずつY.INABAに変更されました

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3401
 

別の要因の可能性があるのでここは違うかなと。

「かな」とか思い付きでは原因を特定できません。

Chromeデベロッパーツールを用い、どの要素か一つ一つ調べていますか?
まず、カスタマイズするのChromeデベロッパーツールの使い方を覚えてください。

●回答

以下を追加します。

.entry-card-thumb {
  margin:0
}

   
(@picsis2007)
Active Member Registered
結合: 1日前
投稿: 4
トピックスターター  

@chu-ya すでに試している内容ですが、変化ありませんでした。


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

出先でスマホからなもので、何も調べていませんが。

スマホで見ると、カードが左に寄っちゃってますね。

 
意図したものであれば、ご放念ください。

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3401
 

投稿者:: @picsis2007

すでに試している内容ですが、変化ありませんでした。

そもそも書かれていないように思えます。

AutoptimizeでCSSを縮小化しているようなので、プラグインの停止願います。
どこに書かれたCSSが影響しているのか分かりません。


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

プラグイン「W3 Total Cache」をご利用で、このプラグインで縮小化しているかもしれません。

こういうことがあると、回答者の方々の負担になります。

環境情報は省略しないでください。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3401
 

スキンの「ホワイトラーメン」に設定。
PICSIS2007さんが追加している子テーマを加えた場合、mk2さんの言う左寄りにはなりませんでした。

図示のようにCSSがエラーになっており。
子テーマCSSをチェッカーにかけてもエラーはなく。


追加CSSなど、子テーマ以外にCSSを書いていませんか?

mk2さんの言われる通り、現状ではどのCSSで問題が起きているのか全く分かりません。
調査を願うなら、対応願います。


   
(@picsis2007)
Active Member Registered
結合: 1日前
投稿: 4
トピックスターター  

@chu-ya さきほど、ビジュアルコードで確認し、該当のクラスにmarginの数値を追記したところ解決できました。


   
(@picsis2007)
Active Member Registered
結合: 1日前
投稿: 4
トピックスターター  

@mk2_mk2 スマホ版の左寄りの件は別件ですね、こちらも検証してみます。ありがとうございます。


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

まだスマホからなもので、何も確認はできませんけれど。

縮小化の件もそうなのですけれど。

ページキャッシュプラグイン「W3 Total Cache」をご利用です。

そのため、

  • ログインユーザーには、最新の状態が見える
  • 第三者には、ページキャッシュの状態が見える

そんな状態が発生していませんか?

お問い合わせの際は、このプラグインは無効してください。

環境情報を全量ご提示いただかないと、第三者からは分からないことが多く、回答・調査が困難なことがあります。

フォーラムマナー・ルールにご協力をお願い致します。

(本件が解決済であれば、今後)

この投稿は5時間前ずつmk2に変更されました

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

「解決済」になっていますので、本トピックはクローズしますね。


   
共有:

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

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

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

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

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

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

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

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