「メイド・イン・ヘブン」スキン適用中

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

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

人気記事ウィジェットについて
 
共有:
通知
すべてクリア

[解決済] 人気記事ウィジェットについて

7 投稿
3 ユーザー
4 Likes
282 表示
(@coco123)
Eminent Member Registered
結合: 5か月前
投稿: 16
Topic starter  

最近ワードプレスを始めた初心者です

画像のように人気記事のウィジェットを横並びにし、タイトルを重ねた大きなサムネイルにして表示しているのですが

三つほど質問があります。

 

・画像では長いタイトルだと2列目の文字がはみ出ているが、はみ出してしまう部分を省略したり画像内に綺麗におさめたい

・画像にカーソルを合わせるとタイトル部分が消え画像のみになるが、カーソルを合わせてもタイトルを表示し続けたい

・現在タイトルの背景が薄黒い感じになっているがここの色を変えたい

 

以上のことについてお手数をおかけいたしますが、ご教示いただけると幸いです。


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

子テーマの 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
(@coco123)
Eminent Member Registered
結合: 5か月前
投稿: 16
Topic starter  

ありがとうございます。助かりました。

ついでに質問したいのですが人気記事の画像のサイズを正方形にして表示することは可能でしょうか。


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@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 5か月前 2回 by Akira

   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2239
 

CSSを用い、人気記事のサムネイルを正方形(1:1)で表示させます。

.popular-entry-cards .card-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

   
わいひら reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

CSS では不十分です。

Cocoon 設定 > 画像の「サムネイル画像」は、「正方形」以外は横長です。それを CSS で正方形にすると画像が荒くなります。

This post was modified 5か月前 by Akira

   
(@coco123)
Eminent Member Registered
結合: 5か月前
投稿: 16
Topic starter  

解決いたしました。この度は親切にありがとうございました!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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