ゆくりえのブログのヘッダー上部に謎の余白がはいり背景画像とヘッダー箇所に余白が表示されてめだつ。SuiteXでそのように表示されているが、テストサイトのロリポップでは大丈夫
ctrl + Aでちぇっくすると確かにスペースがはいっている。
header.phpのすべての余白を削除しながらコードを整えたら解消された。
テーマを自作、もしくはカスタマイズしていて、サイトの上部に覚えのない余白があると非常にもやもやします。せっかく綺麗に仕上げたテーマもしまりませんし、デザインによっては余白のせいで崩れてしまうことも。そうなると大問題です。たかが余白、されど余白。
当時この現象で困りましたので、同じように困っている方のヒントになればと記事にしてみました。
以下は WordPress や PHP などのプログラムエラーが原因ではないことを前提としたまとめです。
何かトラブルがあったら、まずはデバッグモードをONにしてエラーを確認することをお勧めします。
まずは余白の正体をチェック
まず文字が余白の原因かどうかをチェックします。
サイト上で、winなら ctrl + A、macなら command + A をして文字全てを選択状態にします。
余白の正体がスペース文字であれば、通常文字と同様にハイライトされて色が変わります。
（この辺りはブラウザによるところもあります。筆者はFirefox、Chromeで確認）
ケース別対策まとめ
余白の原因は文字とスタイルの２種類に分けられますが、どこが大元かを一つずつ調べます。
まずは、上記のチェックで原因が「スペース文字」でない場合（ハイライトされない場合）から見ていきましょう。
ケース１： CSSが原因
一番上のチェックで余白部分の色が変わらないのであれば文字が原因ではない可能性があるため、CSSを確認してみます。
padding、marginなど、余白関連のスタイルをチェックしてみるといいかもしれません。
例えば、height を指定した上で padding で上下に余白を持たせるような記述は
box-sizing の設定によっては想定以上の高さになってしまったり。
ブラウザにはデベロッパーツールがついているものもありますので、
そちらを活用しながら、ブラウザ上でリアルタイムにスタイルのチェックをするといいかもしれません。
文字が原因の場合は……↓
ケース２： テーマファイルがBOMありで保存されている
テーマファイルの文字コードは大抵UTF-8が使われていますが、FTPから編集する際などに
エディタによっては 「UTF-8 BOMあり」 や 「SJIS」 など異なった文字コードで保存されてしまうケースがあります。
BOMありでは最上部に空白が混入してしまうため、ヘッダー上部に余白ができてしまいます。
テーマファイルの文字コードを確認してみましょう。
「UTF-8 BOMなし」 もしくは 「UTF-8」 にして保存しなおせばOKです。
テーマファイル全て文字コードが正しい場合は……↓
ケース３： header.php にスペース文字が入っている
しれっとスペース文字が入っているかもしれません。
念のため再確認を！
どうにも入っていない場合は……↓
ケース４： テーマファイルに wp_footer() がない
ログインしていないときには余白はなく、ログインしているときのみ現れる場合、
テーマファイルに アクションフック が抜けている可能性があります。
1 | <?php wp_footer(); ?> |
これが抜けると他にもいろいろな不具合が起こりうるので footer.php に記述をお忘れなく。
上部余白の正体は「ログイン中にのみ表示される管理者用メニュー」用の余白です。
それでも解決しない場合は……↓
ケース５： functions.phpに全角スペースが入っている
functions.php のPHPタグの外に全角スペースが入っていると
ヘッダーに１行分の余白ができることがあります。（デザインによります）
/テーマフォルダ/functions.php
1 | //<- ココ |
2 | <?php |
3 |
4 | function xxx() { |
5 | ... |
意外と気づきにくいです。
テーマファイルの中でも functions.php は header.php よりも早く呼び出されるファイルです。
余白データが出力されてからヘッダーが出力されることにより、上部の謎の余白が生まれます。
どう探してもテーマ内に空白となる記述がない場合、functions.php を確認してみましょう。
それでもそれでも解決しない場合は……↓
ケース６： 使用中のプラグインが原因
管理画面から問題のテーマを別のテーマに変更しても余白が存在する場合は、もしかしたらプラグインが原因かもしれません。一つ一つプラグインをOFFにして、余白がなくなるかを確認します。
それでもダメなら…
これでも解決しない場合は…
新たにWordPressを別の場所へインストールして、真っ新なWordPressで問題のテーマを有効化して
チェックしてみるといいかもしれません。
それで余白が消えた場合、テーマでもプラグインでもなく、WordPress本体や、
サーバーが違う場合サーバーに原因があるのかもしれません。
マッチングサイト構築、プラグイン開発、PHP開発ならmediabox
余白対策のまとめ
テーマによっては、カスタマイズの最中にうっかりスペースが入ってしまうだけで現れてしまうのが上部の余白です。
筆者が最初この問題にぶつかった時は CSS や header.php にばかり目が行っていました。
その時の原因は functions.php でした。
こういう問題が出た時はテーマファイル内全てを全角や半角スペースで全体検索するのがいいですね。
ハイライトされてわかりやすいです。
あとは、functions.php などのHTMLが混在していないphpファイルについては閉じタグを使わないことをお勧めします。
下だけでも妙なスペースが入る余地が無くなります。ただ開始タグは使わざるを得ないので、開始タグ前だけ気をつけましょう。
気をつけるようにしてからはもう随分と出会っていない問題ですが、同じように詰まってしまった方へのヒントになれれば幸いです。
WordPressのサイト制作、保守運用にお困りの方はお気軽にご相談ください。
