CSSカスタマイズ相談 - Cocoon フォーラム https://wp-cocoon.com/community/customs/ Cocoon ディスカッション掲示板 ja Fri, 15 May 2026 22:55:02 +0000 wpForo 60 サイドメニュー（過去のブログ）の表示方法のカスタマイズ https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%ef%bc%88%e9%81%8e%e5%8e%bb%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%ef%bc%89%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ae%e3%82%ab/ Wed, 06 May 2026 02:06:32 +0000 サイドメニュー（過去のブログ）は標準では年月別に表示されていますが、数が増えてきたので、出来れば過去の年（2024年、2025年）はそれぞれ１カテゴリに集約表示（年をクリックすると月別表示）にして2026年は現状の月別表示に変更することは可能でしょうか？

2026年５月　2026年4月　2026年３月　2026年２月　2026年１月　2025年（１年分）　2024年（１年分）

 

URL：https://tsuruya-farm.com/

----------------------------------------------
サイト名：つるや農園
サイトURL：https://tsuruya-farm.com
ホームURL：https://tsuruya-farm.com
コンテンツ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.9.4
PHPバージョン：8.2.30
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.9.1
カテゴリー数：5
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：3587 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2024/04/tsuruya-farm-rogo.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.7
All-In-One Security (AIOS) 5.4.7
BackWPup 5.6.9
Category Order and Taxonomy Terms Order 1.9.5
ClickSocial - Social Media Scheduler & Poster 1.3.1
Contact Form 7 6.1.5
Google Analytics for WordPress by MonsterInsights 10.1.3
GTM4WP - A Google Tag Manager (GTM) plugin for WordPress 1.22.3
Meta pixel for WordPress 5.0.1
MetaSlider Slideshow 3.109.0
PushEngage 4.2.1
Smash Balloon Instagram Feed 6.10.1
WPCode Lite 2.3.5
WP Multibyte Patch 2.9.3
----------------------------------------------

]]> CSSカスタマイズ相談 cameo https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%ef%bc%88%e9%81%8e%e5%8e%bb%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%ef%bc%89%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ae%e3%82%ab/ アイコンボックスのアイコンが左端に固定されない。 https://wp-cocoon.com/community/customs/%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%8c%e5%b7%a6%e7%ab%af%e3%81%ab%e5%9b%ba%e5%ae%9a%e3%81%95%e3%82%8c%e3%81%aa/ Tue, 28 Apr 2026 22:51:47 +0000 不具合・カスタマイズ対象ページのURL：https://gardening-beginner.ryo-yasukawa.com

相談内容：スマホ画面ではアイコンボックスのアイコンが左端に固定されず、上に表示されます。これを左端に固定したいです。

不具合の発生手順：

解決のために試したこと：

ChatGPTに相談し、以下のCSSを貼りましたが表示は変わらずでした。

/* Cocoonのボックス系を全部左寄せ */
:is(
  .memo-box,
  .info-box,
  .warning-box,
  .alert-box,
  .comment-box
){
  display: flex;
  align-items: flex-start; 
 
/* 上揃え（中央ならcenter） */
}
 
/* アイコン部分 */
:is(
  .memo-box,
  .info-box,
  .warning-box,
  .alert-box,
  .comment-box
) .box-icon {
  flex-shrink: 0;
  margin-right: 10px;
}
 
/* テキスト部分 */
:is(
  .memo-box,
  .info-box,
  .warning-box,
  .alert-box,
  .comment-box
) .box-content {
  flex: 1;
}

 


