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

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

縦型カードの画像が汚くなりました
 
共有:
通知
すべてクリア

縦型カードの画像が汚くなりました

23 投稿
4 ユーザー
2 Likes
3,161 表示
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

いつもお世話になっております。現在、simplicity2からcocoonに変更しています。

インデックスページに縦型カードを選択しているのですが、画像が汚くて困っています。

試しにRegenerate Thumbnailsのプラグインを入れて再生成したのですが、それでも汚いです。

simplicity2の時は汚くないんですが……。画像サイズもほぼ変わらないはずです。

なお、わたしのサイトはこちらです。 https://happystyle.me/

(Cocoonに変更しております。)添付ファイルは、simplicity2の時の画像です。


   
引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

書くのを忘れてしまいましたが、すべてのプラグインを停止しましたが、画像は汚いままでした。


   
返信引用
yuzakasota
(@yuzakasota)
Eminent Member Registered
結合: 5年前
投稿: 44
 

@komachi さん、こんにちは。

@komachi さんのブログを拝見させていただきました。
そのうえで、添付の Simplicity2 の時のサムネイルと比較してみました。

確かに画像上の文字がぼやけて見えるような気がします。

添付ファイルは左が @komachi さんが添付した Simplicity2 のもの、右は私が @komachi さんのブログを見て Cocoon のものをスクショしたものです。

私自身のサイトでは「エントリーカード」設定にしていて、試しに「縦型カード2列」にしてみましたが、 Cocoon を入れてからの記事が少ないのと、画像の上に文字が重なるアイキャッチ画像を使っていないので、その違いがわかりにくかったです。

私は Chrome でブラウジングをしているのですが、その拡張機能 Page Ruler

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

という機能で @komachi さんのインデックスページをみてみますと

https://happystyle.me/

インデックスの画像は 339px x 190 px で表示されていることがわかります。

それに対し、使われている画像は 320x180 です。

これは 320x180 pix の画像を 339x190 pix に拡大して表示させているのではないでしょうか?

私は @yhira さんの下記の記事を参考に、 Cocoon を導入してい以降の画像は横幅 800 pix に合わせて画像をアップしています。

https://wp-cocoon.com/wordpress-media-size/

それでも、「縦型カード2列」のインデックス表示にすると Page Ruler 上は 376x211 px で表示されています。
しかし、その画像を右クリックして保存すると 320x180 pix で保存されます。

つまり、私の環境でも同じ様に拡大処理された画像がインデックスページに使われているのだと思います。

ここから先は私も手が出せないのですが、インデックスページに表示される画像サイズが元の画像と同じ 320x180 で表示できれば画像はぼやけないのではないでしょうか?

@komachi さんには、もしよろしければ上記の拡張機能 Page Ruler を使ってみて、 Simplicity2 での「縦型カード」で使われている画像が拡大表示されていないか確認してみてはいかがでしょうか?


   
さくら reacted
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

yuzakasotaさん、はじめまして!

コメントありがとうございます。おっしゃる通り、simplicity2では320pxでした。

わたしも画像に文字入れをしていなかったら、多分気がつきませんでした。

ただ、サムネイルを320に指定したとすると、表示はきれいだけれど、PC表示では、スペースがあまってしまう気がしています。

(参考までに、わたしはカラム幅を現在730px(今後728pxに変更する予定)にしているため、yuzakasotaさんの幅と違っています。)

今の 339x190 pixのサムネイルか、それより大きいサムネイルを縮小表示している状態が欲しいです。

そこで、わいひら様に要望なのですが

  • サムネイルをカラムに合わせたもの
  • サムネイル画像を320pxをベースとするのではなく、800pxの人でよく使われる、376pxをベースとしたもの

にしていただくことは可能でしょうか?


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

Cocoonの場合、カラム幅を変更できるので、それに合わせて適切な画像サイズが変わります。
なので、仕様上いろいろと難しい部分があります。

ただ、今後Retinaディスプレイ対応させようと思っています。
その機能を用いて2倍のサイズのサムネイル(320の場合は640)を生成して、それを縮小化表示することで、対応させてみようかなと思います。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

わいひら様、ご返信ありがとうございます。

カラム幅が可変なので難しいのかな?とは思っていましたが、やはり難しいんですね。

それで、320ではなくて、376にしてほしいなと思ったんですが、もっと解像度が大きくなるとのこと、承知しました。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

参考までに、画像を320pxにする方法は、子テーマのcssに

.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
width: 320px;
}

を記載するとできます。

枠線を非表示にすれば(cocoon設定からできます)、画像が小さくなっているのがごまかせました。

参考までに、わたしのURLを貼っておきます。

https://happystyle.me/

カーソルを合わせると、画像が右寄りになっていて小さいのがわかります。

