サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年12月2日 19:39
こんにちは！
エントリーカードの下の余白をなるべく小さく設定したく、
方法をいろいろ試しております。
まずは、サムネイル画像の下の余白（下記リンクの赤帯の部分）を
削除したいと考えているのですが、可能でしょうか？
よろしくお願いいたします。
2018年12月3日 08:45
タブレットサイズ以上のサイズは、子テーマ側で.entry-card-thumb の横幅が width: 200px; と指定がありますよね。
その画像を囲む.entry-card-thumb領域も画像と同じ高さ112.5pxにしてあげると良いと思います。
@media screen and (min-width: 769px) {
.entry-card-thumb {
height: 112.5px;
}
}
あとはレスポンシブなので、高さ指定はシンドイかもです。
なのでタブレットサイズ以上のみ反映させるようにしました。
***
https://wp-cocoon.com/category/theme/theme-customs/
この一覧ページ（デフォルト）のスタイルを参考にしました。
This post was modified 6年前 by かうたっく
わいひら reacted
Topic starter
2018年12月3日 10:39
かうたっくさま、
ありがとうございます！
とてもうまくいきました！
より理解するため、画像の高さの設定をどのようにしたら確認できるか教えていただけますか？
CSSを112.5で検索しても、そのような記述はみあたらず。。
画像サイズを変更したら、高さも変わるかもしれないので、確認できるようになれればと。
よろしくお願いいたします。
RB
2018年12月3日 13:46
より理解するため、画像の高さの設定をどのようにしたら確認できるか教えていただけますか？
要素の検証画面です。
使われているブラウザによっては『検証』などもあるかもです。
詳細は
目次：検証画面の起動方法（Chrome、FireFox、IE・Edge）
https://bibabosi-rizumu.com/beginner-element/#toc2
同じページの
目次：要素の検証でカスタマイズしたい場所をクリックする
https://bibabosi-rizumu.com/beginner-element/
知りたい要素、トップ画面にあるfigure に囲まれているimg要素を確認すれば良い感じです。
CSSを初めて触る人にどう伝えるべきか…ですが、内容をチェックしてくうちに伝わるかと思います＾＾；
分からない部分は初めは多々あると思いますが、どの範囲が分からないのか。
それが分からないので、凄く雑ですが…
わいひら reacted
2018年12月3日 14:16
食事前にふと思ったのが、上記ではつたわりませんね。
リンク先通りの状態でimgにカーソルを当てると
500×210.22となっています。
トップページの画像のfigure：親要素に囲まれたimgタグは
500×210.22となってるのが分かりますか？
そのサイズを指定した感じです。検証画面の仕組みが分かれば、CSSも制覇できますので頑張ってくださいね＾＾
私のページを見て、別ページで書いてる内容を見れば把握しやすいです。
もしくは別ページを見て私のページを見ればもっと分かりやすいかもしれません。
皆トップページを参考に書くので、ドンドン分かりやすくなっていく感じかと思います。詳細は見てませんが＾＾；
わいひら reacted
Topic starter
2018年12月3日 16:00
かうたっく様
ご丁寧にありがというございます。
画像の高さの確認方法、とてもよく理解できました！
chromeを使っているのですが、検証という機能があることを初めて知りました。
検証機能の全体はまだ全然理解できていないので、
かうたっくさまのページも参考に研究いたします。
RB
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。