環境情報：----------------------------------------------
サイト名：園芸初心者が、鉢で果樹栽培を始めてみた。
サイトURL：https://gardening-beginner.ryo-yasukawa.com
ホームURL：https://gardening-beginner.ryo-yasukawa.com
コンテンツ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
スキン：/wp-content/themes/cocoon-child-master/skins/skin-template/style.css
WordPressバージョン：6.9.4
PHPバージョン：8.3.30
データベース：10.5.27
サイト言語：ja
タイムゾーン：Asia/Tokyo
HTTPS：有効
マルチサイト：無効
WP_DEBUG：無効
DISABLE_WP_CRON：無効
WP_CACHE：無効
DISALLOW_FILE_EDIT：無効
パーマリンク構造：/%postname%/
ホームページ表示：最新の投稿
PHPメモリ上限：256M
WPメモリ上限：40M
WP管理画面メモリ上限：256M
PHP最大実行時間：30秒
PHP max_input_vars：1000
アップロード上限：30M
POST上限：30M
PHP拡張：curl:有効, mbstring:有効, gd:有効, imagick:有効, xml:有効, zip:有効, intl:有効, exif:有効
画像エディタ：EWWWIO_Imagick_Editor
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：en,ja;q=0.9,en-US;q=0.8,fr;q=0.7,it;q=0.6
----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.2.7
カテゴリー数：5
タグ数：13
投稿数：6
固定ページ数：3
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：847 バイト
functions.phpサイズ：1464 バイト
----------------------------------------------
Gutenberg：0
Font Awesome：4
Auto Post Thumbnail：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
簡単SSL：0
コードハイライト：0
----------------------------------------------
canonicalタグ：1
カテゴリnoindex：0
タグnoindex：1
----------------------------------------------
サイドバー位置：sidebar_right
サイドバー表示：display_all
メインカラム幅：デフォルト
サイドバー幅：デフォルト
----------------------------------------------
全広告表示：1
AdSense表示方法：
----------------------------------------------
GA4：設定済み
GTM：未設定
Search Console：設定済み
----------------------------------------------
ブラウザキャッシュ有効化：1
CSS縮小化：0
JavaScript縮小化：1
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools 5.9.2
Broken Link Checker 2.4.8
Contact Form 7 6.1.5
EWWW Image Optimizer 8.5.0
UpdraftPlus - Backup/Restore 1.26.3
XML Sitemap Generator for Google 4.1.23
----------------------------------------------

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

]]> CSSカスタマイズ相談 RYO-san https://wp-cocoon.com/community/customs/%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%8c%e5%b7%a6%e7%ab%af%e3%81%ab%e5%9b%ba%e5%ae%9a%e3%81%95%e3%82%8c%e3%81%aa/ ヘッダーメニューとスライダー間の余白削除について https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%a8%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e9%96%93%e3%81%ae%e4%bd%99%e7%99%bd%e5%89%8a%e9%99%a4%e3%81%ab%e3%81%a4/ Wed, 15 Apr 2026 04:27:44 +0000 【対象ページのURL】

https://amateur-kasamatsu.com/

【相談内容】
ヘッダーメニューとスライダー間にある白色の余白を完全になくしたいです。
勉強不足によるものと思いますが、余白をなくす方法をご教授頂きたいです。

スライダーは、プラグイン「Smart Slider3」を使って設置しています。

過去の同様の投稿もいくつか拝見し、デベロッパーツールでCSSを確認してみて、
上記URLのページの追加CSS入力欄に以下のコードを入力し、
余白は狭くなりましたが完全になくすことができていません。

.main{
　border-width: 0;
　padding-top: 0;
　padding-bottom: 0;
}

.content{
　margin-top: 0;
}

@media screen and (max-width: 834px) {
    main.main, div.sidebar {
        padding-top: 0;
        padding-bottom: 0;
    }
}

 

余白を無くす目的以外で、コメントアウトに記載の目的のため、
以下のコードを→→内に記載しています。
(影響を及ぼしているかもしれないため記載)

/*ヘッダーロゴ左寄せ*/
.site-name, .site-name-text-link{
	padding-left: 0;
	padding-right: 0;
}

