画像キャプションの有無で起きる文字幅の調整 - CSSカスタマイズ相談

RE: 画像キャプションの有無で起きる文字幅の調整

kuma — Fri, 01 Mar 2019 13:07:12 +0000

解説と参考になるサイトをありがとうございます。

提案されたようにすると、キャプション幅のバランスが悪くなってしまったのでやめました。

いろいろ試行錯誤をした結果、

.wp-caption {
margin: 0 0 23px;
}

で、理想的になりました。たぶん普通の人から見たら「いやいや、変わってないじゃん！」と言われるレベルですが、とりあえずできてよかったです。

いつも本当にありがとうございます！

わいひら — Fri, 01 Mar 2019 11:31:17 +0000

それは、デフォルトでimg要素はインライン要素だからです。
インライン画像だと下に隙間ができるのは仕様みたいなもんです。

画像をブロック要素に変更すれば、問題は解決しますが、全ての画像がブロック要素になってしまい、他の部分の表示が変わってしまう恐れがあります。

.entry-content img {
  display: block;
}

その他に以下に書かれているような方法で対処するしかないです。

http://ideahacker.net/2013/12/03/6983/

vertical-align: bottom;を利用する方法が良いのかも。

kuma — Thu, 28 Feb 2019 15:52:16 +0000

失礼しました。取り急ぎで公開させていただきます。

一枚目にはキャプションをつけ、二枚目にはつけませんでした。ミリ単位ですが、幅を調整したいと思っています。

わいひら — Thu, 28 Feb 2019 13:15:58 +0000

出来れば該当ページのURLを提示していただければと思います。

kuma — Thu, 28 Feb 2019 05:49:09 +0000

いつもお世話になっております。

すごく細かいことなのですが、画像にキャプションをいれたときといれないときで、その後の文字幅に違いがでてそれが地味に気になってしまいます。

デスクトップ表示では、いれない方がよく見え、モバイル表示ではいれたほうがよく見えます。

ということで、入れたときと入れないときで(毎回キャプションを入れることはないので)、メディアクエリを使いつつ、幅をpaddingで調整しようと考えています。

ですが、画像の下幅を指定するコード?と、キャプションの下幅を指定するコードがわかりません。

よろしければ教えていただけると助かります。