サイト制作をしていて謎の余白が出てしまうことがあります。本当は謎ではないんですが…
サイト上の意図しない隙間ができる主な原因はコリスさんの記事にまとまっているのでご参照下さい。ここではWordPressで実際起きた事例をご紹介します。
参考 ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめコリスheadに全角スペース
「Head, Footer and Post Injections」というheadやfooterにscriptやメタタグを簡単に追加出来るプラグインがあります。クライアント様のカスタマイズでこのプラグインでコードをhead内に追加するときに誤って全角スペースを入れてしまい、謎の余白がサイトの上部に出来てしまったという事例がクライアント様のサイトでありました。
Head, Footer and Post Injections
余白が出来た状態
自分のブログで再現してみました。このように余計な隙間が出来てしまいます。
原因はheadに追加するテキストエリアに全角スペースが入ってしまったことです。
テキストエディタだと全角のスペースがあればすぐ気付くと思うんですが、WordPressの管理画面で作業してしまうとこういったミスが出やすいです。
ただそのクライアント様のサイトのテーマはSANGOで、そもそもSANGOでは「headにコードを追加する機能」は標準であるので、この「Head, Footer and Post Injections」プラグインは要らないです。
外観>カスタマイズ>詳細設定>headタグ内にコードを挿入からAdSenseのコードやGoogle Search Consoleのオーナー認証のコードなどを追加出来ます。
functions.phpからheadにコードを追加する
またSANGOのようにheadにコードを追加する機能がないテーマでも以下のようにfunctions.phpからheadに要素を追加することが出来ます。
//headにタグを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo 'ここにhead内に出力したい内容';
}
「BOM」付きのUTF-8が原因
他に考えられる原因はheader.phpやfunctions.phpに余計なスペースが入っている場合です。phpファイルをUTF-8で保存した時のBOMが原因だそうです。これはメモ帳などで編集・保存したときによく起こります。
私もphpではないですが、メモ帳でコーディングして隙間が出来てしまった経験があります。Windowsのメモ帳ではBOM無しのUTF-8Nで保存出来ないので、terapadや他のエディタで編集保存しましょう。
参考 WordPressで上部に余白が…UTF-8の保存方法とBOMが原因。本能ハックBOMとは、UnicodeのUTF-16など16ビット幅のエンコーディング方式において、エンディアンを指定するためにファイルの先頭に記入される16ビットの値。
http://e-words.jp/w/BOM.html
余計な隙間、余白ができる原因は他にもあると思いますので、別の原因がわかり次第、この記事に追加していきます。