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

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

トップページの記事にあるサムネイル画像...
 
共有:
通知
すべてクリア

[解決済] トップページの記事にあるサムネイル画像が見切れてしまうことについて

6 投稿
2 ユーザー
4 Reactions
26 表示
mono777
(@mono777)
Active Member Registered
結合: 11時間前
投稿: 4
トピックスターター  

いつもCocoonテーマを使わせていただいております。ありがとうございます。

ブログサイト運営でCocoonテーマ使用時、トップページの記事にあるサムネイル画像がどう頑張っても見切れてしまうことについて質問があり、ご連絡させていただきます。

 

★相談内容(質問内容)

現在、個人のブログサイトでCocoonテーマを利用しているものです。

フロントページタイプをタブ一覧と設定しているのですが、トップページに表示される記事のサムネイル画像が見切れてしまうことに悩んでおります。ご教示をいただきたいです。

 

★対象サイトURL https://constellation-of-art.com/

 

★解決のために試したこと

▼以下、貴サイトによる対策方法

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集」

URL https://wp-cocoon.com/thumbnail-size-custom/

「テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)」

URL https://wp-cocoon.com/regenerate-thumbnails/

 

▼テーマファイルエディタのCSSに以下のコードを追記

/*サムネを自動調整するために必要なコード*/

.blogcard-thumbnail img, .card-thumb img {

   aspect-ratio: var(--card-ratio);

   object-fit: contain;

}

補足

記事のブロックに枠線は設置しております。

