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

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

インデックスカード画像表示について
 
共有:
通知
すべてクリア

[解決済] インデックスカード画像表示について

21 投稿
2 ユーザー
12 Reactions
3,174 表示
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

はじめまして。cocoonを愛用させていただいております。機械音痴の私でもどうにか記事を書くまでたどり着き、良きものを作ってくださったわいひら様に感謝申し上げます。

本当にありがとうございます。

さてさて、問題について一週間ほど試行錯誤してみましたが、私には解決できそうにないのでお力を借りたくメールさせていただきました(/ _ ; )

早速ではございますが、今回の問い合わせ内容です。

 

.インデックスカードの画像で「縦長の画像」を表示させたい。(添付画像あり)

アイキャッチ画像設定できちんと縦長画像は思い通り表示されているのですが、インデックスカード画像では縦長画像全体が表示されず切れてるので見かけが悪くて困っています。一つだけ縦長画像の表示に成功したのですがどうやったのか自分でも覚えていません(苦笑)

もしも、インデックスカード画像で縦長画像表示ができるのであれば、教えていただきたく思います。

 

以下に、私の分かる範囲で情報を記しておきます。

 

WordPress5.7(Cocoon Child)

 

・サーバー:ConoHa wing

 

・サイト:kotodama824.com

 

Cocoon設定:インデックス一覧(デフォルト)

カードタイプ大きなカード(先頭のみ)画像アイキャッチの表示は「本文上にアイキャッチを表示する」にチェック

サムネイル画像5:7の白銀比にチェック

 

・設定:メディア設定サムネイルのサイズ 幅300高さ0「サムネイルを実寸法にトリミングする」にチェック、中サイズ 幅の上限500高さの上限0、大サイズ 幅の上限800高さの上限0

 

・基本的にiPhoneで撮った画像を「TinyPNG」というサイトで圧縮して自分のサイトで使用。

 

・パソコンは、Mac Book Air M1チップを使用。

 

急ぎませんので、ご都合のよい時にご返信いただけましたら幸いでございます。

どうぞよろしくお願い申し上げます。


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

前略、みりん さん

ブログのトップページに並んでいるカードをCocoonでは、「エントリーカード」と呼んでいます。

 

この「エントリーカード」のサムネイル画像をトリミングなしで表示させるには、Cocoon設定の「インデックス」タブの「カードタイプ」の

 

・タイルカード2列

・タイルカード3列

 

のどちらかを選択して「変更をまとめて保存」のボタンで確定すれば、サムネイル画像がトリミングされずに表示されるかと思います。

 

サイトバーの新着記事ウィジェットや、人気記事ウィジェットは、トリミングされてしまう仕様だったような気がします。

 

この投稿は4年前ずつリフィトリーに変更されました

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

みりん さん

あと、これは、別件ですが、ConoHa WING で提供されている Cocoonのテーマのフォルダ名が、標準のフォルダ名と異なっていることが原因で、Cocoonの親テーマをアップデートできない方が多くいらっしゃるようで、みりん さんも、そのお一人のようです。

 

現在、Cocoonの親テーマの最新バージョンは、2.2.8.5 ぐらいかと思います。

 

以下の過去のトピックで、わいひらさんが解決方法をご案内くださっていますので、お読みになってみてください。

 

※[解決済] 親テーマ更新後、2つの親テーマがあります。

https://wp-cocoon.com/community/postid/40603/

 


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

みりんさん

Cocoonでは、どのような環境でCocoonを使っているのかという環境情報を簡単に取得することができるようになっています。

 

環境情報を貼り付けていただきますと、アドバイスをいただきやすくなるかもしれません。

 

環境情報の取得方法

https://wp-cocoon.com/theme-report/


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

みりんさん

いまのところ、デフォルトのエントリーカードのカタチで、サムネイル画像がトリミングされないようにする機能はないみたいです。

 

画像がトリミングされない場合、エントリーカードの高さがバラバラになり、揃わなくなるため、やや雑然とした感じになってしまいます。

 

そのため、サムネイル画像のサイズがアスペクト比も同じになるように工夫されているようです。

 

タイルカード2列であれば、画像がトリミングされない仕様だっと思うので、サムネイル画像もアイキャッチ画像全体が表示されるかと思います。

 

ただ、左右のカードの高さは揃わなくなります。(これは仕方ないかもしれません)

この投稿は4年前ずつリフィトリーに変更されました

   
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

@leafytree様

こんにちは、リフィトリー様☆

はじまして、みりんと申します。

