サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年4月1日 03:16
いつもお世話になっております。現在、simplicity2からcocoonに変更しています。
インデックスページに縦型カードを選択しているのですが、画像が汚くて困っています。
試しにRegenerate Thumbnailsのプラグインを入れて再生成したのですが、それでも汚いです。
simplicity2の時は汚くないんですが……。画像サイズもほぼ変わらないはずです。
なお、わたしのサイトはこちらです。 https://happystyle.me/
（Cocoonに変更しております。）添付ファイルは、simplicity2の時の画像です。
Topic starter
2018年4月1日 03:22
書くのを忘れてしまいましたが、すべてのプラグインを停止しましたが、画像は汚いままでした。
2018年4月1日 10:16
@komachi さん、こんにちは。
@komachi さんのブログを拝見させていただきました。
そのうえで、添付の Simplicity2 の時のサムネイルと比較してみました。
確かに画像上の文字がぼやけて見えるような気がします。
添付ファイルは左が @komachi さんが添付した Simplicity2 のもの、右は私が @komachi さんのブログを見て Cocoon のものをスクショしたものです。
私自身のサイトでは「エントリーカード」設定にしていて、試しに「縦型カード2列」にしてみましたが、 Cocoon を入れてからの記事が少ないのと、画像の上に文字が重なるアイキャッチ画像を使っていないので、その違いがわかりにくかったです。
私は Chrome でブラウジングをしているのですが、その拡張機能 Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn
という機能で @komachi さんのインデックスページをみてみますと
インデックスの画像は 339px x 190 px で表示されていることがわかります。
それに対し、使われている画像は 320x180 です。
これは 320x180 pix の画像を 339ｘ190 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
Topic starter
2018年4月1日 15:36
yuzakasotaさん、はじめまして！
コメントありがとうございます。おっしゃる通り、simplicity2では320pxでした。
わたしも画像に文字入れをしていなかったら、多分気がつきませんでした。
ただ、サムネイルを320に指定したとすると、表示はきれいだけれど、PC表示では、スペースがあまってしまう気がしています。
（参考までに、わたしはカラム幅を現在730px（今後728pxに変更する予定）にしているため、yuzakasotaさんの幅と違っています。）
今の 339ｘ190 pixのサムネイルか、それより大きいサムネイルを縮小表示している状態が欲しいです。
そこで、わいひら様に要望なのですが
- サムネイルをカラムに合わせたもの
- サムネイル画像を320pxをベースとするのではなく、800pxの人でよく使われる、376pxをベースとしたもの
にしていただくことは可能でしょうか？
2018年4月1日 23:11
Cocoonの場合、カラム幅を変更できるので、それに合わせて適切な画像サイズが変わります。
なので、仕様上いろいろと難しい部分があります。
ただ、今後Retinaディスプレイ対応させようと思っています。
その機能を用いて2倍のサイズのサムネイル（320の場合は640）を生成して、それを縮小化表示することで、対応させてみようかなと思います。
Topic starter
2018年4月1日 23:33
わいひら様、ご返信ありがとうございます。
カラム幅が可変なので難しいのかな？とは思っていましたが、やはり難しいんですね。
それで、320ではなくて、376にしてほしいなと思ったんですが、もっと解像度が大きくなるとのこと、承知しました。
Topic starter
2018年4月2日 00:01
参考までに、画像を320pxにする方法は、子テーマのcssに
.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
width: 320px;
}
を記載するとできます。
枠線を非表示にすれば（cocoon設定からできます）、画像が小さくなっているのがごまかせました。
参考までに、わたしのURLを貼っておきます。
カーソルを合わせると、画像が右寄りになっていて小さいのがわかります。
わたしは、カラム幅を狭くしているのでズレも目立たないのですが、800pxのままだとズレが目立つかもしれません。
2018年4月2日 00:25
376にしても、よりカラム幅を大きくする人がいた場合は、それに対応できません。
ベストは、カラム幅から最適なサムネイルサイズを算出するのが良いのかもしれませんが、これは実際やってみないと何ともいえない部分はあるかも。
2018年4月2日 08:16
こんにちは
便乗させていただきます
ただ、今後Retinaディスプレイ対応させようと思っています。
例えばテンプレート側で画像サイズをthumb320を500に変更した場合でもそれの対応は範囲内に入れば嬉しいです。※PC上でも500pxで一律表示が私的好みでベストかと思って実装中なので＾＾；
Retinaではどれだけボヤけて見えるのかや、通常2倍のところを1.?倍などに変更可能なのかも（1000px：640px幅の画像を持ってない時、最大サイズを表示とか？）できるか不明ですが、『万が一：もし』実装可能：実装しやすそう であれば、お願いしたいです。
Topic starter
2018年4月2日 09:55
しつこくて済みません。
返答を頂いて、600pxに将来的になるのなら、今のlargeサムネイル（わたしは728pxですが、わいひらさんの設定は800px）を使ってみようと思いました。
entry-card.phpをいじって、thumb320をlargeに変更してみたところ、スマホではきれいな画像が表示されるんですが、PCは画像が汚いままでした。
PCで画像が荒れないようにするには、どこの設定を変えればよいか教えていただけますか？
URLは先に記載した通りです。
Topic starter
2018年4月2日 09:57
ちなみに、わたしの場合、アイキャッチはほとんど同じ大きさ＝縦の長さ違いなどを考える必要はないため、largeで問題はありません。
問題は、PCでの表示の汚さです。
Topic starter
2018年4月2日 16:21
もう少し情報を足しますと、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のみ画像が汚いのは変わりませんでした。
Topic starter
2018年4月2日 16:41
すみません……。今Microsoft Edgeでみたら、画像がくっきりしていました。
どうも、Chrome特有の問題のようです。
https://aulta.co.jp/2017/08/11/3779.html
↑こちらのサイトさんの情報を参考に
img{ -webkit-backface-visibility: hidden; }
を入力してみたら、画像の表示が変わりました！
ただ、わたしのアイキャッチは文字が入りすぎてて、文字がガタガタですが……。
あとは、自分で解決策を探します。長々と書いてしまって済みませんでした。
2018年4月2日 18:55
komachiさん
Retina対応されたもので見てますか？backface-visibility: hidden;を入れても私の環境Retinaじゃない画面のChromeから見ても何一つ変わりません＞＜
Chromeでは画質が落ちるイメージでしたけど、Edgeも画像がキレイですね！
2018年4月2日 22:11
img{ -webkit-backface-visibility: hidden; }
これはとりあえずCocoonのCSSにも書き加えておきます。
2018年4月2日 22:15
とりあえずカラム幅に応じてサムネイルサイズをフレキシブルに生成できるバージョンを作ってみました。
https://github.com/yhira/cocoon/archive/master.zip
よかったら試してみていただけると幸いです。
適用後、Regenerate Thumbnailsプラグインでサムネイルの再生成が必要になります。
今回これがうまくいっていたら、当分Retina対応しないかもしれません。
専用の良いプラグインもあるくらいだし。
Topic starter
2018年4月3日 00:29
かうたっくさん、こんばんは！
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
せっかく対応していただいたのですが、スマホユーザーが圧倒的に多いので、どうするか悩みます……。
2018年4月3日 00:52
特におかしな感じには見えませんけど。
スマホエミュレーターで見ても特に返事は感じないですけど。
それに、今回のものと前回の320画像では、スマホ表示する上での仕様は変わってないと思います。
Topic starter
2018年4月3日 01:50
わいひらさま
見ていただいてありがとうございます。
スマホの方なのですが、わたしの比較対象がentry-card.phpをいじって、largeサムネイルを使ったときでした。
largeサムネイルを使うと、本文表示の時のアイキャッチと同じぐらいの解像度でくっきり表示されます。
これも、縦一列にしているせいなのですが、
ちょっとぼやけているサムネイルをクリック→本文表示でくっきりアイキャッチが表示される
とほぼ同じ大きさの画像の表示なのに、最初の画像がぼやけているのが気になってしまって。
（largeサムネイルを試していなければ、この違和感にはっきり気がつかなかったと思います。）
そのことについて、感想を述べました。
なので、インデックスページだけを見ている分には、おっしゃるとおりだと思います。
スマホの縦1列はわたしが勝手にやっていることなので、よけいなトラブルを増やしてしまって、本当にすみません。
Topic starter
2018年4月4日 14:15
追記です。
検討した結果、サムネイルの画像をカラム幅の2倍にしたら、スマホもかなりいい感じになりました。
どうやったかというと、lib/settingsのところで、可変幅を記載している関数→必要なサムネイルの大きさの2倍の数字を手打ちにするという超原始的な方法ですが……。
今はスマホの方がRetina（retinaもどき？）が多いと知りました。
親テーマを直接いじっているので、テーマ更新のたびにやらないといけませんが、一つぐらいならカンタンなので、ひとまずこれで対応しようと思います。
いろいろ対応していただき、本当にありがとうございました！
2018年4月4日 20:54
そんなに違うんですね。やっぱり2倍にして、Retina対応したほうがいいのかな…。
ただ、そうすると画像サイズが大きくなって、高速化と相反してしまうので、ここら辺で僕もすごく悩んでいます。
一応、高速化機能を謳ったテーマなので、高画質化で、高速化が損なわれるのは、どうかなぁ…とRetina機能の実装を思い悩んでいます。
ただ、2倍のサムネイル画像を設定するのであれば、Retinaプラグインを利用すると楽にできるかと思います。
http://techmemo.biz/wordpress/wp-retina-2x/
高画質化は、ここら辺のプラグインに任せた方が良いのかもと思ったり。
さくら reacted
Topic starter
2018年4月4日 23:55
わいひら様
ものすごく違うわけではないのですが、性格上、気になり始めると止まらなくなってしまって。
おっしゃる通り、画像が大きくなると高速化とは合わなくなってきます。
幸い、わたしは元画像（728px）を圧縮してブログにアップロードしているので、大丈夫だと踏んでやっていますが……。（728pxでだいたい50KBぐらいなので）
わいひら様が紹介してくれたプラグイン、すごく良さそうです。圧縮ができるのが一番いいです。
サムネイルの圧縮をしてくれって、Page Speed Insight（PCの方のみ）で言われて困ってたので。
もしかしたら、これで解決できるかな～と思いました。
お忙しい中、教えてくださりありがとうございます。
カスタマイズにはまりすぎて、ちょっと記事を書かないといけないので、すぐ試せないのですが、試したらこちらに感想を書きたいと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。