サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年1月19日 18:01
いつもCocoonには大変お世話になっております。
表題の通り「ショートコード[new_list]で、"type=border_partition"のときのサムネイルのサイズを指定したい」という質問です。
現在、トップページを固定ページとしておりそこで新規記事を[new_list]を使って表示しています。左側に表示されるサムネイルを大きくしたいと思い、CSSを使って大きくした結果、小さいサイズの画像が引き伸ばされる形となり、画像がぼやけてしまいます。
CSSは例えば、以下で拡大しています。
.new-entry-card-thumb {
max-width: 60%;
}
自分なりに調べた結果、予想としては「<img>タグの中にある、"sizes"または"data-sizes"(違いが分からず…)に記述を追加すれば期待どおりに動くだろう」と考えています。
まず、 以下が[new_list]の<img>タグの抜粋です。
<img width="240" height="135" alt="" loading="lazy" data-srcset="<画像ファイル名>-240x135.png 240w, <画像ファイル名>320x180.png 320w, <画像ファイル名>-640x360.png 640w, <画像ファイル名>-752x423.png 752w" data-src="<画像ファイル名>-240x135.png" data-sizes="(max-width: 240px) 100vw, 240px" class="attachment-thumb120 size-thumb120 wp-post-image lazyloaded" src="<画像ファイル名>-240x135.png" sizes="(max-width: 240px) 100vw, 240px" srcset="<画像ファイル名>-240x135.png 240w, <画像ファイル名>-320x180.png 320w, <画像ファイル名>-640x360.png 640w, <画像ファイル名>-752x423.png 752w">
この中の、"sizes"または"data-sizes"が、"(max-width: 240px) 100vw, 240px"となり、240pxまでしかありません。なので、画像を大きくしても結局240pxまでの画像しか選択されないのかと思います。なので、ここのsizes、data-sizeに、320, 640, 752も追加できたら解決できると思っています。しかし、その方法が全く検討つかずです。。
不足の情報あれば教えて頂けますでしょうか。何卒宜しくお願いします。
2021年1月19日 19:18
そもそも、画像自体のサイズは希望サイズのファイルが読み込まれているのでしょうか。
ただ、いずれにせよサポート対象外のものにありますように、カスタマイズ指南はサポートの対象外とさせていただいているので、全てをサポートすることはできません(できたとしてもヒント程度)。
申し訳ないですが、あくまで独自カスタマイズは各自で行っていただく必要があります。
2021年1月19日 19:26
前略、Karol さん
おそらく、新着記事のショートコードも表示タイプによって、生成されるサムネイル画像のサイズが異なるのではないかと推測します。
詳しいことは、わいひらさんが書いてくださるかと思いますが、実際に表示されるサイズのサムネイル画像が生成されるように、設定し直さなくてはならないのかもしれません。
以下のページにカスタマイズのヒントが書いてあります。
Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集
ただ、子テーマのfunctions.phpファイルを編集するので、編集を間違えると、画面が真っ白になってしまうこともあるらしいです。
ですので、FTPソフトは使えることが望ましいです。
生成されるサムネイル画像のサイズを変更して、プラグインを用いて、サムネイル画像を再生成するという感じになるのかと推測します。
私も数回しか経験がないので、間違っているかもしれません。
いきなり、運用サイトでテストではなく、ローカルのテストサイト等で、先ずお試しになるのがよいと思います。
あ、わいひらさんの書かれているように、このカスタマイズは、自己責任で、ということになります。
おそらく、サポート対象外なのだと思います。
This post was modified 4年前 3回 by リフィトリー
わいひら reacted
2021年1月19日 19:54
Karol さん
実際のページを見ていないので、現況が何ともわかりませんが、Cocoonのフロントページタイプを利用すると表示タイプも選べますし、サポートも範囲内となると思われるので、オススメです。
Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法
Cocoon 2.1.6公開。フロントページに「タブ切替」や「カテゴリーごと表示」機能追加
簡単にサイト型のトップページが作れます。
フロントページタイプは、固定ページではなく、通常のブログのインデックスページを使います。
わいひら reacted
2021年1月19日 20:45
皆様
早速のお返事ありがとうございます。大変助かりました。
先に、 リフィトリー 様に記載いただいた件がスバリ私向けだったので、こちらで作り直したいと思います。このサイト作成を開始したのがフロントページ機能が出る前だったので、固定ページとショートコードで作るしかないものと思ってしまっておりました…。(6ヶ月ほど寝かせて最近再開しました)
URL掲載しておらず申し訳有りません。念の為、掲載しておきます。
ただ既に質問時から色々更新を加えているので、質問時の固定ページのURLを掲載します。こちらはもう更新しないで、新しい機能で行おうと思います。
https://mtgfans.com/%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8
一応ご質問へ回答させて下さい。
> そもそも、画像自体のサイズは希望サイズのファイルが読み込まれているのでしょうか。
はい。imgタグに読まれている640とか752pxで表示されたら良いなと思っていました。そのサイズのサムネイルも実際に存在します。sizesオプションに240pxまでしか候補がないために、PCで開いたときも最大が240pxの画像になってしまうのがどうしたものか、という質問でした。
色々、ありがとうございました。
リフィトリー reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。