サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
10
投稿
4
ユーザー
6
Reactions
1,066
表示
トピックスターター 2022年9月18日 17:22
固定ページトップに、以下のshortcodeで投稿一覧を表示しているのですが、サムネイル画像が
アイキャッチ画像通りに表示されません。何かの設定がうまくいってないのでしょうか。
ご教示よろしくお願いいたします。
<h2>新着記事</h2>
[new_list count="4" type="large_thumb"]
<div class="p-button"><a href="https://dagashi-yumehaku.com/%e6%96%b0%e7%9d%80%e8%a8%98%e4%ba%8b/">新着記事をもっと見る <i class="fa fa-chevron-circle-right"></i></a></div>
---------------------------------------------
サイト名：駄菓子屋の夢博物館
サイトURL： https://dagashi-yumehaku.com
ホームURL： https://dagashi-yumehaku.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-colorful-line/style.css
WordPressバージョン：5.8.1
PHPバージョン：7.4.23
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.7.1
カテゴリ数：5
タグ数：1
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：3795バイト
functions.phpサイズ：622バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：1
Retina：1
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
All in One SEO 4.1.4.4
All In One WP Security 4.4.9
EWWW Image Optimizer 6.2.5
Google Analytics for WordPress by MonsterInsights 8.1.0
Jetpack 10.2
PDF Embedder 4.6.2
Regenerate Thumbnails 3.1.5
Smart Slider 3 3.5.1.0
TypeSquare Webfonts for エックスサーバー 1.2.4
WP Maintenance Mode 2.4.1
XO Event Calendar 2.3.7
----------------------------------------------
2022年9月18日 17:32
dagashiya-yumehakuさん
新着記事の左上の記事を確認しました。
（がっくり・・・という感じの絵文字のもの）
アイキャッチに、新着記事のサムネイルに表示されていた画像が設定されているように見えます。
（以下の添付画像の右側をご覧いただければと。）
（以下の添付画像の右側をご覧いただければと。）
かばさん？の画像はアイキャッチではなく、投稿本文に貼り付けられた画像のように思います。
（新着記事の左下も同じような状態だと思います。）
編集画面のアイキャッチの設定をご確認いただいても、よろしいでしょうか。
わいひら reacted
2022年9月18日 17:43
サムネイル画像が
アイキャッチ画像通りに表示されません
●結果
mk2さんが既に回答されています。
投稿を編集で「アイキャッチを設定」に設定された画像が正しく表示されています。
●対策
投稿ページのアイキャッチ画像を意図した画像に設定し直して下さい。
●補足
[Cocoon設定]→[画像]→アイキャッチの自動設定
説明に書かれている通り、本文中の先頭画像がアイキャッチに自動で設定されます。（図参照）
わいひら reacted
トピックスターター 2022年9月18日 18:57
mk2様、chu-ya様
早速のご指導ありがとうございました。
私としては、アイキャッチ画像の全体が、固定ページの投稿一覧の画像部分に
ぴったり収まらないかと思い質問したのですが、「こまったにこちゃん」マークが
質問添付画像のような中央部分を切り抜いて表示されているのは正しい状態という
ことでしょうか。これが正しい状態であれば、納得できるのですが。
2022年9月18日 19:07
質問添付画像のような中央部分を切り抜いて表示されているのは正しい状態という
ことでしょうか。これが正しい状態であれば、納得できるのですが。
サムネイル表示サイズが380×210pxとなっています。
これに対しアイキャッチ画像が100×100pxであり、object-fit: coverでトリミングし、サムネイル表示サイズに合わせています。
結果、正しいです。
アイキャッチ画像ですが、全て同じサイズ(縦×横px)で作る事をお勧めします。
わいひら reacted
2022年9月18日 19:12
dagashiya-yumehakuさん
お問い合わせ内容を勘違いしたようです。
chu-yaさんがお書きになったのは、以下のことかと思います。
.home #main .widget-entry-cards figure img {
width: 100%;
display: block;
object-fit: cover;
height: 210px;
}
子テーマに、ご自分で上記のようにお書きになっています。
そのため、今の表示になるのだと思います。
例えば、上記の高さ指定を削除すると、以下のような表示になります。
ご要件をはっきりと明示していただけると助かります。
どうなさりたいのか、こちら側には分からなかったです。
（今回のお問い合わせ内容では、我々が受け取ったような印象を持つことも有り得ると思います。勘違いしたのはこちらですが）
（今回のお問い合わせ内容では、我々が受け取ったような印象を持つことも有り得ると思います。勘違いしたのはこちらですが）
chu-yaさんがお書きになった通りですね。
アイキャッチ画像ですが、全て同じサイズ(縦×横px)で作る事をお勧めします。
ひとつひとつアイキャッチ画像のアスペクト比が違えば、いろいろ面倒なことになと思います。
（1つ1つ違えば、辻褄が合わなくなると思います。）
アスペクト比は揃えるべきだと思います。
（今度こそ、今日は離脱します）
わいひら reacted
トピックスターター 2022年9月18日 19:39
mk2様、chu-ya様
とても分かりやすくご指導いただき、感謝いたします。
子テーマの高さ指定を削除して、アスペクト比を揃えて
やり直します。
ありがとうございました。
2022年9月18日 19:41
「こまったにこちゃん」マークが
質問添付画像のような中央部分を切り抜いて表示されているのは正しい状態という
ことでしょうか。
お書きになっている切り抜く指定を…
object-fit: cover;
変更するのも一案です。
object-fit: contain;
参考：object-fit - CSS: カスケーディングスタイルシート | MDN
わいひら reacted
2022年9月18日 20:02
object-fit: containにした場合、アスペクト比を保持したまま領域内に収める為、ページによっては、サムネイルの左右にスペースができてしまいます。
わいひら reacted
トピックスターター 2022年9月19日 08:49
Akira様、chu-ya様
ご指導心より感謝いたします。
おかげさまでどうしてそうなっているのか、理解することが
できました。初心者の質問にもこのように丁寧なご指導が
頂けることが分かり、とても心強く感じました。
改めてHTML,CSSを始め関連の勉強をやり直そうと思います。
ありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。