サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年3月12日 15:24
いつもありがたく勉強させていただいております。
現在、トップページにカルーセル・インデックス・ウィジェット（人気記事）でそれぞれサムネイルを表示しているのですが、表示の設定を統一できないかと試行錯誤しております。
最終的にはカルーセルで表示されているのように
①サムネイルの全体図が移っている（切り取りを行わない）
②縦と横のサイズが統一されている
③縦長のサムネイルはサイドに余白をとることで横のサイズを統一
という設定にしたいと考えております。
①に関してはphpを弄ることでできたのですが、その代わりインデックスでは縦長の画像が他のものよりも大きく表示されてしまいました。また、ウィジェットではサイドに余白をとることができず、縦長のサムネイルの横幅が狭くなってしまっています。
インデックス・ウィジェットのサムネイルをカルーセルで表示されているサイズで表示するにはどのようなコードを書けばよいでしょうか？お時間がありましたらご教授頂きたく思います。
宜しくお願い致します。
サイトURL： https://sharactor.com/
環境情報
----------------------------------------------
サイト名：sharactor
サイトURL： https://sharactor.com
ホームURL： https://sharactor.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.3.2
PHPバージョン：7.2.27
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.1.4
カテゴリ数：3
タグ数：5
ユーザー数：4
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.0
style.cssサイズ：2810バイト
functions.phpサイズ：299バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/images/2020-03-02_08-54-52_704449.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
JavaScript（フッター）：1
----------------------------------------------
利用中のプラグイン：
AccessPress Anonymous Post 2.7.8
bbPress 2.6.4
BuddyPress 5.1.2
File Renaming on upload 2.3.8
Google XML Sitemaps 4.1.0
Imsanity 2.5.0
Regenerate Thumbnails 3.1.3
Ultimate Member 2.1.4
What's New Generator 2.0.2
----------------------------------------------
2020年3月12日 20:20
画像の縦横幅が決まっていないので、縦がどのくらい長くなるのか等がわからないので最低でもJavaScriptは使用する必要があるのではないかと思います（縦幅が決まっているのならばまだしも）。
なので、JavaScript編集が必要な場合は、申し訳ないですがサポートの対象外とさせていただいています（独自カスタマイズの対応も対象外です）。
どうしてもそのようにする必要があるのであれば、プロにご依頼いただければと思います。
https://wp-cocoon.com/cocoon-custom/
Topic starter
2020年3月13日 08:52
わいひら様
ご回答ありがとうございます。
このような編集がcssでは難しいのですね...勉強になりました。ありがとうございます。
2020年3月13日 11:49
IE 以外のブラウザであれば、CSS で簡単にできます。
例えば、記事一覧の画像への指定はこんな感じです。
@supports (object-fit: contain) {
.ect-vertical-card .entry-card-thumb img {
height: 250px;
object-fit: contain;
}
}
後は、カルーセル・インデックス・ウィジェットなど各画像の height を任意の数値で指定していくだけです。
ただし、object-fit に対応していない IE では、画像の高さは現在と同じく不揃いになります。IE にも対応するには、JavaScript が必要です。↓ の記事の「IE/Edgeに対応させるためには」に説明があります。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
This post was modified 5年前 by Akira
わいひら reacted
Topic starter
2020年3月13日 19:51
Akira様
コードを記載したところ、100%求めていた表示になりました。ありがとうございます！
IEのみ使用できない（反映されない）コードがあるというのは理解しておりましたが、今回のようなカスタマイズをchromeやfirefoxではcssで変更できるというのは大変勉強になりました。
また、親切に参考URLまで教えていただき有難うございます。調べるのが下手なのか、なかなか参考にできるサイトを見つけることができませんでしたが、画像を多く扱うサイトを作成しておりますので、教えて頂いたサイトは今後も長く活用させて頂きます。
ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。