特典機能について

新着記事のアイキャッチ画像のサイズ統一について | CSSカスタマイズ相談 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、10月25日から骨の手術のため数週間入院します。その際、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


yuki
 yuki
(@yuki)
ゲスト
結合: 3年前
投稿: 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)
メンバーサイト Admin
結合: 4年前
投稿: 12871
わいひら - Facebookわいひら - Twitter
 

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

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


yuki
 yuki
(@yuki)
ゲスト
結合: 3年前
投稿: 5
Topic starter  

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

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

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

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

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

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

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

yuki
 yuki
(@yuki)
ゲスト
結合: 3年前
投稿: 5
Topic starter  

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

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

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

height: 19vw;

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

 

そのまえに

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

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

https://gyazo.com/d46ce08e922404492a22a58294d83fae

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

https://gyazo.com/3c519ff41bd0c18cc4751665806b48c4

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

 

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

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12871
わいひら - Facebookわいひら - Twitter
 

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12871
わいひら - Facebookわいひら - Twitter
 

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


yuki
 yuki
(@yuki)
ゲスト
結合: 3年前
投稿: 5
Topic starter  

かうたっくさん

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12871
わいひら - Facebookわいひら - Twitter
 

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

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

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12871
わいひら - Facebookわいひら - Twitter
 

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

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

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

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

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

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

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

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

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

 

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

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

 

yukiさん。

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


yuki
 yuki
(@yuki)
ゲスト
結合: 3年前
投稿: 5
Topic starter  

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

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

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

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


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

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

 

 関係ないですが、

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

#post-12623

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

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

https://gyazo.com/53fa617d320b8fa81c635925ea40a271

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

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

https://gyazo.com/36ec2b445abbb11508ff9ce628003b0b

****

yukiさんに。

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

お疲れさまでした。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12871
わいひら - Facebookわいひら - Twitter
 

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


共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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