@media(max-width:1023px){
	.logo-menu-button, .menu-button{
		position:relative;
	}
	
.site-logo-image{
		position: absolute;
		left: 0px;
		top: 0px;
	}
	
/*モバイルヘッダー色変更*/
.mobile-header-menu-buttons.mobile-menu-buttons .menu-button {
  color: #ffffff;
  background-color: #272727;
}

/*ハンバーガーメニュー色変更*/
.fa-bars::before, .navi-menu-caption{
	color:#ffffff;
}

 

 


【環境情報】

----------------------------------------------
サイト名：amateur笠松
サイトURL：https://amateur-kasamatsu.com
ホームURL：https://amateur-kasamatsu.com
コンテンツ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.9.4
PHPバージョン：8.3.30
データベース：8.0.44
サイト言語：ja
タイムゾーン：Asia/Tokyo
HTTPS：有効
マルチサイト：無効
WP_DEBUG：無効
DISABLE_WP_CRON：無効
WP_CACHE：無効
DISALLOW_FILE_EDIT：有効
パーマリンク構造：/%postname%/
ホームページ表示：固定ページ
PHPメモリ上限：300M
WPメモリ上限：300M
WP管理画面メモリ上限：300M
PHP最大実行時間：120秒
PHP max_input_vars：1000
アップロード上限：100M
POST上限：100M
PHP拡張：curl:有効, mbstring:有効, gd:有効, imagick:有効, xml:有効, zip:有効, intl:有効, exif:有効
画像エディタ：Imagick
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.1.1
カテゴリー数：1
タグ数：0
投稿数：1
固定ページ数：6
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：5
Auto Post Thumbnail：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
簡単SSL：0
コードハイライト：0
----------------------------------------------
canonicalタグ：1
カテゴリnoindex：0
タグnoindex：0
----------------------------------------------
サイドバー位置：sidebar_right
サイドバー表示：display_all
メインカラム幅：800px
サイドバー幅：デフォルト
----------------------------------------------
全広告表示：1
AdSense表示方法：
----------------------------------------------
GA4：未設定
GTM：未設定
Search Console：未設定
----------------------------------------------
ブラウザキャッシュ有効化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Broken Link Checker 2.4.8
Really Simple Security 9.5.9
Site Kit by Google 1.176.0
Smart Slider 3 3.5.1.34
TinyPNG - JPEG, PNG & WebP image compression 3.6.12
UpdraftPlus - Backup/Restore 1.26.2
Wordfence Security 8.1.4
WP Multibyte Patch 2.9.3
----------------------------------------------
停止中のプラグイン：
Akismet Anti-spam: Spam Protection 5.6
----------------------------------------------

]]> CSSカスタマイズ相談 vamo https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%a8%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e9%96%93%e3%81%ae%e4%bd%99%e7%99%bd%e5%89%8a%e9%99%a4%e3%81%ab%e3%81%a4/ Google タグ マネージャーの挿入方法 https://wp-cocoon.com/community/customs/google-%e3%82%bf%e3%82%b0-%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%81%ae%e6%8c%bf%e5%85%a5%e6%96%b9%e6%b3%95/ Sun, 21 Dec 2025 01:12:09 +0000 初歩的な質問ですいませんが、cocoonで自サイトにGoogle タグ マネージャーのタグを挿入する際の方法がわからないのでアドバイス頂けると助かります

Cocoon Childのどれかのファイルを編集？

下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。
1. このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。
2. 開始タグ <body> の直後にこのコードを次のように貼り付けてください。
 
環境設定
----------------------------------------------
サイト名：つるや農園
サイトURL：https://tsuruya-farm.com
ホームURL：https://tsuruya-farm.com
コンテンツ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.9
PHPバージョン：8.2.20
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.8
カテゴリー数：5
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：3587 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2024/04/tsuruya-farm-rogo.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.6
All-In-One Security (AIOS) 5.4.4
BackWPup 5.6.1
Category Order and Taxonomy Terms Order 1.9.3
ClickSocial - Social Media Scheduler & Poster 1.3.1
Contact Form 7 6.1.4
Google Analytics for WordPress by MonsterInsights 9.11.0
MetaSlider 3.104.0
PushEngage 4.2.0
Smash Balloon Instagram Feed 6.10.0
WP Multibyte Patch 2.9.3
----------------------------------------------
]]> CSSカスタマイズ相談 cameo https://wp-cocoon.com/community/customs/google-%e3%82%bf%e3%82%b0-%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%81%ae%e6%8c%bf%e5%85%a5%e6%96%b9%e6%b3%95/ fastviewカスタマイズの相談です https://wp-cocoon.com/community/customs/fastview%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%ae%e7%9b%b8%e8%ab%87%e3%81%a7%e3%81%99/ Tue, 09 Dec 2025 00:59:44 +0000 不具合・カスタマイズ対象ページのURL：https://tanotsuku.com/

相談内容：
fastviewで動画再生後→タイピング文字→下に重なって画像を表示したいのですがうまくいきません
ご教示よろしくお願い致します

不具合の発生手順：
画像が動画の上に重なってしまう

