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

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

投稿ページのサムネイル画像について
 
共有:
通知
すべてクリア

投稿ページのサムネイル画像について

8 投稿
2 ユーザー
2 Reactions
1,586 表示
 IINO
(@IINO)
New Member
結合: 4年前
投稿: 4
Topic starter  

こんにちは。

投稿ページのサムネイル画像が特に設定をいじっていないのに今までの縦長から横長に変わってしまいました。

http://office-lelion.com/blog/

 

もし原因や修正すべき箇所がありましたらご教示いただけると幸いです。

よろしくお願いします。


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

前略、IINO さん

アイキャッチに設定した画像がサムネイルとして表示されますが、アイキャッチに設定した画像のアスペクト比では、表示されない仕様のようです。

 

基本的には、サムネイルのアスペクト比は、固定のようです。

 

ですので、横長に表示されるている方が正常の状態かと思われます。

 

参考の過去のトピックのリンクを貼ってみます。

トップページのアイキャッチ画像が切れているものがある&パソコンでの表示だと画像がぼやける

 

なお、独自にカスタマイズされている場合には、そちらの影響もあるかもしれません。


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

前略、IINO さん

Cocoon設定の「インデックス」タブの設定で、インデックスカードのカードタイプを変更することができます。

 

以前テストで、「カードタイプ2列」にしたら、サムネイルがトリミングされずに表示されました。

 

「大きなカード」は試したことがないのですが、もしかしたら、トリミングされずに表示されるかもしれません。

 

なかなか、ご希望どおり、とはいかないかもしれませんが、試してみてください。

 

なお、アスペクト比が不揃いのサムネイルを、同じアスペクト比に揃えるのは、以下のリンクが参考になるかと思います。

テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)

 

カードタイプの変更は、以下の画像のところです。

 


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

IINO さん

プラグインの Regenerate Thumbnails でサムネイルを再生成すると、カルーセルに表示されている縦長のサムネイルも同じ高さの横長のサムネイルになってしまうかもしれません。

 

Cocoonのサムネイルは、基本的に正方形、もしくは、横長の長方形なので、アスペクト比を決めて、選んだ後は、アスペクト比に合わせたアイキャッチ画像を設定するのが良いのではないかと思います。

 

なので、写真撮影時から、サムネイルのアスペクト比を考慮して撮影した方が、スムーズと言えばスムーズかな、と思います。


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

IINO さん

テストサイトで、インデックスカードのカードタイプを「大きなカード」にしてみたら、トリミングされないっぽいような気がします。

 

これじゃあ、画像が大きすぎる、という場合は、やっぱり、「カードタイプ2列」あたりでしょうか?


   
返信引用
 IINO
(@IINO)
New Member
結合: 4年前
投稿: 4
Topic starter  

皆様ありがとうございます。

一先ずトップをカードタイプ2列にしたところ、縦長表示されました。

 

しかし、トップのスライダーはまだ該当の写真は横長で表示されてしまっているので、

今後は横長もしくは正方形などサムネの形は決めて行ったほうがいいんですかね...

 

 


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

@IINO さん

今後、該当ブログをどのように構成していくかにもよるかとは、思いますが、例えば、サイドバーウィジェットは、「最近の投稿」を現在お使いのようですが、「新着記事」や「人気記事」ウィジェットを使えば、サムネイルの入った記事のリストになります。

 

その時にも、デフォルトのアスペクト比、もしくは、6種類のアスペクト比の中から自分が選択したアスペクト比で表示されるかと思われます。

 

ワインボトルの画像が多くなることを想定すれば、正方形を選択することも意味がなくはないかと思います。

 

そもそも、サムネイルのアスペクト比が6種類の中から選べること自体が、ありがたいことだと思います。

テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法

(マニュアルページでは、5種類になっていますが、現在は6種類かと思います)


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

@IINO さん

余談ですが、「MS PGothic」はWindowsでは文字がとても細く、読みにくいので、メイリオあたりにしておいた方が無難です。

 

Cocoon設定の、「全体」タブで、サイトフォントが選べるかと思います。私は、デフォルトが無難なような気がします。

 

以下参考ページです。

2020年に最適なfont-familyの書き方


   
返信引用
共有:

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

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

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

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

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

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

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

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