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. ブラウザ環境チェックツール

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

大きなカード(先頭のみ)で先頭だけ画像...
 
共有:
通知
すべてクリア

[解決済] 大きなカード(先頭のみ)で先頭だけ画像がぼやけるのを直したい。サムネイル画像サイズが変わってしまう

30投稿
5ユーザー
5Likes
1,204表示
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

いつもありがとうござます。

部長と申します。

https://bucho-diver.com/diary/

 

一件ご相談をお願いします。

結論からすると、大きなカード(先頭のみ)で先頭だけ画像がぼやけるのを直したいです。

 

まず、インデックス一覧で大きなカード(先頭のみ)を選択すると、先頭のみ画像がぼやけました。

 

そこで、当フォーラムを検索すると以下のコードがあったので貼り付けました。

 

 

function get_entry_card_thumbnail_size($count){
  return 'large';
} 

 

このコードをfunctions.phpに書いたところ、画像はぼやけずにキレイに表示されました。※今も貼ってあります。

 

しかし、サムネイル画像を黄金比で指定しているのですが、大きなカードの下のエントリーカードの黄金比が全て解除されて元の写真のアスペクト比(3:2)で表示されてしまいます。

 

つまり、私としては先頭だけ画像がぼやけるのを対策して、その下のエントリーカードのサイズは元の画像サイズではなく、指定している黄金比はそのままにしておきたいです。

 

その後に当フォーラムを参考にして以下のコードを作ってみましたが効きませんでした。

 

function get_big_card_first_thumbnail_size($count){
    return 'large';
}

 

ちなみに、ラティーナ対応はオンにしています。

 

このような場合は、どうしたらよろしいでしょうか。

 

お手数ですが、よろしくお願い致します。

 

 


   
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

度々すみません、追記ですが、もちろん先頭の画像だけではなく、すべての画像がぼやけなくしたいです。

また、私の環境はWindows10でクロームです。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@bucho さん

私のテストサイトでも、試してみました。

 

Cocoon設定のインデックスタブのフロントページタイプ(β版)の設定で、カードタイプを「大きなカード(先頭のみ)」と組み合わせると、

 

・一覧(デフォルト)
・タブ一覧

 

の2つは、ぼやけないですが、

 

・カテゴリごと
・カテゴリごと(2カラム)
・カテゴリごと(3カラム)

 

の3つの設定では、小さなサムネイル画像を読み込んでいるらしく、ぼやけてしまうみたいです。

 

おそらく、明日、わいひらさんが、診てくださるのではないかと思われます。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13830
わいひら - Facebookわいひら - Twitter
 
投稿者:: @bucho

度々すみません、追記ですが、もちろん先頭の画像だけではなく、すべての画像がぼやけなくしたいです。

通常のサムネイルでしたら、Retinaディスプレイ対応するしかないかもしれません。
https://wp-cocoon.com/retina-thumbnail/


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13830
わいひら - Facebookわいひら - Twitter
 
投稿者:: @bucho

しかし、サムネイル画像を黄金比で指定しているのですが、大きなカードの下のエントリーカードの黄金比が全て解除されて元の写真のアスペクト比(3:2)で表示されてしまいます。

 

つまり、私としては先頭だけ画像がぼやけるのを対策して、その下のエントリーカードのサイズは元の画像サイズではなく、指定している黄金比はそのままにしておきたいです。

これに関しては、そんな大きなサムネイルを作成するコードを書いてないです。
800pxの画像をRetinaで表示させるとしたら、横幅を1600pxで切り取る必要があります。
そんな大きな画像を、サムネイルとして投稿のたびに保存していると、画像投稿ごとに時間がかかりますし、画像の数だけ大きなサイズのサムネイルがサーバーに保存されることになります。そもそも、これだけ大きな画像をアイキャッチに設定しない人もおられます(十分なサイズがないとリサイズされない)。
なので、大きな画像は現在の仕様になっています。