解決のために試したこと：
カスタムcssを書き直しました

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：mac
----------------------------------------------
サイト名：たのしいモノコトをツクる「たのツク！」
サイトURL：https://tanotsuku.com
ホームURL：https://tanotsuku.com
コンテンツ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.9
PHPバージョン：8.0.30
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br, zstd
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.3.5
カテゴリー数：15
タグ数：48
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：848 バイト
functions.phpサイズ：3391 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：1
Retina：0
ホームイメージ：https://choku16.com/wp-content/uploads/tanotsukulogo_blue.png
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.6
All-In-One Security (AIOS) 5.4.4
All in One SEO 4.7.1.1
Autoptimize 3.1.14
Broken Link Checker by AIOSEO 1.2.1
Contact Form 7 6.1.4
Display Posts 3.0.3
Google Analytics for WooCommerce 2.1.19
Google Analytics for WordPress by MonsterInsights 9.10.0
Google for WooCommerce 3.5.0
List category posts 0.93.1
Mailchimp for WooCommerce 5.6
OptinMonster 2.16.5
Pinterest for WooCommerce 1.4.23
Site Kit by Google 1.167.0
UserFeedback Lite 1.1.1
WooCommerce 10.3.6
WooPayments 10.2.0
WPForms Lite 1.9.1.1
WP Super Cache 3.0.3
----------------------------------------------

]]> CSSカスタマイズ相談 choku16 https://wp-cocoon.com/community/customs/fastview%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%ae%e7%9b%b8%e8%ab%87%e3%81%a7%e3%81%99/ コンテンツ上部に動画を入れたい https://wp-cocoon.com/community/customs/%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e4%b8%8a%e9%83%a8%e3%81%ab%e5%8b%95%e7%94%bb%e3%82%92%e5%85%a5%e3%82%8c%e3%81%9f%e3%81%84/ Fri, 10 Oct 2025 03:53:44 +0000 株式会社SU

 

フロントページにブロックで動画を、自動再生、ループ再生で入れました。

ですが、固定ページだと上下左右に余白ができてしまいます。

理想はヘッダー下に左右の余白もなくフルで載せたいので、ウィジェットのコンテンツ上部に入れたいと思うのですが、その場合は自動再生、ループ再生はできないのでしょうか？

 

どのようにすればできますでしょうか

理想は添付画像のようにメニューバーの下に自動再生、ループ再生の動画が来るイメージです

 

]]> CSSカスタマイズ相談 karen https://wp-cocoon.com/community/customs/%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e4%b8%8a%e9%83%a8%e3%81%ab%e5%8b%95%e7%94%bb%e3%82%92%e5%85%a5%e3%82%8c%e3%81%9f%e3%81%84/ 初歩的な質問で申し訳ないです_2 https://wp-cocoon.com/community/customs/%e5%88%9d%e6%ad%a9%e7%9a%84%e3%81%aa%e8%b3%aa%e5%95%8f%e3%81%a7%e7%94%b3%e3%81%97%e8%a8%b3%e3%81%aa%e3%81%84%e3%81%a7%e3%81%99_2/ Sun, 31 Aug 2025 10:39:29 +0000 2点あります
質問1.ヘッダーの下のSNS系のアイコンを消したいです方法はありますか？

質問2.JIN:Rデモページ風（事務所向け）を使用させていただいています、全体的にカラーが設定されていると思うのですが変更する方法がわかりません

よろしくお願いいたします

 

]]> CSSカスタマイズ相談 net.cozo https://wp-cocoon.com/community/customs/%e5%88%9d%e6%ad%a9%e7%9a%84%e3%81%aa%e8%b3%aa%e5%95%8f%e3%81%a7%e7%94%b3%e3%81%97%e8%a8%b3%e3%81%aa%e3%81%84%e3%81%a7%e3%81%99_2/ 関連記事のサムネイルをトリミングせずに表示したい https://wp-cocoon.com/community/customs/%e9%96%a2%e9%80%a3%e8%a8%98%e4%ba%8b%e3%81%ae%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%82%92%e3%83%88%e3%83%aa%e3%83%9f%e3%83%b3%e3%82%b0%e3%81%9b%e3%81%9a%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97/ Fri, 22 Aug 2025 12:44:10 +0000 Cocoonを愛用させていただいております。ありがとうございます。

関連記事のサムネイルをトリミングなしで表示したいです。

縦型3列の表示で、縦長の画像を大きく全て表示したいです。

高さが不揃いになり統一感がなくても構いません。

どのようなコードを書けばよいかご教示いただけましたら幸いです。

 

不具合のサイト　https://hurubitaie.com/garden_521

 

・やってみたこと

1) 設定＞メディア＞「サムネイルを実寸法に切り抜く (通常は相対的な縮小によりサムネイルを作ります)」のチェックは外しております。

