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

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

新着記事のアイキャッチ画像のサイズ統一...
 
共有:
通知
すべてクリア

[解決済] 新着記事のアイキャッチ画像のサイズ統一について

15 投稿
3 ユーザー
3 Reactions
14.8 K 表示
 yuki
(@yuki)
Active Member
結合: 6年前
投稿: 5
Topic starter  

お世話になります。
私はWordPressを最近使い始めて、現在Cocoonをカスタマイズをしている最中です。
過去のカスタマイズ相談にも同様の質問がありましたが、未解決の状態だったので
新たに相談させていただこうと思いました。

記事のアイキャッチ画像を全て同じサイズに統一したいと考えています。
今は、画像のサイズがばらばらで見た目が悪い状態です。
(以前アメブロを利用していた為、一度FC2ブログへ引越し、
その後WordPressへ引越しした経緯があります。)

自分なりに調べた結果「Regenerate Thumbnails」というプラグインで
解決しそうでしたが実行しても解決しませんでした。
元々記事をアップしていた際(アメブロ時)に画像のサイズが小さかったからだと
推測します。
拡大縮小してもいいので全てのアイキャッチサイズを一括で揃えること不可能でしょうか?記事数が約300程あるので、一つ一つだとかなりの労力になります・・・。

一番最新のいちごの記事のサイズに全て統一したいです。

----------------------------------------------
サイト名:trip + and more…
サイトURL: https://iamyuki.site 
ホームURL: https://iamyuki.site 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.0.3
PHPバージョン:7.1.5
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.6.0
カテゴリ数:48
タグ数:1
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
----------------------------------------------
Gutenberg:1
ホームイメージ: https://www.iamyuki.site/andmore/wp-content/themes/cocoon-master/screenshot.jpg 
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Add From Server 3.3.3
Auto Post Thumbnail 3.4.1
Category Order and Taxonomy Terms Order 1.5.5
Classic Editor 1.4
Contact Form 7 5.1.1
External image replace 1.0.8
Movable Type and TypePad Importer 0.4
Regenerate Thumbnails 3.1.0
Search Regex 1.4.16
Ultimate Google Analytics 1.6.0
----------------------------------------------

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

自分なりに調べた結果「Regenerate Thumbnails」というプラグインで
解決しそうでしたが実行しても解決しませんでした。

見たところ、「Regenerate Thumbnails」が実行されているようには見えません。
どのような記事を参考にして、実行されましたか?
そのURLを貼り付けていただければと思います。


   
 yuki
(@yuki)
Active Member
結合: 6年前
投稿: 5
Topic starter  

わいひらさん
ご返信いただき感謝します、ありがとうございます。