ですので、解決する1つの策としては、自前でサムネイルサイズを黄金比で設定して、その設定したサムネイルサイズをget_big_card_first_thumbnail_size関数で呼び出すという方法が最も無難かもしれません。
https://kotori-blog.com/wordpress/mediasize/
※PHPのカスタマイズ方法は、サポートの対象外なので、詳細は省きます。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@yhira さん

私のテスト環境ではレティーナ対応はしていませんが、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。

 

ソースを見ても、320px × 180px と小さなサムネイル画像を読み込んでいるみたいです。

 

 

This post was modified 2年前 by リフィトリー

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@yhira さん

ここの添付で、ぼやけ具合が伝わるかどうか・・・

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@yhira さん

フロントページタイプ(β版)の設定で、

・カテゴリごと
・カテゴリごと(2カラム)
・カテゴリごと(3カラム)

 

とカードタイプを「大きなカード(先頭のみ)」と組み合わせたときの先頭の大きな画像の表示を確認した方が良いかもしれません。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@yhira さん

「タブ一覧」との組み合わせでは、ちゃんと大きなサイズの画像を読み込んでいるみたいです。

 

 


   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

横から失礼します。

function get_entry_card_thumbnail_size($count){
  if ($count == 1 && is_front_page() && !is_paged()) :
    return 'large';
  else:
    return 'thumb320';
  endif;
}

こんな感じで1枚目は大きいサイズ、それ以外はCocoonが生成したサムネイルサイズを指定するのではどうでしょうか?


   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

もしも、Cocoonが生成するサムネイルではサイズが小さすぎてぼやける場合。
全て大きい画像を使った上で、以前こちらで相談して教えていただいたCSSで縦横比を合わせる方法が使えると思います。

[解決済] 小さい画像でもサムネイル表示の縦横比を揃えたい

function.php

function get_entry_card_thumbnail_size($count){
return 'large';
}

style.css

