サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年10月25日 20:53
不具合・カスタマイズ対象ページのURL:
一例です。
このページの最下部に現在のブログカードがあります。
https://babychamp-blog.com/tabi-usagi/nara-kikusuiro-bridal-course/
相談内容:
ブログカードを「写真が上、タイトルが下」というようにCSSで変更したいです。
(欲を言えば、タグやカテゴリーの表示もしたいです。)
イメージは添付画像のような感じです。
(添付画像はトップページのスクショ)
不具合の発生手順:
解決のために試したこと:
色々と検索して、方法を模索しましたが、方法が見つからず、質問させていただきました。
お手数ですが、よろしくお願いいたします。
環境情報:
----------------------------------------------
サイト名:旅うさぎ
サイトURL: https://babychamp-blog.com/tabi-usagi
ホームURL: https://babychamp-blog.com/tabi-usagi
コンテンツ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
WordPressバージョン:6.0.3
PHPバージョン:7.4.28
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.6.3
カテゴリ数:56
タグ数:13
ユーザー数:3
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:24800バイト
functions.phpサイズ:5165バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2022/05/img_8032.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
All in One SEO 4.2.1.1
Custom Taxonomy Order 3.4.3
Jetpack 11.1.2
Regenerate Thumbnails 3.1.5
Revive Old Posts 9.0.9
Smart Slider 3 3.5.1.7
----------------------------------------------
Topic starter
2022年10月25日 22:33
ご迅速にありがとうございます!
早速実装してみました。
ほぼイメージ通りでとても嬉しいです。
すみませんが、一点。
画質が落ちてしまうのは、どうしようもないですか?
できれば、綺麗な画像で表示したいです。
“ブログカードにタグ、カテゴリー情報はありません。
特に外部ブログカードは他のページを参照となり。
この為、表示することはできません。”
>>こちら承知いたしました。
2022年10月25日 22:54
画質が落ちてしまうのは、どうしようもないですか?
できれば、綺麗な画像で表示したいです。
じゃらんnetの画像の事と思いますが、できません。
外部サイトのog:imageから画像を取得しています。
取得した画像が160×90pxと小さい為、拡大するとボケてしまいます。
わいひら reacted
2022年10月25日 22:57
babychampさん
試してはいませんが、以下が参考にならないでしょうか。
Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集
https://wp-cocoon.com/thumbnail-size-custom/
今回は、上記の「内部ブログカード」が対象かと思いますが、念のため一通り目を通していただくことをお勧めします。
事前にサイトのバックアップを取得しておくのが良いかもしれません。
外部ブログカードは、ちょっと今のところ分からないです。
【追記】
今回の外部サイトのOGPが、300x225のサイズみたいですね。
(現在のブログカードのサムネイルのサイズは、578x325.125みたいですから、どうしても)
わいひら reacted
2022年10月25日 23:17
外部ブログカードのサムネイルについては、以下で取得していると思います。
ここのパラメータでサイズも指定していると思います。
ただ、元々のOGPが300x225ですから、どうしても拡大するイメージになってしまうと思います。
【訂正】
上記は、OGPを取得できない場合のスクリーンショットだと思います。
すみません。
Topic starter
2022年10月25日 23:31
chu-yaさん
mk2さん
ご返信ありがとうございます。
おかげさまで、なんとか内部リンクは綺麗に表示することに成功しました。
明日、外部リンクにもチャレンジしてみたいと思います。
【追記】
外部リンクのアイキャッチの画質が良い場合という意味です。
This post was modified 2年前 by babychamp
2022年10月26日 02:17
只今スマホからですので、調べるのは厳しいです。
外部ブログカードは、以下の関数の部分なのかなという気はします。
間違っているかもしれませんけど。
後は詳しい方に・・・。
わいひら reacted
2022年10月26日 02:24
書き忘れました。
そもそもで申し訳ないですが。
スキン「SILK」のブログカードが、ご要望のものに近いかもしれないです。
最近「SILK」を確認しておりませんので、内部・外部共にどうなっていたか、はっきり覚えてはいないのですけれど。
何かの参考にはなるかもしれない気はします。
間違っていたら、すみません。
わいひら reacted
Topic starter
2022年10月26日 22:48
mk2さん
何度もありがとうございます。
いただいた情報をもとにトライしましたが、(私の勉強不足もあり)難しいですね。
内部リンクだけでも満足な形になったので、十分ではあるのですが、もう少しだけ頑張ってみようと思います。
ありがとうございました。
2022年10月27日 02:35
最近「SILK」を確認しておりませんので、内部・外部共にどうなっていたか、はっきり覚えてはいないのですけれど。
●functions.php
SILKは外部ブログカードを作る際(lib/blogcard-out.php)、サムネイルサイズを変更しています。
サムネイルサイズを160×160→320×320pxに変更。
add_filter('external_blogcard_image_width', THUMB320WIDTH); add_filter('external_blogcard_image_height', THUMB320HEIGHT);
●外部サイトサムネイルについて
外部サイト「奈良公園周辺のホテルランキング - じゃらんnet」のog:imageは300×225pxです。
親テーマCSSでwith:90%を、子テーマCSSの以下でサムネイル幅を変更しており。
外部サイトのサムネイル幅を600pxに拡大表示させる為、ボケるのは仕方なく、こればかりは頑張りようがないです。
少なくとも上記PHPを追加すれば、160×120pxに縮小されず。
元画像300×225pxとなる為、以前よりは改善され、少しはボケなくなりますが。
.blogcard-wrap { max-width: 600px; }
●子テーマCSS
添付のエラーがあります。
わいひら reacted
Topic starter
2022年10月30日 17:29
何度もご返信くださり、ありがとうございます。
返信が遅くなってしまい、すみません。
以下をfunction.phpに追加すれば解決するとのことでしたが、添付のようなエラーが出てしまい、ページ自体が表示できなくなりました。
add_filter('external_blogcard_image_width', THUMB320WIDTH); add_filter('external_blogcard_image_height', THUMB320HEIGHT);
どうやら、「THUMB320WIDTH」等を定義していない事によるエラーのようですが、解決方法はわかりますでしょうか。
勉強不足ですみません。
外部サイト「奈良公園周辺のホテルランキング - じゃらんnet」のog:imageは300×225pxです。
親テーマCSSでwith:90%を、子テーマCSSの以下でサムネイル幅を変更しており。外部サイトのサムネイル幅を600pxに拡大表示させる為、ボケるのは仕方なく、こればかりは頑張りようがないです。
少なくとも上記PHPを追加すれば、160×120pxに縮小されず。
元画像300×225pxとなる為、以前よりは改善され、少しはボケなくなりますが。
こちらの件もありがとうございます。このページのサムネイルがある程度ぼやけることは諦めましたが、参照元のページで高画質の画像が使われている場合にぼやけるのを防ぎたいと思っています。
添付のエラーがあります。
本件もありがとうございます。
末尾以外のエラーは消すことができました。
2022年10月30日 18:31
PHPのエラーですが、WordPress自体は開きますか?
子テーマ内のfunctions.phpに追加しましたか?
THUMB320WIDTH、THUMB320HEIGHTは親テーマに定義されています。
わいひら reacted
2022年10月30日 19:30
おそらく、以下のような感じのWarnigだと思います。
Warning: Use of undefined constant THUMB320WIDTH - assumed 'THUMB320WIDTH' (this will throw an Error in a future version of PHP) in wp-content\themes\cocoon-child-master\functions.php on line 9 Call Stack # Function Location 1 {main}( ) ...\index.php:0 2 require( 'wp-blog-header.php' ) ...\index.php:17 3 require_once( 'wp-load.php' ) ...\wp-blog-header.php:13 4 require_once( 'wp-config.php' ) ...\wp-load.php:50 5 require_once( 'wp-settings.php' ) ...\wp-config.php:80 6 include( 'wp-content\themes\cocoon-child-master\functions.php' )...\wp-settings.php:566
すみません、時間がありませんので、このまま離脱です・・・。
2022年10月30日 20:03
私が書いたSILKの部分をコード転記しただけで中途半端でした。すみません。
結果、同じ事言っている?
add_filter('external_blogcard_image_width', function(){ return THUMB320WIDTH; }); add_filter('external_blogcard_image_height', function(){ return THUMB320HEIGHT; });
Topic starter
2022年11月4日 09:32
みなさま
ありがとうございます。
返信が遅くなってしまい、申し訳ございません。
add_filter('external_blogcard_image_width', function(){
return THUMB320WIDTH;
});
add_filter('external_blogcard_image_height', function(){
return THUMB320HEIGHT;
});
上記のコードを追加したところ、エラーは出なくなりましたが、画質の改善はされませんでした。
もともと、内部リンクのブログカードをメインで使う予定だったので、外部リンクはなるべく、ブログカード表示しないという対応でいこうと思います。
みなさま、ご協力くださりありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。