参考にしたサイトはこちらです( https://haniwaman.com/regenerate-thumbnails/
他にも検索したところ、記事にされている方がいらっしゃったので目を通しましたが同じような内容でした。

現在メディアの設定は添付ファイルのようになっています。
高さは0にすれば横幅に合わせて可変するとどこかで見たのでそのようにしています。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

私もアイキャッチのリサイズが正常に実行されたようにはみえません。

.card-thumb img {
	object-fit: contain;
	height: 19vw;
}

とりあえず上記でうまく表示できませんか?※数値は適当に見繕っただけです。

※PC・Chromeデベロッパーツールでチェックしてますが、今こちらの環境では不具合があるかもしれない状況です。

CSSの件はチェックしてダメであれば、他の人に見てもらってくださいね。

This post was modified 6年前 by かうたっく

   
 yuki
(@yuki)
Active Member
結合: 6年前
投稿: 5
Topic starter  

かうたっくさん
ご返信いただき感謝します、ありがとうございます。

ご教授いただいた通りCSSへ上記内容を追記したところ、アイキャッチ画像のサイズは思う通り小さくなりました!ありがとうございます。ただ、不具合が出てしまいました。

ページを可変すると添付ファイルのように、カテゴリーがずれてしまいます。追記前は画像に合わせて可変していました。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

@media screen and (min-width: 769px) {}の間に入れたら、PCビューでは問題ないっぽいですね。

ただタブレットビューでは

height: 19vw;

の19の数値の変更が必要かもしれません。またスマホビューになるとさらに数値の変更が必要なのかもですね。

 

そのまえに

私もアイキャッチのリサイズが正常に実行されたようにはみえません。

アイキャッチが300px以上であれば、一覧ページはそのようにならないんですよね。

https://gyazo.com/d46ce08e922404492a22a58294d83fae

私は数ページ確認しましたが、300px以上のアイキャッチを利用していれば問題ない状況です

https://gyazo.com/3c519ff41bd0c18cc4751665806b48c4

記事内画像を利用されている場合は、全画像の再生成を行ってみるほうが良いかもしれませんね。

 

一度そちらをお試しください。

拡大縮小してもいいので全てのアイキャッチサイズを一括で揃えること不可能でしょうか?記事数が約300程あるので、一つ一つだとかなりの労力になります・・・。

その後必要であれば、タブレット・スマホビューにある数値を試してみると良いかもです❦


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

根本的に解決するには、どうしてもRegenerate Thumbnailsの適用は必要になると思いますね
Regenerate Thumbnailsは上の方のボタンで実行するとどうなりますか?


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

それでもうまくいかない場合は、Cocoon設定「画像」タブにある「全体画像設定」の設定はどうなっていますか?
キャプチャをいただければと思います。


   
 yuki
(@yuki)
Active Member
結合: 6年前
投稿: 5
Topic starter  

かうたっくさん

全ての画像を再生成することは気が遠くなりそうなので避けたいです。
せっかく細かく教えてくださったのに申し訳ありません。

わいひらさん
Regenerate Thumbnailsの上のボタンで実行しましたが変化ありません。
添付ファイルにて画像サイズお知らせいたします。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

全ての画像を再生成することは気が遠くなりそうなので避けたいです。

かうたっくさんが書かれたことは、僕が書いた「上のボタン」で実行する方法と同じ意味かと思います。

添付ファイルにて画像サイズお知らせいたします。

やはりRetinaディスプレイ対応になっているのが原因のようです。

Retinaディスプレイ対応のチェックを外して、もう一度Regenerate Thumbnailsを実行してください。

通常横幅320pxあればRegenerate Thumbnailsが実行できるのですが、Retinaディスプレイ対応になっていると2倍の画像サイズが必要なので、横幅640px以上の画像が必要になります。
そのせいで、サムネイルの再生成ができないのだと思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

詳しくは以下の「注意点」を参照してください。

テーマのサムネイルをRetinaディスプレイ対応させる方法 | Cocoon
https://wp-cocoon.com/retina-thumbnail/

アイキャッチ画像が小さいとRetina対応画像が生成出来ません

その他にも、アイキャッチで指定されている画像サイズが、Retina対応できる分のサイズ(サムネイル画像サイズの2倍)がない場合は、Regenerate Thumbnailsで新しいアイキャッチが作成されません。

アイキャッチには、できる限り大きな画像を設定してください。
Cocoonデフォルト設定状態でも、最低でも800×800px以上。できれば1024×1024px以上は欲しい。そして可能ならば出来る限り限り大きなサイズのアイキャッチを指定しておくことをおすすめします。

今後のことも考えた場合、アイキャッチは1280×1280px以上を推奨します。
この記事の設定を行ったのに、画像がRetinaサイズにならない場合は、対象ページに大きな画像のアイキャッチを用意して再設定してください。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

全ての画像を再生成することは気が遠くなりそうなので避けたいです。
せっかく細かく教えてくださったのに申し訳ありません。

わいひらさん
Regenerate Thumbnailsの上のボタンで実行しましたが変化ありません。

yukiさん。全画像の再生成はされているようですよ。

避けたいのであれば、強制はもちろんしませんが。

かうたっくさんが書かれたことは、僕が書いた「上のボタン」で実行する方法と同じ意味かと思います。

わいひらさんのおっしゃる通りです。

 

やはりRetinaディスプレイ対応になっているのが原因のようです。

それが原因だったんですね。画像がどう見ても300px以上なのに…とおもってたんですが、なるほど!です。

 

yukiさん。

一般ピーポーが口を出して、嫌な思いをさせてしまったようで、申し訳ないです


   
 yuki
(@yuki)
Active Member
結合: 6年前
投稿: 5
Topic starter  

かうたっくさん
まったく嫌な思いはしていません!他の質問にたくさん回答されていて尊敬の意です。
同じ意味だと理解できずに返答してしまいました;;
むしろこちらの読解力がなく申し訳ございません。

わいひらさん
ご教授いただいたとおりしたところ全てできました!
自分でチェックをつけたのかどうかも覚えておらず、おまけに過去の投稿にもあったのですね、気づかずお手を煩わせました。本当にありがとうございました。

なぜか前の投稿時に返信が反映せず、三度同じ内容を投稿してしまいました。
紛らわしくてすみません、削除可能であればお願いいたします。

二日にわたりご教授いただきまして本当にありがとうございました。


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

無事再生成ができたようで、何よりです!

 

 関係ないですが、

凄いキャッシュが効いているのか、もしくは時間が狂ったのせいなのか?
こちらのCookieを切れば良さそう問題なのか。

#post-12623

ログイン状態:『2019年2月17日 12:07』

以降、書き込みなしに見える

https://gyazo.com/53fa617d320b8fa81c635925ea40a271

ログアウト状態:日時は正確っぽい、『2019年2月17日 20:38』

次のわいひらさんの書き込みが見える

https://gyazo.com/36ec2b445abbb11508ff9ce628003b0b

****

yukiさんに。

デベロッパーツール不具合がおかげで判明しました。CSSのご確認ありがとうございました❦

お疲れさまでした。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

うまくいったようでよかったです。
重複した投稿は削除しておきました。


   
共有:

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

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

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

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

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

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

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

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