.card-thumb:before {
content:"";
display:block;
padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb img {
width:100%; height:100%;
object-fit:cover;
position:absolute;
top:0; left:0;
}

黄金比の場合、

padding-top:66.66%; /* 3:2 = 2/3*100 */

この部分を書き換えればいいと思います。

padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@yhira さん

「タブ一覧」と「大きなカード(先頭のみ)」との組み合わせでも、タブを「新着記事」以外のカテゴリのタブを選択すると、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。

 

「フロントページタイプ(β版)」は、まだ β版 とのことのようですので、開発のヒントになれば・・

 

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@プー さん

いつもお世話になっております。

 

ご案内いただいた方法を興味を持って拝見しています。

 

私は、PHPの素養がないので、勉強になります。

 

「フロントページタイプ(β版)」も、多くの方が手軽に利用でき、(β版)の文字がなくなるといいなと思います。

 


   
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

@プー 様

 

コメントありがとうございます。

 

アドバイス頂いた以下のコードを試しましたが、先頭の大きなカードはぼやけたままでした。

 

が下のエントリーカードは黄金比が保たれました。

 

function get_entry_card_thumbnail_size($count){
  if ($count == 1 && is_front_page() && !is_paged()) :
    return 'large';
  else:
    return 'thumb320';
  endif;
}

   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

@bucho さん

アドバイス頂いた以下のコードを試しましたが、先頭の大きなカードはぼやけたままでした。

ダメでしたか。自分のサイトではこれでうまく出来ているのですが……。

それでは、その次に書いたstyle.cssにも追加する方法はいかがでしょうか。
padding-topの部分は62.5%で。
function.phpは最初にbuchoさんが書かれたものと同じです。


   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

上で書いたCSSの場合、全てのサムネイルが黄金比になると思います。

もしも、1枚目の大きい画像だけは元の比率3:2、残りは黄金比にしたい場合は
次のようにすればいいです。

.card-thumb:before {
content:"";
display:block;
padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */
}
.entry-card-wrap:first-child .card-thumb:before {
padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb img {
width:100%; height:100%;
object-fit:cover;
position:absolute;
top:0; left:0;
}

   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

ごめんなさい、ちょっと書き間違えたので先のレスできれば消してください。


   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

たびたびすみません、勘違いでした。そのままで大丈夫です。


   
ろこ
(@lococo)
Prominent Member Registered
結合: 4年前
投稿: 830
 

フロントページタイプ(β版)の機能は使用したことがないので、ちょっとコードを読んだだけですが、

Cocoon設定のインデックスタブのフロントページタイプ(β版)の設定で、カードタイプを「大きなカード(先頭のみ)」と組み合わせると、

・一覧(デフォルト)
・タブ一覧

の2つは、ぼやけないですが、

・カテゴリごと
・カテゴリごと(2カラム)
・カテゴリごと(3カラム)

の3つの設定では、小さなサムネイル画像を読み込んでいるらしく、ぼやけてしまうみたいです。

の部分に関して、関数get_entry_card_thumbnail_size内で用いる変数$countを受け渡せていない点が不具合の原因となっているようです。

 

フロントページタイプでカテゴリごとに設定した場合、記事一覧はlist-new-entries.phpからindex-funcs.php#L324で生成されますが、

  1. 関数get_category_index_list_entry_card_tagからentry-card.phpへ$countを受け渡していないので、entry-card.phpの記事一覧内でのカウントができていない。
  2. list-new-entries.phpにおける$countの値はentry-card.phpで必要な記事一覧内でのカウントではなく、フロントページタイプで設定される記事の表示数になっており、$countの扱いが異なる形で混同されている。

あたりの問題点を修正する必要があると思います。

 

要は、list-index.phpと同様にindex-funcs.php#L322-L325の部分を

while ($query->have_posts()) {
  $query->the_post(); // 繰り返し処理開始
  $count++;
  set_query_var('count', $count);
  get_template_part('tmp/entry-card');
}

といった感じに修正するだけだと$count自体は本来必要な値とは異なるため、$countも辿って修正しないといけません。


   
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

@プー 様

 

コメントありがとうございます。

 

教えて頂いた、以下のコード二つを試しましたが変わりありませんでした。

 

↓functions.phpにはこれ

functionget_entry_card_thumbnail_size($count){
  return 'large';
} 

 

↓CSSにはこれ

.card-thumb:before {
content:"";
display:block;
padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */
}
.entry-card-wrap:first-child .card-thumb:before {
padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb img {
width:100%; height:100%;
object-fit:cover;
position:absolute;
top:0; left:0;
}

 

試したところ、functions.phpに書いている方が優先?されるようで、それを書くと何をCSSに書いても変わりありませんでした。。

大きなカード(先頭)の画像はぼやけませんでしたが、その下のエントリーカード一覧のアスペクト比が元の画像のアスペクト比(3:2)になってしまいます。

 

 

 

 

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13830
わいひら - Facebookわいひら - Twitter
 

フロントページタイプ(β版)の設定で、

・カテゴリごと
・カテゴリごと(2カラム)
・カテゴリごと(3カラム)

とカードタイプを「大きなカード(先頭のみ)」と組み合わせたとき

この条件が必要だったんですね。こちらでは確認していませんでした。ありがとうございます。

投稿者:: @lococo

といった感じに修正するだけだと$count自体は本来必要な値とは異なるため、$countも辿って修正しないといけません。

これ、ループを抜ける事に$countをリセットするのではダメですかね。
どのように修正するのがスマートなんだろう…。
5.5.0で追加されたget_template_partの$argsを利用すればいいのかもだけど、5.5.0より前のバージョンだと、エラーが出るのかな?
https://developer.wordpress.org/reference/functions/get_template_part/


   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

@bucho さん

実際にそちらのサイトにCSSを適用してみると、小さいサムネイルはちゃんと黄金比になりました。

キャッシュが効いていて変わらないように見えるだけではないでしょうか。
ブラウザのキャッシュを削除するとか、キャッシュ系のプラグインを止めるとかしてみてはいただけませんか?


   
わいひら reacted
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

@プー 様

 

コメントありがとうございます。

 

すみません、キャッシュが効いていたようで、今試したところできました。

ありがとうございます!

 

しばらくはプー様に教えて頂いたコードを使って調整してみたいと思います。

 


   
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

@プー 様

 

度々すみません、先述した件ですが、サイドバーに表示している人気記事一覧のアイキャッチ画像が消えてしまうようです。

 

人気記事はコクーンの機能で最初から入っているのを使っています。

 


   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

@bucho さん

他に影響が出ないようにCSSを書き換えてみました。
これでどうでしょうか?

.ect-big-card-first .card-thumb:before {
content:"";
display:block;
padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */
}
.ect-big-card-first .entry-card-wrap:first-child .card-thumb:before {
padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.ect-big-card-first .card-thumb img {
width:100%; height:100%;
object-fit:cover;
position:absolute;
top:0; left:0;
}

それから、キャッシュのせいなら、もしかして前のfunctions.phpだけの方法でも大丈夫かもしれません。もう一度試してみることをオススメします。そっちの方が無駄に大きい画像を使わないので表示が軽いです。


   
わいひら reacted
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

@プー 様

 

アドバイス頂き、ありがとうございます。

 

最後に頂いたCSSを試したところ、画像のアスペクト比は指示通りになりましたが、画像がぼやけました。

 

また、最初に頂いたコードをfunctions.phpに書き込むと、最初の画像がぼやけますが、エントリー一覧は元の黄金比が維持されました。

 

そもそも、大きなカードとカテゴリーごとの組み合わせの問題だと思いますが、テーマ本体の改善を待つ方がいいのでしょうか。。

 

 


   
プー
 プー
(@プー)
Trusted Member
結合: 3年前
投稿: 70
 

@bucho さん

そうですか。こちらで試した限りはあのCSSで問題ないのですが。
最初のfunctions.phpも自分のサイトではずっと使っているものです。

キャッシュの削除は確実に行っていますか?
それでもダメでしたら残念ながら私の方ではわかりません。
テーマのアップデートを待つしかないでしょうね。


   
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

@プー 様

 

キャッシュは効いていない状態でテストしております。

特に、ファイヤーフォックスよりクロームの方がぼやけるような気がします。

 

プー様に頂いたコードは何度もどれも試しましたが、私の環境ではうまく反映されないようです。

申し訳ありません。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@yhira さん

早速、Cocoon バージョン:2.2.5 をダウンロードして、ローカルのテストサイトで試してみました。(WordPressバージョン:5.6環境)

「大きなカード(先頭のみ)」と

 

・一覧(デフォルト)
・タブ一覧
・カテゴリごと
・カテゴリごと(2カラム)
・カテゴリごと(3カラム)

 

の組み合わせで試してみました。

また、タブ一覧のタブを「新着記事」から、「カテゴリ」の3つのタブにも切り替えてみました。

 

先頭の画像がぼやけることがなくなり、アスペクト比も大きなカードのアスペクト比となり、本来の適正な表示になったような気がします。

 

できれば、複数の方に試していただけると、テーマ作者様もこころ強いのではないかと思われます。

This post was modified 2年前 2回 by リフィトリー

   
bucho
(@bucho)
Trusted Member Registered
結合: 4年前
投稿: 83
Topic starter  

わいひら 様

プー 様

リフィトリー 様

ろこ 様

 

こちらの件、最新のアップデートで対応してくださったと思いますので、解決できました。

 

コメント、アドバイス頂きまして、ありがとうございました。☺

 

 

 

 

 


   
共有:

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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