サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
2023年11月24日 12:45
子テーマの style.css に以下の CSS を書いた場合、ご希望に沿うでしょうか?
・画像では長いタイトルだと2列目の文字がはみ出ているが、はみ出してしまう部分を省略したり画像内に綺麗におさめたい
※ 文字を 2 行で省略しています。
.popular-entry-cards.large-thumb-on .card-content { max-height: none; } .popular-entry-cards.large-thumb-on .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
・画像にカーソルを合わせるとタイトル部分が消え画像のみになるが、カーソルを合わせてもタイトルを表示し続けたい
.popular-entry-cards.large-thumb-on .a-wrap:hover .card-content { margin-bottom: 0; opacity: 1; }
・現在タイトルの背景が薄黒い感じになっているがここの色を変えたい
.popular-entry-cards.large-thumb-on .card-content { background: rgba(162 96 191 / 0.8); backdrop-filter: blur(6px) saturate(180%); -webkit-backdrop-filter: blur(6px) saturate(180%); /* 元々はグラデーションで #555 の変更だけでいいかもしれません */ /* background: linear-gradient(180deg, transparent, #555); */ }
わいひら reacted
Topic starter
2023年11月25日 05:09
ありがとうございます。助かりました。
ついでに質問したいのですが人気記事の画像のサイズを正方形にして表示することは可能でしょうか。
2023年11月25日 14:04
@coco123 さん
可能です。ただ、正方形にする対象が人気記事だけか否かでやり方が異なります。
① 全ての一覧表示で正方形にする場合
Cocoon 設定 > 画像の「サムネイル画像」で「1:1(正方形)」を選択します。
参考:テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法
② 人気記事だけ正方形にする場合
子テーマの functions.php にコードを書きます。このコードの場合、人気記事の画像のサイズは 320x320 になります。
add_action( 'after_setup_theme', function() { add_image_size( 'square-cocoon-popular-entry-card', THUMB320WIDTH, THUMB320WIDTH, true ); }); add_filter( 'get_popular_entries_thumbnail_size', function( $thumb_size ) { $thumb_size = 'square-cocoon-popular-entry-card'; return $thumb_size; });
① でも ② でも設定後はプラグイン Regenerate Thumbnails で画像の再生成が必要です。
This post was modified 11か月前 2回 by Akira
わいひら reacted
2023年11月25日 16:09
CSSを用い、人気記事のサムネイルを正方形(1:1)で表示させます。
.popular-entry-cards .card-thumb img { aspect-ratio: 1 / 1; object-fit: cover; }
わいひら reacted
2023年11月25日 19:15
CSS では不十分です。
Cocoon 設定 > 画像の「サムネイル画像」は、「正方形」以外は横長です。それを CSS で正方形にすると画像が荒くなります。
This post was modified 11か月前 by Akira
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。