(以前、枠線を入れることで直るという別記事を見かけまして

 URL: https://pcf-money.com/thumbnail-cut/?form=MG0AV3&form=MG0AV3)

また、カラムでのコンテンツ幅設定を変更するとうまくいくことがたまにありますが、新規にアップロードした画像には、上記のfunctions.phpCSSなどのコードは反応してくれません。

・添付画像の補足

添付した画像ですが、新規でWordPress「メディア」にアップロードして設定した場合のサムネイル画像です。

サムネイルがうまく枠内に自動調整されず、見切れています。

成功例は、下記、私のサイトURLの『絵本『くみたて』田中達也|日用品を見たら、何を思い浮かべますか?|あらすじ・感想をレビュー』という記事のサムネイルです。

成功例ではきちんとサムネイル内に画像がおさまるように自動調整されていますが、新規でアップロードした画像には適用されません。

 

長くなってしまい申し訳ございません。

本当に困ってしまっているので、よろしければご回答のほど、どうぞよろしくお願いいたします。

 

以下、改めて私のブログサイトURLなどです。

サイトURL https://constellation-of-art.com/

 

★環境情報

----------------------------------------------
サイト名:芸術の星座
サイトURL: https://constellation-of-art.com
ホームURL: https://constellation-of-art.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.7.2
PHPバージョン:8.2.22
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.5.1
カテゴリー数:9
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:1961 バイト
functions.phpサイズ:2763 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2025/02/be81205d635ab7118bc76eca4fff3ff5-2.png
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
All in One SEO 4.8.0
Contact Form 7 6.0.5
Health Check & Troubleshooting 1.7.1
PDF Embedder 4.9.0
reCaptcha by BestWebSoft 1.80
Regenerate Thumbnails 3.1.6
Rich Table of Contents 1.4.0
SiteGuard WP Plugin 1.7.8
UpdraftPlus - Backup/Restore 1.25.2
WP Multibyte Patch 2.9
----------------------------------------------


   
mono777
(@mono777)
Active Member Registered
結合: 11時間前
投稿: 4
トピックスターター  

★追記です

テーマファイルエディターCocoon Child: functions.phpに入力しているもの

//インデックスエントリーカードサムネイルサイズ
add_image_size('index_thumb', 320, 168, true);
add_filter('get_entry_card_thumbnail_size', function (){
return 'index_thumb';
});

//カルーセルカードサムネイルサイズ
add_image_size('carousel_thumb', 320, 168, true);
add_filter('get_carousel_entry_card_thumbnail_size', function (){
return 'carousel_thumb';
});

//関連記事カードサムネイルサイズ
add_image_size('related_thumb', 320, 168, true);
add_filter('get_related_entry_card_thumbnail_size', function (){
return 'related_thumb';
});

//内部ブログカードサムネイルサイズ
add_image_size('internal_blogcard_thumb', 160, 84, true);
add_filter('get_internal_blogcard_thumbnail_size', function (){
return 'internal_blogcard_thumb';
});

//新着記事ウィジェットサムネイルサイズ
add_image_size('new_entries_thumb', 120, 63, true);
add_filter('get_new_entries_thumbnail_size', function (){
return 'new_entries_thumb';
});

//人気記事ウィジェットサムネイルサイズ
add_image_size('popular_entries_thumb', 120, 63, true);
add_filter('get_popular_entries_thumbnail_size', function (){
return 'popular_entries_thumb';
});

//関連記事ウィジェットサムネイルサイズ
add_image_size('related_entries_thumb', 120, 63, true);
add_filter('get_related_entries_thumbnail_size', function (){
return 'related_entries_thumb';
});

//ページ送りナビサムネイルサイズ
add_image_size('post_navi_thumb', 120, 63, true);
add_filter('get_post_navi_thumbnail_size', function (){
return 'post_navi_thumb';
});

と入力しています。

引き続き、ご回答よろしくお願いいたします。


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

@mono777 さんへ。

上記functions.phpのコード設定が一部誤っています。

add_image_size('post_navi_thumb', 120, 63, false);
add_filter('get_post_navi_thumbnail_size', function (){
return 'post_navi_thumb';
});

上記は一例ですが、とりあえず「true」になっている部分をすべて「false」(赤字箇所)に修正した上でサムネイルを再生成してみてはいかがでしょうか。

 

詳しい解説は以下のとおりで、もともと「画像の比を維持したまま縮小する」設定だったのを「画像を指定した大きさにクロップする(切り抜く)」ように変更していたのですから、動作としては極めて正常なものとなっています。

 

※なお、こちらの記事で true 設定のコードが書かれているのはデザイン面で統一感を出すなどが理由で、 @mono777 さんのようなご利用は想定していなかったと思われます。

 


 

参考までに、「うまくいっていない」とされる記事の場合、上記記載により、以下のような画像が自動生成されてしまっており、HTMLソース上から参照されるようになっております。

▼NGと思われる記事の例

▼OKと思われる記事の例

添付のとおり、HTMLソースなどを見る習慣を付けていただくと、問題の特定が一段と早くなるかと思います。

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

   
mono777 reacted
mono777
(@mono777)
Active Member Registered
結合: 11時間前
投稿: 4
トピックスターター  

@Y.INABA 様

完璧で大変丁寧なご回答ありがとうございます。

mono777です。

 

いただいたアドバイスをもとにコードを修正した結果、無事、直りました。

control+shift+Iでいつもコードを見ているのですが、今度からはcontrol+UでHTMLソースをしっかり見ようと思います。

 

CSSなどのコード系はまだ勉強し始めたばかりでまだ全然足りていない部分があり、今後のためにも追加でお聞きしたいのですが、よろしいでしょうか。

「もともと『画像の比を維持したまま縮小する』設定だった」という部分が引っかかりまして、私が試したCocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集」の記事に書かれていたコードをfunctions.phpに付け足さなければ、「画像の比を維持したまま縮小する」設定に戻るということなのでしょうか。

そして戻る場合、上記のコードが「デザイン面で統一感を出すなどが理由」とのことですが、それでは「false」とせず、入力していたfunctions.phpのコードを削除し、Regenerate Thumbnailsプラグインでサムネイル画像の再生成のみを行えば、できていたという認識で合っていますか?

 

面倒な言い回しになってしまい、申し訳ございません。

改めて、ご回答ありがとうございます。

お手数をおかけいたしますが、よろしければ追加の質問もよろしくお願いいたします。


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

@mono777 さんへ。

ご確認ありがとうございました。
無事に解決できたようで何よりです。

 

投稿者:: @mono777

「もともと『画像の比を維持したまま縮小する』設定だった」という部分が引っかかりまして、私が試したCocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集」の記事に書かれていたコードをfunctions.phpに付け足さなければ、「画像の比を維持したまま縮小する」設定に戻るということなのでしょうか。

そして戻る場合、上記のコードが「デザイン面で統一感を出すなどが理由」とのことですが、それでは「false」とせず、入力していたfunctions.phpのコードを削除し、Regenerate Thumbnailsプラグインでサムネイル画像の再生成のみを行えば、できていたという認識で合っていますか?

そもそもfunctions.phpにコードを付け足さなければ、追加のサムネイル自体が自動生成されることはありません。なので、@mono777 さんのご認識は半分正しく半分誤っていると言えます。

WordPressにおいては、該当サイズの画像が見つからなければ、今回のように大きな画像を自動縮小してページ内に貼り付けるというような動作をします。一見正しく表示されるように見えますが、大きなサイズの画像をたくさん読み込むことになるのですね。そのため、このままですと読み込み速度の低下を招きます。

そういった意味で、追加でサムネイル画像を作成するようにするというのは、高速化という観点からすると極めて健全だと思います。

 

そして、add_image_size 関数においてはデフォルト設定が「画像の比を維持したまま縮小する」(つまり false)になっています。trueもfalseもなければfalseに自動設定されるのですね。そのためあのような表現となりました。

こちらこそ言葉足らずで失礼いたしました。

 

他に問題無ければ「解決済み」をクリックいただけますと幸いです。

 

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

   
mono777 reacted
mono777
(@mono777)
Active Member Registered
結合: 11時間前
投稿: 4
トピックスターター  

@Y.INABA 様

何度もご回答いただき、誠にありがとうございます。

 

とてもわかりやすいご解説、感謝申し上げます。

しっかり理解することができました。

 

また何かわからないことが出てきましたら、フォーラムでご質問させていただきますので、よろしくお願いいたします。

この度は、本当にありがとうございました。「解決済み」にいたします。


   
Y.INABA reacted
共有:

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

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

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

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

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

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

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

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