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

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

ブログカードを「写真が上、タイトルが下...
 
共有:
通知
すべてクリア

[解決済] ブログカードを「写真が上、タイトルが下」というようにCSSで変更したいです。

20 投稿
4 ユーザー
8 Likes
291 表示
babychamp
(@babychamp)
Active Member Registered
結合: 1か月前
投稿: 7
Topic starter  

不具合・カスタマイズ対象ページの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
----------------------------------------------


   
引用
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

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

●CSS

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

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

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

   
わいひら reacted
返信引用
babychamp
(@babychamp)
Active Member Registered
結合: 1か月前
投稿: 7
Topic starter  

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

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

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

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

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


   
返信引用
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 
投稿者:: @babychamp

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

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

 


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

babychampさん

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

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

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

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

 

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

【追記】

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


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

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

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

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

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

【訂正】

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


   
返信引用
babychamp
(@babychamp)
Active Member Registered
結合: 1か月前
投稿: 7
Topic starter  

chu-yaさん

mk2さん

 

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

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

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

【追記】

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

This post was modified 1か月前 by babychamp

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

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

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

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

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

後は詳しい方に・・・。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

書き忘れました。

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

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

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

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

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


   
わいひら reacted
返信引用
babychamp
(@babychamp)
Active Member Registered
結合: 1か月前
投稿: 7
Topic starter  

mk2さん

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

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

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

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


   
返信引用
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

最近「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
返信引用
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

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


   
わいひら reacted
返信引用
babychamp
(@babychamp)
Active Member Registered
結合: 1か月前
投稿: 7
Topic starter  

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

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

 

以下を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

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

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

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


   
返信引用
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

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


   
わいひら reacted
返信引用
babychamp
(@babychamp)
Active Member Registered
結合: 1か月前
投稿: 7
Topic starter  

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14165
 
投稿者:: @babychamp

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

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

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


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

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

 

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


   
返信引用
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

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

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

   
返信引用
babychamp
(@babychamp)
Active Member Registered
結合: 1か月前
投稿: 7
Topic starter  

みなさま

 

ありがとうございます。

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

 

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

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

 

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

 

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


   
返信引用
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 
投稿者:: @babychamp

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

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


   
返信引用
共有:

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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