ワードプレスでサイト上部に空白の隙間が出た場合の対処法

2016年 05月 30日

こんにちは、ユキネコWEBデザインの新井です！ 
先日ホームページを色々改修して、ワードプレスの機能も活用してこうしてコラムのページも作る事が出来たんですけど、今回のカスタマイズにはまぁ色々大変な事もありまして…！

今回はワードプレスでサイトを制作していたら、なぜか急にページの上部に謎の空白が生まれてしまった！そんな時の対処法を紹介しようと思います(´・∀・`)

これが実際に私のカスタマイズ中に起こった症状ですね。サイトの上部に謎の空白が出来てしまいました。
最初はそんな隙間なかったのに、なぜかいきなり隙間が生まれたんですよね、これはどうしたものか…、と調べました。

管理バーの表示、という機能が原因？

ワードプレスにログインしてサイトを見ると、サイト上部にツールバーが表示されていませんか？どうやらこのツールバーが、サイト上部に隙間を生む原因になったりするとか…。
このツールバーはバージョン3.1から追加された機能で勝手に付くみたいですね。公式でも隙間が生まれるバグがあるという注意は出ているようです。

ではこの管理バーを非表示にしてみましょう。
まず管理画面の右上の『こんにちは、○○○○さん！』にマウスオンして、『プロフィールを編集』をクリックしましょう。
その中に『サイトを見るときにツールバーを表示する』というチェックボックスがあるハズなので、それをクリックしてチェックを外しましょう。これでサイト上部のツールバーが非表示になり、隙間のバグも起こりません！

function.phpやheader.phpの余計な空白や改行を消去してみる

先ほどの管理バーを消去する方法で大半はこの隙間が解消されるみたいなのですが、私は解消されませんでした！何故だ！
そこで他にも調べてみたところ、どうやら他のファイルに無駄な文字や空白が入っているのではないか？という事に…。

調べたところまず確認するのは『header.php』とな。何やら”DOM”という文字コードの情報が悪さをしているのではないか、というコメントを見つけました。
header.phpを開いて1番最初にピリオドが付いている事があるそうです。そのピリオドを削除すれば、サイト上部の隙間も解除できるようです。

しかし私のheader.phpにはピリオドはありませんでした…。

次に確認したのは、『function.php』。このファイルはワードプレスの設定だったり色々大事な情報が書き込まれていますので、編集をする場合は手元のテキストファイルにコピーしたりしてバックアップを取っておきましょ。これを取らなかった所為で何回泣きを見た事か…(´・ω・)

function.phpで確認する内容は、無駄なスペースや改行ですね。これが隙間を生む原因になっているかもしれないとの事です。特に半角スペースはまだしも、全角スペースがあれば何かしらの悪影響が生まれているかもしれません。
関係がありそうな部分のスペースを消してみたり改行を消してみたりしました。

しかしこれでも私は改善されず……！

文字コードが原因で隙間が生まれていた

最後に私が見つけた情報は、文字コードに問題があるのではないか？との事。

function.phpの文字コードが適切でないと、サイト上部に隙間が生まれてしまうようです。
ワードプレスのファイル編集と言えば普通、管理画面の左のメニューから『テーマの編集』を選んで行う人が多いと思うのですが、実は私は管理画面からではなく、『function.php』とか『header.php』とかファイル1つ1つをダウンロードして手元のテキストエディタで編集していたんですよねー…。

これ自体は問題ではないのですが、編集して保存するときの文字コードが問題だったみたいです。

テキストエディタからファイルを保存するときに私は『UTF-8』に設定して保存していたのですが、これが『UTF-8N』でないとサイト上部に隙間が生まれてしまうみたいです。

ここで困ったのが、私の使っていたテキストエディタはUTF-8Nで保存する事が出来ない！なんてこった！
なので新しいテキストエディタをダウンロードする事に。私が専門学校に通っていた時、先生にオススメされた『TeraPad』をダウンロードしました。

TeraPadはとても使いやすいテキストエディタなので、良ければ試してみて下さいね。
ダウンロードはこちらから

では早速TeraPadでfunction.phpを開いて、メニューの『ファイル』から『文字/改行コードを指定保存』をクリック。
そして文字コードをUTF-8Nに変更し上書き保存してアップロードし直してみました。

その結果……

無くなった！隙間が無くなった！
たったこれだけの事でした。こういうちょっとした不具合は、時間がかかる割に終わってみればあっけないものです…(´・ω・)

人によって隙間の生まれる原因は違うかもしれませんが、私は『function.phpの文字コードがUTF-8Nでなかった』が原因でした！
この記事が皆様の参考になれば幸いです！