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

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

「大きなカード(先頭のみ)」を選択した...
 
共有:
通知
すべてクリア

[解決済] 「大きなカード(先頭のみ)」を選択したときのサムネイル画像につきまして

22 投稿
3 ユーザー
5 Reactions
3,613 表示
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

いつもお世話になっております。

Cocoon設定の「画像」タブのサムネイル画像で「1:1(正方形)」に設定しています。

Cocoon設定の「インデックス」タブの「カードタイプ」で「大きなカード(先頭のみ)」を設定した場合で、カテゴリー一覧ページを表示すると先頭のエントリ―カードのサムネイル画像だけ、正方形になってくれません。

「大きなカード(先頭のみ)」から、デフォルトの「エントリーカード(デフォルト)」に戻すと正方形に表示されます。

「大きなカード(先頭のみ)」を選択したときも、カテゴリー一覧ページの先頭のエントリ―カードのサムネイル画像も正方形に揃えたいのですが、ご教示いただけますと助かります。

なお、ローカルのテスト環境のため、リンクは貼れず、すみません。

よろしくお願いします。
----------------------------------------------
サイト名:リフィトリーインフォ
サイトURL: http://demo.local
ホームURL: http://demo.local
コンテンツ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.1.1
PHPバージョン:7.2.9
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
サーバーソフト:nginx/1.14.0
サーバープロトコル:HTTP/1.0
エンコーディング:gzip, deflate
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:1.7.3
カテゴリ数:5
タグ数:2
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
----------------------------------------------
Gutenberg:0
AMP:0
PWA:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Regenerate Thumbnails 3.1.0


   
タスカム
(@tascam)
Trusted Member Registered
結合: 6年前
投稿: 77
 

こんにちは。ご質問への回答ではないため恐縮ですが、

なお、ローカルのテスト環境のため、リンクは貼れず、すみません。

についてです。

URLが「demo.local 」ですが、leafytreeさんのローカル環境で『Local by Flywheel』をご利用でしょうか。『Local by Flywheel』であれば、一時的に外部の方もローカルサイトを閲覧できる機能です。

やはり直接サイトを見ることが出来たほうが、問題解決も早いかと思いました。すでにご存知の場合はご放念下さい。

【参考】ローカルサイトを一時的に公開

ご参考までに、お目通しいただけますと幸いです。


   
haineons reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

Thanks! 様 ご回答、また、『Local by Flywheel』の一時的公開についてのご案内をありがとうございます。

Thanks! 様 のおっしゃる通り直接見ていただいた方が良いと、試してみたのですが、以下のようなエラーで、上手くいきません。

(前略)No connection could be made because the target machine actively refused it.

セキュリティーソフトの履歴を見ると、ngrok のアクセスを許可しているようなのですが・・・

 


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

Thanks! 様 再度試したところ、表示されました。

ローカルマシンなのであまり、長時間の公開はできないかもしれません。

http://e0e7dc1e.ngrok.io/


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

Local by Flywheelのやつは、見れないようです。

全部サムネイルが同じなので、使用されている画像はNO IMAGE画像ですか?
その投稿のアイキャッチに適当に画像設定して、Regenerate Thumbnailsするとどうなりますか?


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

あっ、見れた。
Local by Flywheelにこんな機能があるとは、僕も知りませんでした。


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

Local by Flywheel の紹介動画で機能があるのは知っていましたが、使ったのは初めてです。


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

Regenerate Thumbnails しても変わりません。


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

「Local by Flywheel 」の一時的公開機能では、当然ですが、一旦、「Local by Flywheel」を終了したり、パソコンをOFFにしたりするとサイトを見ることはできません。

再度、公開するときは、別のアドレスになるみたいです。

http://4cf060ac.ngrok.io/

ですので、見てほしい相手にそのことを伝えることが必要になるかなあという感じです。

 


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

やっぱり、見たいときに見れないのは不便かもしれないですね…。
こちらの、一番上のサムネイルは、アイキャッチに設定されているものでしょうか?


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

やっぱり、見たいときに見れないのは不便かもしれないですね…。

そうなんですよね。せっかくトピックに来ていだだいたのに・・

サムネイルはアイキャッチ画像で設定したものです。

http://1ad7dce2.ngrok.io/

親のboxに「ect-big-card-first」というクラスがついているのですが、これが関係あるのでしょうか?


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

3つの記事に「パソコン」の「タグ」を付けてみました。

サイドバーの「タグ」で「パソコン」をクリックすると、やはり、最上部のエントリーカードのサムネイルが正方形になってくれません。

エントリーカードの親のboxのタグは、

<div id="list" class="list ect-big-card-first ecb-entry-border">

となっているようです。


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

URLは見れてないです。
ところで、Cocoonの画像正方形にしたとしても、画像はこの大きさにならないと思うのですけど、何かカスタマイズをされているのですか?


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  
.entry-card-thumb {/*サムネイル画像のサイズを変更(変更前320px)*/
width: 25%;
}

ちょっと小さくしています。

http://590feb62.ngrok.io/

 


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

すみません、うっかり「Local by Flywheel 」を閉じてしまいました。

http://3c14fbb6.ngrok.io/


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

試しに親テーマに変更してみたのですが、親テーマでも正方形には表示されないようです。

Simplicity2では、カテゴリー一覧や、タグ一覧の表示のサムネイルはホームページの記事一覧で「大きなカード(先頭のみ)」に設定していても影響はないのですが・・(もっともSimplicity2のサムネイル画像はデフォルトが正方形ですけれど)

https://leafytree.info/category/%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%be%e3%81%97%e3%81%9f

Cocoonでは、カテゴリー一覧やタグ一覧でも先頭のエントリーカードだけアイキャッチ画像に設定した大きな画像が呼び出されているような気がするのですが・・


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

Local by Flywheelダメですね。
おそらく一定時間でオフになっているのかもしれません。

ソースコードを検証して見たところ、不具合らしき部分があったので修正してみました。
よろしければ試してみていただければ幸いです。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


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

早速、アップデートしたところ、2つめのエントリーカード同様に正方形になりました。

わいひらさん、ありがとうございます。

私のような老眼の読者の方でも読みやすいようにと、文字の大きさや配置を調整していたら、Simplicity2の見た目に近くなってきてしまいました。

同じスペースなら、サムネイルが正方形の方が文字のスペースを広く使えて助かります。アスペクト比の変更機能もありがたいです。


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

追伸:Local by Flywheelの一時公開機能には、時間制限があるようです。


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

Thanks! 様 『Local by Flywheel』の一時公開機能をご紹介いただき、ありがとうございました。

今回はあまり有効とはならなかったかもしれませんが、相手にすぐに見てもらえる場合などは使えるかなと思いました。

試すことができて、よかったです。


   
タスカム reacted
タスカム
(@tascam)
Trusted Member Registered
結合: 6年前
投稿: 77
 

『Local by Flywheel』ですが、時間制限があるとは知りませんでした…。
お役に立てず申し訳ありませんでした。

問題が解決されて、良かったです。
こちらこそ、ありがとうございました。


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

動作確認ありがとうございます。

僕もかなり前から、Local by Flywheelを使っていたんですが、その機能は知りませんでした。
遠くにいる人と、現在進行形で動作を確認しあうには最高の機能ですよね。
どういう仕組みかわからないけど、すごい技術です。
僕も機会があれば、活用させていただこうと思います。


   
タスカム reacted
共有:

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

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

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

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

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

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

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

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