AFFINGER5

AFFINGER5やWordPressで上部に変な空白ができたときの対処方法

AFFINGER5やWordPressで上部に変な空白ができたときの対処方法

 

誠太
こんにちは、誠太です!

 

先日、AFFINGER5のカスタマイズを行っているときに、サイトの上部にこのような変な空白が空いていることに気が付きました。

 

AFFINGER5サイト上部に空白

 

こんな現象が起きたのは初めてで、すこしググって調べてみたところ3つほど対策方法があるようなので、同じ現象になっている人へ向けて解決方法をシェアしたいと思います。

 

本記事の内容

  • WordPressのサイト上部に空白が生まれてしまったときの対処方法

WordPress上部に変な空白ができたときの対処方法

WordPress上部に変な空白ができたときの対処方法

 

正直、謎な現象でした。

 

function.phpのテキスト形式がUTF-8Nじゃない

まずひとつ目に、調べてみたところによると、function.phpは文字コード形式が『UTF-8』ではなく『UTF-8N』でないといけないようです。

 

メモ帳などでfunction.phpなどの操作を行ってしまうのはご法度なのですが、WordPress初心者がカスタマイズをするときには知らず知らずのうちにやってしまう事があります。

 

対策方法としては、一度サーバーからfunction.phpをダウンロードして『テキストエディタ』で開きます。

 

ぼくが使用しているテキストエディタはTeraPadというテキストエディタで、そこそこ使い勝手もいいため、まだパソコンの中に入っていない場合はダウンロードしておいてください。

 

TeraPadの保存方法

 

TeraPadでfunction.phpを保存するときに、『文字/改行コード指定保存』という項目があるので、クリックします。

 

すると、文字コード指定のプルダウンが出てくるので、『UTF-8N』を選択して保存します。

 

文字コード指定保存

 

上書き保存で大丈夫なので、そのままfunction.phpを保存したらサーバーにアップロードしてサイトの状況を確認してみてください。

状況が復旧していたら、ここで作業完了です。

 

header.php内部の空白スペースが原因

header.phpにも原因が隠されている可能性があります。

ちなみに先ほどのfunction.phpの改善方法でも紹介しましたが、header.phpでも文字コードはUTF-8Nでないといけないようなので、不安な場合は先ほどと同じ手順をやってみてください。

 

さて、それではheader.phpが原因となっている空白スペースですが、なんらかのコードを追記する場合に末尾に全角スペースが入ってしまって、空白が生まれてしまうことがあるようです。

 

header.phpを操作する機会は稀ですが、ぼくは過去にこのようなカスタマイズでheader.phpを書き換えました。

 

  • Google AdSenseの申請コードのコピペ
  • アドセンス表示高速化のコードコピペ
  • FontawesomeのCDNをheader.phpから、footer.phpに移動

 

今回のカスタマイズではheader.phpにはアクセスしなかったので、特に操作しなかったのですが、文字コードだけ気になったので念の為UTF-8Nに変更して保存を行い、サーバーにアップロードし直しました。

 

しかし、これでは治らなかったので、ぼくの場合は違うところに原因があったようです。

 

もし、header.phpを確認してみて空白があった場合は削除してみて、現状が回復したようであればここで作業完了になります。

 

管理バーの表示が原因

これは、どうなんだろうという感じなのですが、管理バーが原因となっていることがあるようです。

 

しかし、冒頭でご覧頂いた画像は管理バーの下に空白行が入っているので、管理バーが原因となっているわけではないように思えました。

 

念の為、なんかかしらの関連があるかもしれないと思い、WordPressのサイドバーにある『ユーザー』→『あなたのプロフィール』にて、『ツールバー』のチェックを外しました。

WordPressユーザープロフィール

管理バーの非表示設定

 

しかし、やはり現象は回復しませんでした。

無かったら無かったで少し不便な部分があったので、管理バーが原因となっていなくてよかったです。

 

こちらの方法で改善するのは考えづらいですが、もしこの方法で改善したようであれば、今後はこちらのチェックに関しては操作しないほうが良いかと思います。

 

デベロッパーツールでmarginとpaddingを確認

デベロッパーツールでmarginとpaddingを確認

 

Google Chromeを使用している場合、デベロッパーツールというものを使用する機会がありまして、主にプログラミングをするときなどにサイトの分析で使用するのですが、なにか糸口があるかと思い確認してみたところ、これも空振り。

 

空白が空いている部分で『右クリック』→『検証』でどのような状態になっているのかを確認できるようになっているのですが、ヘッダー要素のmargin・padding共に異常なし。

 

AFFINGER5のカスタマイズでサイトの背景色を変更してみたところ、背景色がそのまま適応されたのでヘッダーそのものの位置が下がってしまっているような状況になっているようでした。

 

しかし、ヘッダー要素には異常が見られず原因特定には至りませんでした。

 

ページのソースを表示して余計な空白がないか確認

ページのソースを表示して余計な空白がないか確認

 

念の為ページソースを見て確認を行ってみました。

空白部分にカーソルをあわせてみたところ、マウスポインターの表示が文字の上に合わせているときの表示に変更されたので、もしやと思いドラッグしてみると色が反転しました。

 

