固定ページ内にギャラリーを使って画像を並べているのですが、キャプションを追加すると画像内下部にぼかしが入りそのぼかし上にキャプションが追加されます。

これを画像はそのままで画像外の直下にキャプションが来るようにしたいのですがどうしたらいいでしょうか？

Chat GPTに聞いて追加CSSを入れているのですが思うように変更できません。以下に追加CSSに入れたものを添付しておきます。この追加CSSでキャプション自体は画像下に表示されるのですが画像下部のぼかしがそのまま変化しません。画像自体も下の方が縮んで短くなってます。追加CSSは数回追加しています。

ギャラリーではなく単一画像の場合は思うような表示になります。

よろしくお願いします。

/* 単一画像とギャラリー画像のキャプションを統一 */
.wp-block-image figcaption,
.wp-block-gallery .wp-block-image figcaption,
.blocks-gallery-item figcaption {
position: static !important; /* 絶対配置を解除 */
background: none !important; /* 背景を削除 */
color: inherit !important; /* テキスト色を通常に */
font-size: 0.9em; /* 少し小さめ */
text-align: center; /* 中央寄せ */
margin-top: 0.5em; /* 画像との余白 */
line-height: 1.4; /* 行間を整える */
width: 100% !important; /* 画像幅いっぱいに */
display: block !important; /* ブロック要素にして統一 */
box-sizing: border-box; /* 余白計算を安定させる */
padding: 0; /* ギャラリーの余計なpaddingを無効化 */
}
/* ギャラリーキャプションの背景ぼかしを完全に消す */
.blocks-gallery-item::after,
.wp-block-gallery .wp-block-image::after {
content: none !important;
background: none !important;
display: none !important;
}
/* ギャラリーキャプションの背景や装飾をリセット */
.wp-block-gallery .wp-block-image figcaption,
.blocks-gallery-item figcaption {
background: none !important;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;
}
/* ギャラリーキャプションの配置を単一画像と統一 */
.wp-block-gallery .wp-block-image figcaption,
.blocks-gallery-item figcaption {
position: static !important; /* 画像内配置を解除し、通常のブロック要素に */
text-align: center !important; /* 文字を中央寄せ */
margin-top: 0.5em !important; /* 画像との間に余白を追加 */
font-size: 0.9em; /* 任意：単一画像に近い文字サイズに調整 */
color: inherit !important; /* 任意：色を本文と同じに */
}
/* ギャラリー画像のfigcaptionを通常のキャプション表示に */
.wp-block-gallery .wp-block-image figcaption,
.blocks-gallery-item figcaption {
position: static !important; /* 画像の上から外す */
bottom: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
max-width: 100% !important;
padding: 0.5em 0 !important;
margin: 0 auto !important;
text-align: center !important;
background: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: inherit !important;
}

/* Diverテーマが figcaption::after に付けてる半透明・ぼかし背景を無効化 */
.wp-block-gallery .wp-block-image figcaption::after,
.blocks-gallery-item figcaption::after {
content: none !important;
display: none !important;
background: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

/* 画像がキャプション分だけ縮むのを防ぐ（もし指定されていたら上書き） */
.wp-block-gallery .wp-block-image img,
.blocks-gallery-item img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}

 

tanaka

参加者

ギャラリーやめて単一画像で対応することにしましたので閉じます。

[投稿者]

返信