わたしは、カラム幅を狭くしているのでズレも目立たないのですが、800pxのままだとズレが目立つかもしれません。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

376にしても、よりカラム幅を大きくする人がいた場合は、それに対応できません。
ベストは、カラム幅から最適なサムネイルサイズを算出するのが良いのかもしれませんが、これは実際やってみないと何ともいえない部分はあるかも。

 


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

こんにちは

便乗させていただきます

ただ、今後Retinaディスプレイ対応させようと思っています。

例えばテンプレート側で画像サイズをthumb320を500に変更した場合でもそれの対応は範囲内に入れば嬉しいです。※PC上でも500pxで一律表示が私的好みでベストかと思って実装中なので^^;

Retinaではどれだけボヤけて見えるのかや、通常2倍のところを1.?倍などに変更可能なのかも(1000px:640px幅の画像を持ってない時、最大サイズを表示とか?)できるか不明ですが、『万が一:もし』実装可能:実装しやすそう であれば、お願いしたいです。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

しつこくて済みません。

返答を頂いて、600pxに将来的になるのなら、今のlargeサムネイル(わたしは728pxですが、わいひらさんの設定は800px)を使ってみようと思いました。

entry-card.phpをいじって、thumb320をlargeに変更してみたところ、スマホではきれいな画像が表示されるんですが、PCは画像が汚いままでした。

PCで画像が荒れないようにするには、どこの設定を変えればよいか教えていただけますか?

URLは先に記載した通りです。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

ちなみに、わたしの場合、アイキャッチはほとんど同じ大きさ=縦の長さ違いなどを考える必要はないため、largeで問題はありません。

問題は、PCでの表示の汚さです。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

もう少し情報を足しますと、PCでもスマホでもインデックスページの画像に対して「名前を付けて保存を選ぶと」同じファイル名を指します。

しかし、PCだけ表示が汚くなるという現象です。

これに遭遇してふと思ったのですが、最初の疑問だった「縦型画像の表示が汚い」のは引き延ばしもあるけれど、もう一つ原因があるのでは……?と思っています。

参考までに、わたしの環境です。

----------------------------------------------
Wordpressバージョン:4.9.4–ja
PHPバージョン:5.6.34か、7.0.x
(昔に変更したのですが、サーバー情報の表記が切り替わっていなくて5のままだったので、どちらか不明です。実際の設定場面では7.0と出ているので。今mixhostに問い合わせ中です。)
ブラウザ:PC:Google Chrome 65.0.3325.181(Official Build)
ブラウザ:Android:Google Chrome 65.0.3325.109
サーバーソフト:Apache
サーバープロトコル:SSH?(mixhostを使ってます)
----------------------------------------------
テーマ名:Cocoon
バージョン:0.3.9
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.3
----------------------------------------------

Autoptimize(有効化しているだけで、圧縮はしていません)
Category Order and Taxonomy Terms Order
Check Copy Contents(CCC)
Contact Form 7
Edit Author Slug
Font Awesome 4 Menus
Google XML Sitemaps
List category posts
Page Builder by SiteOrigin
Really Simple SSL
Redirection
Regenerate Thumbnails
Show IDs
SiteGuard WP Plugin
Table of Contents Plus
TinyMCE Advanced
Ultimate Category Excluder
WP Fastest Cache
WP Multibyte Patch
WP Post Branches

なお、プラグインはすべて停止してみましたが、PCのみ画像が汚いのは変わりませんでした。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

すみません……。今Microsoft Edgeでみたら、画像がくっきりしていました。

どうも、Chrome特有の問題のようです。

https://aulta.co.jp/2017/08/11/3779.html

↑こちらのサイトさんの情報を参考に

 img{ -webkit-backface-visibility: hidden; }

を入力してみたら、画像の表示が変わりました!

ただ、わたしのアイキャッチは文字が入りすぎてて、文字がガタガタですが……。

あとは、自分で解決策を探します。長々と書いてしまって済みませんでした。

 


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

komachiさん

Retina対応されたもので見てますか?backface-visibility: hidden;を入れても私の環境Retinaじゃない画面のChromeから見ても何一つ変わりません><

Chromeでは画質が落ちるイメージでしたけど、Edgeも画像がキレイですね!


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

img{ -webkit-backface-visibility: hidden; }

これはとりあえずCocoonのCSSにも書き加えておきます。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

とりあえずカラム幅に応じてサムネイルサイズをフレキシブルに生成できるバージョンを作ってみました。
https://github.com/yhira/cocoon/archive/master.zip
よかったら試してみていただけると幸いです。
適用後、Regenerate Thumbnailsプラグインでサムネイルの再生成が必要になります。

今回これがうまくいっていたら、当分Retina対応しないかもしれません。
専用の良いプラグインもあるくらいだし。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

