ブログカードにタグ、カテゴリー情報はありません。
特に外部ブログカードは他のページを参照となり。
この為、表示することはできません。

●CSS

/* 画像、タイトルを縦並び */
.blogcard {
  display: flex;
  flex-direction: column;
}

/* サムネイル画像サイズ */
.blogcard figure{
  width: 100%;
}

/* タイトルの左の余白 */
.blogcard .blogcard-content {
  margin-left: 0;
}

ご迅速にありがとうございます！

早速実装してみました。
ほぼイメージ通りでとても嬉しいです。

すみませんが、一点。
画質が落ちてしまうのは、どうしようもないですか？
できれば、綺麗な画像で表示したいです。

“ブログカードにタグ、カテゴリー情報はありません。
特に外部ブログカードは他のページを参照となり。
この為、表示することはできません。”

>>こちら承知いたしました。

投稿者:: @babychamp

画質が落ちてしまうのは、どうしようもないですか？
できれば、綺麗な画像で表示したいです。

じゃらんnetの画像の事と思いますが、できません。
外部サイトのog:imageから画像を取得しています。
取得した画像が160×90pxと小さい為、拡大するとボケてしまいます。

babychampさん

試してはいませんが、以下が参考にならないでしょうか。

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集
https://wp-cocoon.com/thumbnail-size-custom/

今回は、上記の「内部ブログカード」が対象かと思いますが、念のため一通り目を通していただくことをお勧めします。

事前にサイトのバックアップを取得しておくのが良いかもしれません。

外部ブログカードは、ちょっと今のところ分からないです。

【追記】

今回の外部サイトのOGPが、300x225のサイズみたいですね。
（現在のブログカードのサムネイルのサイズは、578x325.125みたいですから、どうしても）

外部ブログカードのサムネイルについては、以下で取得していると思います。

https://github.com/xserver-inc/cocoon/blob/35460095df90d5029e0fda29b20d6d17a599bdd5/lib/image.php#L97-L103

ここのパラメータでサイズも指定していると思います。

ただ、元々のOGPが300x225ですから、どうしても拡大するイメージになってしまうと思います。

【訂正】

上記は、OGPを取得できない場合のスクリーンショットだと思います。
すみません。

chu-yaさん

mk2さん

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

おかげさまで、なんとか内部リンクは綺麗に表示することに成功しました。

明日、外部リンクにもチャレンジしてみたいと思います。

【追記】

外部リンクのアイキャッチの画質が良い場合という意味です。

只今スマホからですので、調べるのは厳しいです。

外部ブログカードは、以下の関数の部分なのかなという気はします。

https://github.com/xserver-inc/cocoon/blob/14df191e7a707f3ea3f1a069578497a6c2e77ef7/lib/blogcard-out.php#L275

間違っているかもしれませんけど。

後は詳しい方に・・・。

書き忘れました。

そもそもで申し訳ないですが。

スキン「SILK」のブログカードが、ご要望のものに近いかもしれないです。

最近「SILK」を確認しておりませんので、内部・外部共にどうなっていたか、はっきり覚えてはいないのですけれど。

何かの参考にはなるかもしれない気はします。

間違っていたら、すみません。

mk2さん

何度もありがとうございます。

いただいた情報をもとにトライしましたが、(私の勉強不足もあり)難しいですね。

内部リンクだけでも満足な形になったので、十分ではあるのですが、もう少しだけ頑張ってみようと思います。

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

最近「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

添付のエラーがあります。

●ご参考
取得サムネイル幅の変更前、変更後です。

何度もご返信くださり、ありがとうございます。

返信が遅くなってしまい、すみません。

以下をfunction.phpに追加すれば解決するとのことでしたが、添付のようなエラーが出てしまい、ページ自体が表示できなくなりました。

投稿者:: @chu-ya

add_filter('external_blogcard_image_width', THUMB320WIDTH); add_filter('external_blogcard_image_height', THUMB320HEIGHT);

どうやら、「THUMB320WIDTH」等を定義していない事によるエラーのようですが、解決方法はわかりますでしょうか。

勉強不足ですみません。

投稿者:: @chu-ya

外部サイト「奈良公園周辺のホテルランキング - じゃらんnet」のog:imageは300×225pxです。
親テーマCSSでwith:90%を、子テーマCSSの以下でサムネイル幅を変更しており。

外部サイトのサムネイル幅を600pxに拡大表示させる為、ボケるのは仕方なく、こればかりは頑張りようがないです。

少なくとも上記PHPを追加すれば、160×120pxに縮小されず。
元画像300×225pxとなる為、以前よりは改善され、少しはボケなくなりますが。

こちらの件もありがとうございます。このページのサムネイルがある程度ぼやけることは諦めましたが、参照元のページで高画質の画像が使われている場合にぼやけるのを防ぎたいと思っています。

投稿者:: @chu-ya

添付のエラーがあります。

本件もありがとうございます。

末尾以外のエラーは消すことができました。

PHPのエラーですが、WordPress自体は開きますか？
子テーマ内のfunctions.phpに追加しましたか？
THUMB320WIDTH、THUMB320HEIGHTは親テーマに定義されています。

WordPressは開きはしますが、サイトを立ち上げてもエラーメッセージしか表示されなくなります。

子テーマ内のfunctions.phpに記載しました。

投稿者:: @babychamp

WordPressは開きはしますが、サイトを立ち上げてもエラーメッセージしか表示されなくなります。

エラーメッセージは先ほど添付画像に貼り付けた二つだけでしょうか？他には出ていないのでしょうか。

また、親テーマを選択してlib/settings.phpファイルはありますよね？

おそらく、以下のような感じの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

https://github.com/WordPress/WordPress/blob/26464b0f82f2cc7a792b448c1aa1c4d8a446902b/wp-settings.php#L566

すみません、時間がありませんので、このまま離脱です・・・。

私が書いたSILKの部分をコード転記しただけで中途半端でした。すみません。
結果、同じ事言っている？

add_filter('external_blogcard_image_width', function(){
  return THUMB320WIDTH;
});
add_filter('external_blogcard_image_height', function(){
  return THUMB320HEIGHT;
});

みなさま

ありがとうございます。

返信が遅くなってしまい、申し訳ございません。

add_filter('external_blogcard_image_width', function(){
  return THUMB320WIDTH;
});
add_filter('external_blogcard_image_height', function(){
  return THUMB320HEIGHT;
});

上記のコードを追加したところ、エラーは出なくなりましたが、画質の改善はされませんでした。

もともと、内部リンクのブログカードをメインで使う予定だったので、外部リンクはなるべく、ブログカード表示しないという対応でいこうと思います。

みなさま、ご協力くださりありがとうございました。

投稿者:: @babychamp

上記のコードを追加したところ、エラーは出なくなりましたが、画質の改善はされませんでした。

添付のように取得画像のサイズは変わります。
キャッシュを一度クリアして再度確認してみて下さい。