WordPress記事中の画像とキャプションのスペースを詰める

投稿者: | 2021年2月28日

WordPress 使用の当ブログにてテーマへ替えた頃から、編集中の画面とは異なり、記事表示中の 画像 と キャプション との間に大きめの スペース が出来てしまうようになってしまいました。そのままではなんとも間の抜けた構成になってしまうので、 スタイルシート をカスタマイズして詰めることは出来ないか、試してみました。

まず、現在の構成は次の通りです。プラグインは他にも入れていますが、今回関連ありそうな部分のみを記述しています。

編集中の画面では、キャプションは問題無く画像直下に配置されるのですが、表示モードで開くとほぼ一行分のスペースが出来てしまいます。Iconic One テーマのデモサイトや他ユーザのサイトを確認しても同じ現象を見受けないので、テーマ単独の悪さでもなさそうです。

図1.画像とキャプションの間に生じる微妙な間隔

図1.画像とキャプションの間に生じる微妙な間隔

テーマCSSを編集すれば改善出来るのでしょうが、テーマをアップデートするとまたやり直しになるのでは、と思って控えていました。追加CSSを記述する方法であれば、テーマがアップデートされても残るようなので、CSS構成を解析してみます。

キャプション側の要素を修正

Firefoxのウェブ開発ツールでスタイルシートの適用状況を確認すると、キャプション上下に20pxのmarginが当たっているのが確認出来ました。下方はまだ理解出来るのですが、上方に同じだけあると、キャプションの意味を果たさない気がします。

図2.キャプション側のCSS構成

図2.キャプション側のCSS構成

画像側の要素を修正

同じく画像側も確認すると、EasyFancyBoxにより下方にのみmargin 10pxが当たっていました。

図3.画像側のCSS構成

図3.画像側のCSS構成

結論

WordPress管理画面の左メニューを次の遷移で進み、追加CSSの欄に今回追加するCSSを記述します。

「 外観 → CSS編集 → 追加CSS 」

図4.WordPress管理画面メニュー

図4.WordPress管理画面メニュー

図5.追加CSSカスタマイズ画面

図5.追加CSSカスタマイズ画面

「公開」ボタンを押して追加CSSを保存反映した後、ブラウザで開くと見込み通りキャプションが画像に寄りました。

図6.画像とキャプションの間を最適化

図6.画像とキャプションの間を最適化

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA