画像へのテキスト挿入時の画像の不具合 - 不具合報告

RE: 画像へのテキスト挿入時の画像の不具合

cameo — Sun, 16 Jun 2024 05:07:43 +0000

@chu-ya

早速のご回答ありがとうございます。

カバーブロックの仕様が理解できていませんでした。

次回以降は、まずは「Cocoonテーマに関する質問」に投稿させて頂きます。

ありがとうございました

RE: 画像へのテキスト挿入時の画像の不具合

大門未知子 — Sun, 16 Jun 2024 03:53:50 +0000

●お願い事項

本フォーラムは、エラー、動作不能の質問です。
使い方に伴う疑問は「Cocoonテーマに関する質問」にお願いします。

https://wp-cocoon.com/community/cocoon-theme/

RE: 画像へのテキスト挿入時の画像の不具合

大門未知子 — Sun, 16 Jun 2024 03:08:08 +0000

●回答

不具合ではありません、カバーブロックの仕様です。

Q：全体がグレーになる。

A：カバーブロックの設定で「オーバーレイの不透明度」となります。
この為、画像の上に色が重なります。
→不透明度をゼロにすれば透明になります。

2024-06-16_11h54_12.png

Q：元の画像が下に間延び。

A：カバーブロックは、カラム、投稿幅に最低高430pxのエリアに画像全体を収めます。
この為、2カラムの場合、横長画像は正方形になるのでは。
→画像をつまんで上に移動し、画像の高さを縮める。

7f60d3aec3e7cd85ebfbb6d165e26fea.png

私なら、現状の通りキャプションを使い、中央配置します。
画像の上に、文字が重なり見ずらいので。

カバーブロック自体のアスペクト比、カバー領域の設定ない？？
CSSを追加するしかないのか？

.entry-content .wp-block-cover {
/*画像比率*/
aspect-ratio: 4 / 3;
min-height: unset;
}

画像へのテキスト挿入時の画像の不具合

cameo — Sun, 16 Jun 2024 01:17:40 +0000

不具合・カスタマイズ対象ページのURL：https://tsuruya-farm.com/wp-admin/post.php?post=516&action=edit

相談内容：投稿ページで画像にブロックのカバーを使用してテキストを挿入しようとすると画像が下に間延びしてグレーがかった画像になってしまう

不具合の発生手順：

①２分割のカラムにそれぞれ画像を挿入
②画像に「ブロック」の「カバー」で画像上にテキストを挿入すると、元の画像が下に間延びして、画像自体がグレーぽくなってしまう

解決のために試したこと：この方法ではうまくいまないので、現在は「キャプション」を使用

----------------------------------------------
サイト名：つるや農園
サイト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.5.4
PHPバージョン：8.2.15
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.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.7.4.3
カテゴリー数：4
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：3383 バイト
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縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.3.2
All In One WP Security 5.3.0
BackWPup 4.1.0
Broken Link Checker 2.2.4
Broken Link Checker by AIOSEO 1.2.1
Category Order and Taxonomy Terms Order 1.8.2
Contact Form 7 5.9.5
Google Analytics for WordPress by MonsterInsights 8.27.0
MetaSlider 3.90.0
WP Multibyte Patch 2.9
----------------------------------------------

Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2024/04/tsuruya-farm-rogo.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.3.2
All In One WP Security 5.3.0
BackWPup 4.1.0
Broken Link Checker 2.2.4
Broken Link Checker by AIOSEO 1.2.1
Category Order and Taxonomy Terms Order 1.8.2
Contact Form 7 5.9.5
Google Analytics for WordPress by MonsterInsights 8.27.0
MetaSlider 3.90.0
WP Multibyte Patch 2.9
----------------------------------------------