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

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

ショートコードで、"type=bord...
 
共有:
通知
すべてクリア

ショートコードで、"type=border_partition"のときのサムネイルのサイズを指定したい

7 投稿
3 ユーザー
4 Reactions
1,998 表示
(@Karol)
New Member
結合: 4年前
投稿: 1
Topic starter  

いつも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も追加できたら解決できると思っています。しかし、その方法が全く検討つかずです。。

 

不足の情報あれば教えて頂けますでしょうか。何卒宜しくお願いします。

 

 


   
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17184
 

そもそも、画像自体のサイズは希望サイズのファイルが読み込まれているのでしょうか。
ただ、いずれにせよサポート対象外のものにありますように、カスタマイズ指南はサポートの対象外とさせていただいているので、全てをサポートすることはできません(できたとしてもヒント程度)。
申し訳ないですが、あくまで独自カスタマイズは各自で行っていただく必要があります。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、Karol さん

おそらく、新着記事のショートコードも表示タイプによって、生成されるサムネイル画像のサイズが異なるのではないかと推測します。

 

詳しいことは、わいひらさんが書いてくださるかと思いますが、実際に表示されるサイズのサムネイル画像が生成されるように、設定し直さなくてはならないのかもしれません。

 

以下のページにカスタマイズのヒントが書いてあります。

 

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集

 

ただ、子テーマのfunctions.phpファイルを編集するので、編集を間違えると、画面が真っ白になってしまうこともあるらしいです。

 

ですので、FTPソフトは使えることが望ましいです。

 

生成されるサムネイル画像のサイズを変更して、プラグインを用いて、サムネイル画像を再生成するという感じになるのかと推測します。

 

私も数回しか経験がないので、間違っているかもしれません。

 

いきなり、運用サイトでテストではなく、ローカルのテストサイト等で、先ずお試しになるのがよいと思います。

 

あ、わいひらさんの書かれているように、このカスタマイズは、自己責任で、ということになります。

 

おそらく、サポート対象外なのだと思います。

This post was modified 4年前 3回 by リフィトリー

   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

Karol さん

実際のページを見ていないので、現況が何ともわかりませんが、Cocoonのフロントページタイプを利用すると表示タイプも選べますし、サポートも範囲内となると思われるので、オススメです。

 

Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法

 

Cocoon 2.1.6公開。フロントページに「タブ切替」や「カテゴリーごと表示」機能追加

 

簡単にサイト型のトップページが作れます。

 

フロントページタイプは、固定ページではなく、通常のブログのインデックスページを使います。

 


   
わいひら reacted
返信引用
(@Karol)
New Member
結合: 4年前
投稿: 1
 

皆様

 

早速のお返事ありがとうございます。大変助かりました。

先に、 リフィトリー 様に記載いただいた件がスバリ私向けだったので、こちらで作り直したいと思います。このサイト作成を開始したのがフロントページ機能が出る前だったので、固定ページとショートコードで作るしかないものと思ってしまっておりました…。(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の画像になってしまうのがどうしたものか、という質問でした。

 
色々、ありがとうございました。

   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

Karol さん

「カテゴリごと」表示でカード表示数を変更する場合はこちら】の文字をクリックすると、エントリーカードの表示数も変更できるようです。

 

小さな文字をクリックしないと、表示数の変更のところが出てこないので、ちょっと気づきにくいです。

 

あと、実際のURLを提示するのは、ちょっと、という場合もあるかもしれませんが、お問い合わせの際は、実際のURLのご提示があると、こうした方がいいかも的なアドバイスがもらえる可能性が高くなるかもしれません。

 

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17184
 

はい。imgタグに読まれている640とか752pxで表示されたら良いなと思っていました。そのサイズのサムネイルも実際に存在します。sizesオプションに240pxまでしか候補がないために、PCで開いたときも最大が240pxの画像になってしまうのがどうしたものか、という質問でした。

ソースコードを見た限りでは、画像幅が240pxの画像が読まれているようですよ。
そのサムネイルが生成されている(存在している)のと、imgの中で呼び出されているものは違うケースもあります。


   
返信引用
共有:

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

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

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

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

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

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

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

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