WordPressのテーマを自作した際に生じた隙間について

経緯と解決方法を簡潔に記します。

《経緯》
Wordpressで新規サイト(当サイトとは別)を作ろうと思い立つ。
定石通り、まずHTMLとCSSで組み立ててからWordpress用にPHPファイルに置き換えていく。
あらかた成功したが、隙間なく配置されているはずの画像が僅かに間隔が開いてしまった。

図1 HTMLとCSSで組んだページのイメージ

図2 図1の状態でWordpress用にPHPファイルに移行

図3 図2の拡大

図3を見ての通り、配置された画像が互いに縦方向に隙間を作っています(赤丸の箇所:Chromeで2px、Firefoxで3px程度)。
また、画像Bと画像Cは横に並んでいますが、この間には隙間はありません。
もちろん置き換え前のHTMLファイルとCSSファイルの状態では隙間なく配置されています。

《まず試したこと》
適当な検索ワードでヒットしたサイトを縦覧。おおよそ以下の対処法が紹介されていた。

  1. 隙間を生じさせてそうなコード(margin / padding)やレイアウト構造の再点検。
  2. PHPファイルの保存時にエンコードをUTF-8N(いわゆるBOM無し)にする。
  3. top: 0;(参考)
  4. 空行やスペース文字の再点検
  5. 他にもあった気がするけど忘れた

多く見受けられたのは「ページトップに隙間ができた」というもので、これはWordpressの管理バーのいたずら。私の場合はこれには該当しません。

《解決へ》
こちらのサイトが参考になりました。
[CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ

まずは影響を受けているコードから改行や空白スペースを削除します。エレメントを含んでいる場合にはその要素に「font-size: 0;」を適用(子要素のためのリセット)します。

そこで私は、bodyに[ font-size: 0; ]と一行足してやったら一気に解決しました。

もちろんbodyではなく個々の場所に挿入する手もあるかもしれません。いろいろ試してみてください。参考になれば幸いです。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください