サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年7月25日 01:07
続けて質問で恐縮です。
２年ほど前の質問にもあったので読んだ上でやってみましたが実現しません。
やってみたいことはサイドバーの人気記事／新着記事の横に出るサムネイルを正方形にすることです。
次の記事／前の記事 の設定にはサムネイルにするというものが標準で備わっているのでその辺も見てみたのですが標準の設定ではできそうになかったので特別記述をして対応するものかと思いました。
Regenerate Thumbnail等のプラグインは使ったことがあるので使用が必要であれば使えます。
よろしくお願いします。
2020年7月25日 01:20
前略、Leo さん
Cocoonは、Cocoon設定で、サムネイルのアスペクト比を６種類から選択できるようになっています。
しかし、これは、サイトのサムネイル画像のほぼ全てに適用されます。
サイドバーの人気記事／新着記事の横に出るサムネイルを正方形にすることです。
ですので、サイドバーの人気記事、新着記事のサムネイルだけに限定して、アスペクト比を正方形に変更することはできない仕様だったと記憶しています。
わいひら reacted
2020年7月25日 01:25
Leo さん
テーマ全体のサムネイルのアスペクト比を変更する方法は、以下に書かれています。
マニュアルページでは、５種類ですが、今は、６種類になっているかと思います。
わいひら reacted
トピックスターター 2020年7月25日 01:40
お返事ありがとうございます。
全体が変わってしまうと記事一覧などのデザインも変わってしまうので「サイドバーにだけ」反映させたかったのです。やっぱり特別な記述での操作になりそうですね。。
2020年7月25日 01:46
@Leo さん
私は、試したことがないのですが、以下のような案内も、あります。
Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集
もしかしたら、この方法で、できるかもしれませんね。
もし、できたら、できましたよ、と、書きこんでいただけると、ありがたいです。
トピックスターター 2020年7月25日 03:11
ありがとうございます。
Cocoon設定をいろいろ触っていたら新たに問題が発生してしまいました。。
→新規で登録するサムネイルが小さいサイズになってしまい一覧でぼやけてしまう現象が起こってしまっています。投稿は頻繁に行っているわけではないのでどの段階の操作が原因かわかりにくくて困っています。。。
添付の通りサムネイルの高さが変わってしまうのでRegenerate Thumbnailなどいろいろ触っていますが困りました。
トピックスターター 2020年7月25日 03:13
すみません、右が小さいサムネイルが表示されてしまっている方です。
左は750x394、右は327x184のサイズの画像になっています。何が違うのか考えましたが、途中で一回Retinaに対応というのを設定したり外したりしたのだけ関係あるかなと想像していますがわかりません。
トピックスターター 2020年7月25日 07:43
いくつか検証してみました。
*アイキャッチ用は現状全て1200x630pxを利用するようにしています。
●「Retina対応にするON」でアイキャッチ設定すると654x368のサムネイルが一覧用に設定される。
→元画像が1200x630なので縦横比が違い、よこがカットされています。
→これはCocoon設定で9:16というデフォルトのサイズを指定していることが理由と思います。
→設定に1200x630と同じ比率の選択肢がないのでもしその設定があれば解決しそう？
●「Retina対応にするOFF」でやると327x184のサムネイルが設定される。
iMacで見る際の表示では750x394の解像度が実際なので後者だとサムネイルがボヤけてしまう。
iMacはRetinaディスプレイですのでONに設定していないとぼやけるのは当然と思いますが、一方で、
写真データサイズの面で気にしていたのでずっと設定OFFのまま使っていたので、
その状態でサムネイルが問題なく高解像度（750x394）で生成されていたのはなんでだろうか？と考えたのですが、
現時点では２列になる一覧ページにしていますが、前までは大きいサムネイルという設定にしていたのが関係するのかな？と思いました。２列の一覧に変更してから多分アイキャッチを変更したり新規投稿したのが初めてなので。
→現状だと、Retina対応ONで投稿→OFFに変更
という作業をすることで希望する通り、カードに付属するアイキャッチが750x394という画像になります。
この作業を毎回しないといけないとなるとちょっとしんどいので解決したいです。
2020年7月25日 08:29
@Leo さん
前述しましたとおり、私はサムネイルの生成について、詳しくないので、マニュアルを案内するぐらいしかできません。
Retina対応をするのであれば、Retina対応ON の状態で、以下の方法で最適化すれば良いような気もするのですが、私は、Retina対応 は１度も使ったことがないので、よくわかりません。
テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）
わいひらさん、もしくは、詳しい方が、何か書きこんでくださるかもしれません。
その場合でも、過去のトピックの経緯を見ておりますと、やはり、回答くださる方も、実際のサイトを見ながらの方が、わかりやすいです。
フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLをご提示いただき、高速化設定を無効にして、環境情報を貼り付けていただければと思います。
わいひら reacted
2020年7月25日 08:41
@Leo さん
それと、最初のご質問と、最後のご質問の内容が変わってきているようですが、その点についても、何かしらの、ご説明をいただいておいた方が良いかもしれません。
追記：
新たな問題が発生したので、そちらを先に解決したい、ということですね？
トピックスターター 2020年7月25日 18:04
新たな問題が発生したので、そちらを先に解決したい、ということですね？
お世話になります。
- 元の課題：サイドバーのサムネイルを正方形にすること
- 操作中に増えた課題：アイキャッチの出力方法が変わっている？
- 検証の結果わかったこと：以下
１）これはデフォルトの設定では対応できないとわかりました。
２）これはおっしゃる通りあらたな問題ですね。別トピックを立てた方が良いと思うので作ります。
３）大きなサムネイルの一覧と、カード型の一覧とではルールが違う様だとわかったのでデフォルトでは対応できなさそうです。
2020年7月25日 19:08
@Leo さん
トピックの途中にもリンクを貼り付けましたが、
https://wp-cocoon.com/community/postid/37421/
あまり、良く見ていただいていないようですので、もう一度リンクを貼って見ます。
Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集
私は、実際に試したことは、ありませんが、サムネイルのサイズやアスペクト比を、ご自身で、カスタマイズできそうな感じもするのですが・・
間違っていたら、ごめんなさい。
わいひら reacted
2020年8月3日 08:45
Internet Explorer 11 は、object-fit プロパティはサポートしていないようですので、別途対策が必要になってくるかと思われます。
わいひら reacted
2020年8月3日 18:20
ローカルのテストサイトで、サイドバーのサムネイルを正方形にしてみました。
以下のマニュアルページに書かれている方法で試してみました。
Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集
ただし、この方法は、子テーマの「functions.php」ファイルを書き換えるので、FTPソフトが使えない方は、ちょっと無理かもしれません。（書きこむ際にも必要ですし、トラブルが起きたときにもご自身で復旧できない可能性があります）
「functions.php」の記述を間違えると、サイトが真っ白になってしまうというトラブルになることもあるみたいですので・・
そこは、全て自己責任ということになります。
今回は、85px × 85pxで試してみました。
マニュアルページのとおりに、子テーマの「functions.php」に以下のコードを追記しました。
//新着・人気・関連記事ウィジェットサムネイルサイズ
add_image_size('widget_thumb', 85, 85, true);
add_filter('get_widget_entries_thumbnail_size', function (){
return 'widget_thumb';
});
「外観」→「テーマエディター」で「functions.php」を開いて追記しようとしてもできなかったので、ローカルなので、ローカルフォルダ内を辿って、直接子テーマの「functions.php」を開き、追記しました。（ということはFTPソフトでしか書きこめないのかもしれません）
その後、Regenerate Thumbnailsプラグインにて、サムネイルの再生成を行いました。
サイドバーの画像は、テーマのCSSで幅を指定してありますので、サムネイルのサイズを変更した場合には、このCSSの指定も変更（子テーマのCSS等で上書き）する必要が出てきます。
サムネイルの画像サイズを変更すると画像の幅も変わるので、それに伴って、画像の右側の文字のマージン等も変更する必要も出てきます。
画像サイズの変更によって、細かい見た目の調整が要るわけです。
ちょっと、適当に雑に書いてみると、以下の辺りなのですが、これは、画像サイズや、好みにもよるので、CSSのコードを子テーマ等で上書き変更する必要があるということの参考にしかならないかと思います。
.widget-entry-cards figure {
width: 85px;
}
.widget-entry-card-content {
margin-left: 100px;
}
私もローカルのテストサイトで試しただけですので、参考情報として書きこんでいます。
ですので、やってみたけど、トラブった、上手くいかない、等の書き込みをいただいても、対応できかねますので、その点はご容赦いただきますよう、お願いします。
この投稿は4年前ずつリフィトリーに変更されました
わいひら reacted
2020年8月4日 22:04
補足事項として、サムネイルの生成をphpのコードでで85pxで設定した場合には、85pxの幅のサムネイル画像が生成されるみたいです。
ですので、CSSの画像の幅の指定も同じ幅（同じ値）に指定する必要があります。
85pxのサイズで生成されたサムネイル画像を、CSSで120pxの幅で指定した場合は、ピンボケの画像として表示されてしまいます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。