お忙しい中、早々に返信いただき本当にありがとうございます。

リフィトリー様のご厚意に感謝申し上げますm(_ _)m

ブログのトップページに並んでいるカードをCocoonでは、「エントリーカード」と呼ぶのですね!!勉強になります、教えていただきありがとうございます。

リフィトリー様に教えていただいたとおり、すぐにCocoon設定の「インデックス」タブの「カードタイプ」の「タイル2列」を選択し表示を確認したところ…確かに縦長画像が表示されました。

ありがとうございます!!!

ただ、ごちゃごちゃしていて見づらくなってしまったので「大きなカード(先頭のみ)」に戻しました。せっかく教えていただいたのにすみません(T_T)涙

やっぱり、「大きなカード(先頭のみ)」のまま縦長画像表示することは難しいんですよね?

無理なら、綺麗サッパリ諦めます!!

 

↓私の環境情報です↓

サイト名:命名言魂円(めいめいことだま)
サイトURL: https://kotodama824.com
ホームURL: https://kotodama824.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon
スタイルシートURL:/wp-content/themes/cocoon-child
親テーマスタイル:/wp-content/themes/cocoon/style.css
子テーマスタイル:/wp-content/themes/cocoon-child/style.css
スキン:/wp-content/themes/cocoon/skins/m-sora/style.css
WordPressバージョン:5.7
PHPバージョン:7.4.14
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.5.1
カテゴリ数:11
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:838バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2021/02/-e1614301318210.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
BackWPup 3.8.0
Broken Link Checker 1.11.15
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
EWWW Image Optimizer 6.0.3
Formzu WP 1.6.2
Google XML Sitemaps 4.1.1
Invisible reCaptcha 1.2.3
Post Type Switcher 3.2.0
Two Factor 0.7.0
WebSub/PubSubHubbub 3.0.3
WP Multibyte Patch 2.9
Yoast Duplicate Post 4.1.2

 

上記の環境情報内を確認したら、リフィトリー様のご指摘してくれたとおりCocoonの親テーマのバージョン2.2.5.1となっており古いようです。ご指摘ありがとうございます。

やっぱり、親テーマをアップデートしたほうがいいですよね?「親テーマ」をアップデートしても「子テーマ」は消えたりしないですよね?

こんな簡単なこともわからなくてすみません、私ちょーアナログ人間で機械音痴なもので…(T_T)

リフィトリー様が教えてくださったページを参考に頑張って「親テーマ」のアップデートを試みます!!

いろいろ教えていただき本当にありがとうございます。

感謝。

 


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

みりんさん

ただ、ごちゃごちゃしていて見づらくなってしまったので「大きなカード(先頭のみ)」に戻しました。せっかく教えていただいたのにすみません(T_T)涙

あとは、撮影するときに、横向きで撮影して、サムネイル画像に上手く収まるように画像ソフトなどで丁寧にトリミングするのが良いかと思います。

 

サムネイル画像のアスペクト比を考慮して、作品が上手くサムネイル画像に収まるように工夫してみてください。

 

やっぱり、親テーマをアップデートしたほうがいいですよね?「親テーマ」をアップデートしても「子テーマ」は消えたりしないですよね?

Cocoonの親テーマのアップデートは、通常ならダッシュボードの「更新」のところに表示され、チェックを入れて「更新」ボタンをクリックするだけで良いはずなのですが、ConoHaのCocoonはフォルダ名が変更されているため、アップデートが出来ない状態になっていると推測されます。

 

WordPressの方だけをアップデートしていくと、古いCocoonの親テーマでは、対応できない事柄が発生してくるので、ずっとアップデートしない訳にはいかないようです。

 

わいひらさんがご案内くださった方法ですと、いままでフォーラムにお問い合わせのあった方は上手くいっているようです。

 

お一方だけ、ちょっと、タイムラグがあって、すぐに反映されなかった方がいらっしゃいましたが、他の方は上手くいっていた様子です。


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

みりんさん

親テーマのアップデートの件ですが、みりんさんのサーバーには、まだ、ConoHaの方の親テーマしか見当たらないようです。

 

わいひらさんがご案内くださった方法は、ダッシュボードの「テーマ」のところに親テーマが2つある状態になってから、作業をなさってください。

 

おそらく、ダッシュボードの「更新」のところに、Cocoonの親テーマが表示されているのではないかと思われます。

 

ConoHaの方の親テーマしかない状態で、わいひらさんがご案内くださっている方法を行ってしまうと、サイトが表示されなくなるか、別のテーマに変わってしまうか、というようなことになってしまう可能性があります。

 