空白数を確認してみたところ、『全角全角全角半角』の1セットが3つ程連なっている事がわかったので、ソースを表示してショートカットキーのCtrl + Fでスペースを入れて検索してみたところ、怪しい部分が見つかりました。

 

しかし、該当されるであろう場所の記述がどのphpに記載されているか発見することができずに、結局そのスペースを消すことができず断念。

 

どうしたものかと1時間ほど格闘したところ、明暗が思い浮かびました。

改善方法を修正しても治らない場合の一番早い対処方法

改善方法を修正しても治らない場合の一番早い対処方法

 

ここまでやって改善されなかった末にぼくが思いついた方法は

 

誠太
あれ?AFFINGER5だったらCSSとかカスタマイズデータとかそのままアップデート出来るから、テーマの置き換えしたらそれで済むんじゃ・・・

 

ぼくの思いつきは好転しました。

AFFINGER5は専用のプラグイン(無料)でテーマをアップデートする際に、CSSやカスタマイズデータをそのままアップデート時に引き継ぎができるという便利なプラグインがあります。

 

そのため、専用プラグインを使用して置き換えを行ったところ見事に復旧。

いつも見慣れた、空白のないヘッダー上部に修正できました。

 

なんとも簡単な方法で解決してしまったのですが、AFFINGER5だからこそ成し得た方法だと思います。

 

恐らく、他のテーマだと全て最初からカスタマイズし直しという状況になってしまうので、助かりました。

 

今回ぼくが調べた改善方法を全て書いたつもりですが、もし治らなかった場合、ぼくのようにテーマをインストールし直す事が一番早いかもしれません。

 

今後同じ間違いを繰り返さないように、カスタマイズするときはしっかりとバックアップを取ってから行なうようにしましょう!

 

\ あわせて読みたい! /

AFFINGER5

2019/10/18

【最短】AFFINGER5の購入方法|導入までの手順を一挙解説!

スポンサーリンク   誠太こんにちは、誠太です。   本記事は、AFFINGER5をこれから購入されようとしている方向けの記事となっています。   購入方法の手順としては、AFFINGER5 WING/AFFINGER5 Pack3(AFFINGER5 EX)共通になるので、下記をご確認ください。   AFFINGER5の購入方法 AFFINGER5の公式サイトに移動 インフォトップの会員登録 クレジットカード or 銀行振込/郵便振替 を選択 入力内容を確認後、購 ...

ReadMore

AFFINGER5

2019/8/10

AFFINGER5のトップページで抜粋を非表示にする方法【コピペOK】

スポンサーリンク   誠太こんにちは、誠太です。   AFFINGER5を使用していて、トップページに表示されている記事一覧の抜粋が消えないということで困っていませんか?   解決方法として、コピペで実装可能なCSSのテンプレを用意したので、追加CSSに追記して使用してもらえたら解決可能です。   AFFINGER5管理のデザイン内の抜粋設定でも消えない現象が発生しまして、検索エンジンで検索しても良い結果を得られなかったため、同じ現象で困っている人向けに記事を書きた ...

ReadMore

AFFINGER5

2019/7/27

AFFINGER5(アフィンガー5)レビュー【1分で分かるAFFINGER5の魅力】

    AFFINGER5(アフィンガー5)のレビューって長いものが多くて、実際どんなところが良いのかわからない。完結でわかりやすいレビュー記事を参考にしたい   このような悩みを解決します。   こんにちは、誠太です。誠太   本記事では、『1分で分る』と称しましてAFFINGER5のレビューをしていきたいと思います。   内容としては、見出しでメリット・デメリット・AFFINGER5のラインナップを確認することができるようになっていて、気にな ...

ReadMore

AFFINGER5

2019/7/20

【初心者OK】AFFINGER5が初心者にこそ向いている理由と根拠

  AFFINGER5ってよく聞くけど、初心者でも使えるのかな?なんか機能が多くて難しそうなんだけど大丈夫??   本記事はこのような不安を解消できる内容となっています。   誠太こんにちは、誠太です。   いま無料のテーマを使用していて、『うまく記事が作れないのは無料テーマを使っているからなのかな』と考えてしまいますよね。   他のブログを見てみると鮮やかで整っているブログばかり。 自分も本当はそうしたいけど、なかなか有料テーマに手が出ない。 &nbsp ...

ReadMore

AFFINGER5

2019/7/13

【企業向け】WordPress制作依頼とサヨナラ。Webデザイン知識ゼロでも使えるWordPressテーマ

  クラウドソーシングでWordPressのサイト制作を依頼しようとしているけど、本当に大丈夫だろうか。どうせならしっかりとしたサイトを構築したい。   このような悩みにお答えできる記事になっています。 ちなみに今回紹介するテーマでは、このようなサイトが制作できるようになっています。   AFFINGER PACK3 『START UP』を確認する   誠太はじめまして、誠太です。   本記事は、新規企業の立ち上げなどでWordPressのサイト制作を依頼 ...

ReadMore

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

-AFFINGER5
-

Copyright© SEITALITY , 2019 All Rights Reserved.