かうたっくさん、こんばんは!

Retina対応かどうか調べてみたんですが、よくわかりませんでした。windows10にしたら、本当に探しにくくて(涙)

ちなみに、わたしのPCは↓です。

http://kakaku.com/item/J0000013839/spec/#tab

Microsoft Edge、すごく画像がきれいなんですよ~。昔はIEが汚くてChromeがきれいだったようなんですけど。

 

わいひらさん、ありがとうございます!

対応していただいて、ありがとうございます。

実際やってみたところ、Chromeでは

PC:良い感じです。設定はそのままにしておくので、ご覧になっていただければと思います。

スマホ:わたしの場合、縦1列にしているせいで、画像がぼやけます……。

縦2列のままなら画像が小さいこともあり、問題はなさそうでした。

縦1列の画像の横幅をcssで100%から341px(実際の画像幅)にしてみたりしたけれど、変わらず……。

使っているスマホはSH-RM02でretinaディスプレイではないみたいですが、おススメ画像モードは似た感じなのかもしれません。

http://www.sharp.co.jp/products/shrm02/display.html

せっかく対応していただいたのですが、スマホユーザーが圧倒的に多いので、どうするか悩みます……。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

URLを貼るのを忘れていました。すみません。

https://happystyle.me/


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

特におかしな感じには見えませんけど。
スマホエミュレーターで見ても特に返事は感じないですけど。

それに、今回のものと前回の320画像では、スマホ表示する上での仕様は変わってないと思います。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

わいひらさま

見ていただいてありがとうございます。

スマホの方なのですが、わたしの比較対象がentry-card.phpをいじって、largeサムネイルを使ったときでした。

largeサムネイルを使うと、本文表示の時のアイキャッチと同じぐらいの解像度でくっきり表示されます。

これも、縦一列にしているせいなのですが、

ちょっとぼやけているサムネイルをクリック→本文表示でくっきりアイキャッチが表示される

とほぼ同じ大きさの画像の表示なのに、最初の画像がぼやけているのが気になってしまって。

(largeサムネイルを試していなければ、この違和感にはっきり気がつかなかったと思います。)

そのことについて、感想を述べました。

なので、インデックスページだけを見ている分には、おっしゃるとおりだと思います。

スマホの縦1列はわたしが勝手にやっていることなので、よけいなトラブルを増やしてしまって、本当にすみません。


   
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

追記です。

検討した結果、サムネイルの画像をカラム幅の2倍にしたら、スマホもかなりいい感じになりました。

どうやったかというと、lib/settingsのところで、可変幅を記載している関数→必要なサムネイルの大きさの2倍の数字を手打ちにするという超原始的な方法ですが……。

今はスマホの方がRetina(retinaもどき?)が多いと知りました。

親テーマを直接いじっているので、テーマ更新のたびにやらないといけませんが、一つぐらいならカンタンなので、ひとまずこれで対応しようと思います。

いろいろ対応していただき、本当にありがとうございました!


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

そんなに違うんですね。やっぱり2倍にして、Retina対応したほうがいいのかな…。
ただ、そうすると画像サイズが大きくなって、高速化と相反してしまうので、ここら辺で僕もすごく悩んでいます。
一応、高速化機能を謳ったテーマなので、高画質化で、高速化が損なわれるのは、どうかなぁ…とRetina機能の実装を思い悩んでいます。

ただ、2倍のサムネイル画像を設定するのであれば、Retinaプラグインを利用すると楽にできるかと思います。
http://techmemo.biz/wordpress/wp-retina-2x/
高画質化は、ここら辺のプラグインに任せた方が良いのかもと思ったり。


   
さくら reacted
返信引用
さくら
(@komachi)
Trusted Member Registered
結合: 5年前
投稿: 59
Topic starter  

わいひら様

ものすごく違うわけではないのですが、性格上、気になり始めると止まらなくなってしまって。

おっしゃる通り、画像が大きくなると高速化とは合わなくなってきます。

幸い、わたしは元画像(728px)を圧縮してブログにアップロードしているので、大丈夫だと踏んでやっていますが……。(728pxでだいたい50KBぐらいなので)

わいひら様が紹介してくれたプラグイン、すごく良さそうです。圧縮ができるのが一番いいです。

サムネイルの圧縮をしてくれって、Page Speed Insight(PCの方のみ)で言われて困ってたので。

もしかしたら、これで解決できるかな~と思いました。

お忙しい中、教えてくださりありがとうございます。

カスタマイズにはまりすぎて、ちょっと記事を書かないといけないので、すぐ試せないのですが、試したらこちらに感想を書きたいと思います。


   
返信引用
共有:

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

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

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

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

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

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

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

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