必ず、親テーマが2つある状態にしてから、作業してください。


   
わいひら reacted
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

何度も書き込みをしていただきありがとうございます。

私なんかのために何度も時間をさいてくださり拝謝申し上げます(T_T)

↓リフィトリー様からの返信↓

いまのところ、デフォルトのエントリーカードのカタチで、サムネイル画像がトリミングされないようにする機能はないみたいです。

→そうなんですね!!!了解いたしました。無料でCocoonを使わせていただけるだけでもとてもありがたいので、このまま使い続けます!記事内容重視で、元の画像をどうにかできないかいろいろ試してみます☆リフィトリー様にはたくさん教えていただき勉強になりました、本当に助かりました。ご教授賜り感謝申し上げますm(_ _)m

これから、とりあえず「親テーマ」のアップデートに挑戦します!!

季節の変わり目で体調崩しやすいと思いますが、どうかお体お大事に元気で笑顔の毎日をお過ごしになることを心より願っております。

リフィトリー様と良きご縁で繋がれたことに感謝です!!

いろいろありがとうございました。感謝。


   
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

@leafytree様

ありがとうございます。

↓リフィトリー様からの返信↓

わいひらさんがご案内くださった方法は、ダッシュボードの「テーマ」のところに親テーマが2つある状態になってから、作業をなさってください。

おそらく、ダッシュボードの「更新」のところに、Cocoonの親テーマが表示されているのではないかと思われます。

ConoHaの方の親テーマしかない状態で、わいひらさんがご案内くださっている方法を行ってしまうと、サイトが表示されなくなるか、別のテーマに変わってしまうか、というようなことになってしまう可能性があります。

必ず、親テーマが2つある状態にしてから、作業してください。

→はい、わかりました!!!なんだか、このままではまずいということは理解しました…汗

近日中に親テーマの問題を解決します!!!ご指摘いただき感謝です☆頑張ります!!


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

みりんさん

わいひらさんのご案内くださった方法は、イメージとしては、親テーマを取り替えるイメージです。


   
わいひら reacted
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

@leafytree様

リフィトリー様、ありがとうございます♡

早速、親テーマをアップデートすべく参考の通り恐る恐る、外観「テーマを編集」9列目のtemplate:cocoon-master

とし、ファイルを更新しました。

添付画像通りで大丈夫ですよ?!

機械音痴でパソコンに詳しくないので、何をするにも最後の更新ボタンを押すのに勇気が入ります笑


   
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

@leafytree様

リフィトリー様、ありがとうございます♡

早速、親テーマをアップデートすべく参考の通り恐る恐る、外観「テーマを編集」9列目のtemplate:cocoon-master

とし、ファイルを更新しました。

添付画像通りで大丈夫ですよ?!

機械音痴でパソコンに詳しくないので、何をするにも最後の更新ボタンを押すのに勇気が入ります笑


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

みりんさん

ちょっと外出してしまっているので、詳細は確認できませんが、やり方は、合っているように見えてます。

ダッシュボードのテーマのところに親テーマは2つありますか?


   
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

@leafytree様

お忙しいところ、ご返信ありがとうございます、大変恐縮でございます。

恐らくですが、有効中のCocoon Child様と親テーマのCocoon様×2が鎮座しております。

そして、WordPressの更新を確認したところ最新版だと表示されています!!

1時間前くらいに実行してみましたが、環境情報は書き変わっていないようにみえます。訳がわからなくなったら困るので、とりあえず今は放置プレー中です。

リフィトリー様の都合が良いときいつでも構いませんのでご返信お待ち申し上げております。

いろいろご教示いただき本当にありがとうございます。


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

みりんさん

以下のトピックの みんみんさん は、バージョンが古い方の親テーマを削除したら、事態が変わったようです。

 

[解決済] 投稿編集画面がおかしくなりました。

https://wp-cocoon.com/community/postid/46731/

 

どちらの親テーマが古いものかわかりますか?(私はConoHaではないので経験がないのです。マウスポインタを乗せたときに何か表示されますか?)

また、古い方がわかる場合は、削除ができそうですか?

この投稿は4年前 2回ずつリフィトリーに変更されました

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

みりんさん

私のテストサイトでは、テーマの画面で、鎮座?しているテーマのタイルをクリックすると、ウィンドウが開いて、バージョンが確認できるようですが、みりんさんの環境では、どうでしょうか?

この投稿は4年前ずつリフィトリーに変更されました

   
わいひら reacted
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

@leafytree様