2) style.cssに下記のコードを入れてみましたが、縦長の画像が全て表示されたものの、

高さが一定であるため、画像が小さく見えてしまいます。画像の左右の余白はなしにしたいです。

img.related-entry-card-thumb-image.card-thumb-image.wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

3）こちらに質問するのに、下記のチェックを外したところ、なぜか縦型1列の表示になりました。

　　cocoon設定＞高速化＞CSSを縮小化する（チェックを外しました）

　　cocoon設定＞高速化＞JavaScriptを縮小化する（チェックを外しました）

 

　　でも、縦画像が全て表示されました。この画像サイズで3列にするのが理想です。

　　画像を大きく見せたいので、縦の長さが均一でなくて構いません。

　　

最近、cocoonやphpをアップグレードしたのですが、アップグレードする前は縦型3列で

縦画像もトリミングされることなく大きく表示されていたのですが、アップグレードしたことによって、

トリミングされてしまいました。。

 

自分はcssやfunctions.phpに詳しくありません。。

なにとぞよろしくお願いいたします。

 

サイトの環境情報

----------------------------------------------
サイト名：古びた家
サイトURL：https://hurubitaie.com
ホームURL：https://hurubitaie.com
コンテンツ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.8.2
PHPバージョン：8.3.21
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.7.1
カテゴリー数：9
タグ数：1
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.8
style.cssサイズ：7039 バイト
functions.phpサイズ：1370 バイト
----------------------------------------------
Gutenberg：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：1
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.6.1
Advanced Responsive Video Embedder for Rumble, Odysee, YouTube, Vimeo, Kick ... 10.6.14
Akismet Anti-spam: Spam Protection 5.5
All-in-One WP Migration and Backup 7.97
Broken Link Checker 2.4.6
Category Order and Taxonomy Terms Order 1.9
Converter for Media 6.2.2
Edit Author Slug 1.9.2
Head, Footer and Post Injections 3.3.2
Health Check & Troubleshooting 1.7.1
Intuitive Custom Post Order 3.1.5.1
PHP Compatibility Checker 1.6.3
Regenerate Thumbnails 3.1.6
Simple Image Sizes 3.2.4
UpdraftPlus - Backup/Restore 1.25.7
WebSub (FKA. PubSubHubbub) 3.2.1
WP Fastest Cache 1.3.8
WPFront Scroll Top 3.0.0
WP Multibyte Patch 2.9.2
----------------------------------------------

]]> CSSカスタマイズ相談 nobu5555 https://wp-cocoon.com/community/customs/%e9%96%a2%e9%80%a3%e8%a8%98%e4%ba%8b%e3%81%ae%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%82%92%e3%83%88%e3%83%aa%e3%83%9f%e3%83%b3%e3%82%b0%e3%81%9b%e3%81%9a%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97/ コードのコピペができない https://wp-cocoon.com/community/customs/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%82%b3%e3%83%94%e3%83%9a%e3%81%8c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/ Mon, 18 Aug 2025 10:33:06 +0000 こんにちは、コードのコピペができないのですが、
どうしたら良いのか、わかる方がいたら質問です。

ART+BEAT MANIFESTOを運営されているchu-yaさんが作成された「メイド・イン・ヘブン」を（今回リニューアル作業で）使用しています。
そこで、カスタイマイズしたいのですが
コードのコピペができないので困っています。

どなたか教えてください。
https://ss1.xrea.com/chuya.s239.xrea.com/temp/change-recommended-cards-design/#

]]> CSSカスタマイズ相談 QOOPY https://wp-cocoon.com/community/customs/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%82%b3%e3%83%94%e3%83%9a%e3%81%8c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/ RSS記事一覧を表示するショートコードについて https://wp-cocoon.com/community/customs/rss%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/ Sun, 17 Aug 2025 17:02:44 +0000 「RSS記事一覧を表示するショートコードの利用方法（https://wp-cocoon.com/rss-shortcode/）」
こちらの記事を参考にRSS記事一覧をショートコードを使って作成したんですが、
記事タイトルと抜粋分と日付けが表示さています。
ここにサイト（ブログ）名も表示させたいんですが、やり方分かる方おられますか？
よろしくお願いいたします。

]]> CSSカスタマイズ相談 aqvi https://wp-cocoon.com/community/customs/rss%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/