画像にリンクを設定すると下に隙間ができてしまう - 不具合報告

RE: 画像にリンクを設定すると下に隙間ができてしまう

f-tomo — Sun, 05 Oct 2025 22:23:21 +0000

ありがとうございました。とりあえず目的は達成できましたので感謝申し上げます。

RE: 画像にリンクを設定すると下に隙間ができてしまう

ｍｋ２ — Sun, 05 Oct 2025 00:26:59 +0000

どういう経緯で、以下をCocoonが追加したのか思い出せないのですけれど。

.wp-block-image img {
  display: block;
}

Cocoon 2.3.6の「不具合修正」の項番5ではないかと思います。

Cocoon 2.3.6公開。ウィジェット表示機能にカスタム投稿タイプ追加。不具合修正など。
https://wp-cocoon.com/2-3-6/#toc6

.wp-block-imageのスタイル調整
https://github.com/xserver-inc/cocoon/commit/8aca57b7e6e706aa40d7259ca7074a751663316a

最初に挙げたCocoonのCSSがなければ、これは発生しない事象なのではないかと思います。
つまり、Cocoonの問題ではないかと、私は思います。（私見ですけれど）

RE: 画像にリンクを設定すると下に隙間ができてしまう

f-tomo — Sat, 04 Oct 2025 22:32:55 +0000

お二方回答ありがとうございます。不具合ではなく仕様ということですね。意図せず隙間ができでしまうのはなんだかなぁという気がしますが・・・。

CSSを適用してみたところ隙間はなくなりましたが、これらのCSSを適用することでデメリットはありますか？

RE: 画像にリンクを設定すると下に隙間ができてしまう

大門未知子 — Sat, 04 Oct 2025 16:46:34 +0000

Cocoonの不具合ではありません。

原因

「画像」ブロックをリンク付きにした場合、画像がタグで囲まれます。
タグはデフォルトでinline-blockで表示されます。
inline-blockの特性上、line-heightが効くため、画像の上下に余白（行間）ができることがあります。
結果として、画像とテキスト間に予期しない隙間が発生します。

対策

囲んでいるタグをblockに変更します。

.wp-block-image>a {
display:block;
}

2025-10-05_01h38_05.png

2025-10-05_01h39_20.png

RE: 画像にリンクを設定すると下に隙間ができてしまう

ｍｋ２ — Sat, 04 Oct 2025 15:09:46 +0000

WordPressのものが、干渉しているように思います。

8c406731c276bbbe2649c7eb20eb336e.JPG

これをunsetすれば、良さげに思いますけれど。（試してはいませんが）

.wp-block-image>a {
    display: unset;
}

画像にリンクを設定すると下に隙間ができてしまう

f-tomo — Sat, 04 Oct 2025 02:30:48 +0000

本文の画像にメディアリンクを設定すると下に隙間ができてしまいます。キャプションや下の文章などが下にずれてしまうため、隙間をなくしたいです。

参考URL: https://kameisatoshi.website/?p=257

----------------------------------------------
サイト名：てすとさいと
サイトURL：https://kameisatoshi.website
ホームURL：https://kameisatoshi.website
コンテンツ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.3
PHPバージョン：8.4.3
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36 Edg/140.0.0.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br, zstd
言語：ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.8
カテゴリー数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：204 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
----------------------------------------------