ご返信ありがとうございます。

リフィトリー様が詳しく教えてくださったので無事に古いバージョンがわかりました☆

結果報告

★Cocoon新バージョンアップにたぶん成功したようです!!!☆

サイト名:命名言魂円(めいめいことだま)
サイトURL: https://kotodama824.com
ホームURL: https://kotodama824.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child/style.css
スキン:/wp-content/themes/cocoon-master/skins/m-sora/style.css
WordPressバージョン:5.7
PHPバージョン:7.4.14
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.8.5
カテゴリ数:11
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2021/02/-e1614301318210.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
BackWPup 3.8.0
Broken Link Checker 1.11.15
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
EWWW Image Optimizer 6.0.3
Formzu WP 1.6.2
Google XML Sitemaps 4.1.1
Invisible reCaptcha 1.2.3
Post Type Switcher 3.2.0
Two Factor 0.7.0
WebSub/PubSubHubbub 3.0.3
WP Multibyte Patch 2.9
Yoast Duplicate Post 4.1.2

経緯報告

1.リフィトリー様よりCocoon「親テーマ」が古いことを教えていただき、「親テーマ」アップデートに着手

2.ダッシュボードの「更新」より新バージョ2.2.8.5を更新

3.外観→テーマにCocoonChildと2つ「親テーマ」が並んでいるのを確認。

4.外観→テーマエディターを選択→9列目のTemplate: cocoonをTemplate: cocoon-masterへ変更保存。(変更ボタンを押す勇気が必要でした笑)

5.念の為、私が使用しているプラグインの「BackWPup」でバックアップをとっていることを確認。(すべては自己責任なのでなんかあったときの保険)

6.外観→テーマ→2つある「親テーマ」がどちらが新バージョンか確認するため「テーマ詳細」をクリック→それぞれ右上にバージョンが記載されているのを確認→確認後「古いバージョンの親テーマ」を削除(ここでまた勇気を必要としました笑笑)

7.言われていたとおりサイトが真っ白になる(肝っ玉小さい私はやっぱり焦りました汗)

8.1分くらい待ってもサイトが真っ白のまま(ちょー焦る汗)

9.このままでは新バージョンに移行できてないと野生の勘が働き、一度、外観→テーマを「Cocoon親テーマ」を有効にしてサイトを確認

10.サイトの復活を確認(やれば出来る子!!と自分を褒めてあげました笑)

11.外観→テーマ「CocoonChild」に有効を戻す

12.サイト表示確認→スキンが変わっていたので元に戻して保存

13.環境情報で「バージョン」を確認→新バージョンに書き換わってるぅぅl!(アナログ人間、機械音痴の私でもできました)

14.完了…のはず

 

リフィトリー様のお蔭様様です!!

なんとお礼を申し上げていいのやら…どこの馬の骨ともわからない私に親切丁寧に教えていただき本当に有難く思います(T_T)

本当に本当にありがとうございました(T_T)(T_T)


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

みりん さん

7.言われていたとおりサイトが真っ白になる(肝っ玉小さい私はやっぱり焦りました汗)

8.1分くらい待ってもサイトが真っ白のまま(ちょー焦る汗)

9.このままでは新バージョンに移行できてないと野生の勘が働き、一度、外観→テーマを「Cocoon親テーマ」を有効にしてサイトを確認

確かにこれは、焦りますよね。

 

でも、上手くいった様子なので、良かったと思います。

 

また、手順や、その時の反応等、詳しく書きこんでくださって、ありがとうございます。

この投稿は4年前ずつリフィトリーに変更されました

   
わいひら reacted
(@みりん)
Active Member
結合: 4年前
投稿: 9
トピックスターター  

@leafytree様

いろいろ教えていただき本当にありがとうございます。

上手くいったのは、リフィトリー様のお蔭です

サイトを立ち上げて間もないうちに知れてよかったです!!

記事をたくさん書いたあとだったら、ボタン一つ押すのももっと勇気を必要として心臓がいくつあっても足りないと思います笑

ボタン一つ押すのも躊躇してしまうお年頃なもので笑笑

私みたいに機械音痴のちょード素人で迷い悩んでいる人、たくさんいると思います。

そんな手探りの中でリフィトリー様は「光」のような存在です٩(♡ε♡ )۶

相談してよかったです。

良きご縁に感謝です!!!

お忙しい、本当にご教示いただきありがとうございました。感謝。


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

みりんさん

力強い作品ですね!

なんだか じんわりと来ます。


   
共有:

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

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

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

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

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

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

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

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