ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

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だからこそ成し得た方法だと思います。

 

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

 

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

 

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

 

\ あわせて読みたい! /

2019/6/11

AFFINGER5の評判は?ぼくも含めAFFINGER5ユーザーの評価を紹介

  誠太こんにちは、誠太です!   アフィリエイト初心者からAFFINGER5を使用し始めて3ヶ月が経過したので、ぼくのAFFINGER5への評価と他のユーザーがAFFINGER5をどのように評価しているのかを紹介したいと思います。   結論、ぼくのAFFINGER5への評価は高いです。   アフィリエイト収益を増やす仕組み 初心者でも使いやすい SEO対策のしやすさ 記事装飾の豊富さ 機能面の秀逸さ   ぼくも3ヶ月間AFFINGER5 WINGを使用し ...

ReadMore

2019/5/30

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

  誠太こんにちは、誠太です!   先日、AFFINGER5のカスタマイズを行っているときに、サイトの上部にこのような変な空白が空いていることに気が付きました。     こんな現象が起きたのは初めてで、すこしググって調べてみたところ3つほど対策方法があるようなので、同じ現象になっている人へ向けて解決方法をシェアしたいと思います。   本記事の内容 WordPressのサイト上部に空白が生まれてしまったときの対処方法 WordPress上部に変な空白ができた ...

ReadMore

2019/5/26

AFFINGER5の吹き出し機能解説!使用方法からアイコンの調達方法など

  誠太こんにちは、誠太です! 今回は吹き出し機能について解説するよっ!アーサー   AFFINGER5では、『会話ふきだし機能』という機能がありますが、効果的に使えていますか?   吹き出し機能を使用することによって、あなたを覚えてもらいやすくなることはもちろん、読者に伝えたいことをイラストと一緒に伝えることが出来るので、内容をより伝わりやすくすることが可能です。   本記事では吹き出しのアイコンの設定方法から使い方までを解説し、伝わりやすい記事を作れるようにお手 ...

ReadMore

2019/5/25

AFFINGER5(アフィンガー)に破線ボックスを導入する方法!

  誠太こんにちは、誠太です。   今回は、タグの中にあるボックスデザインでマイボックスという項目があります。   その中にある、『しかく(枠のみ)』というボックスデザインがあるのですが、そのデザインを破線ボックスになんとかカスタマイズできないかと試行錯誤していたところ、カスタマイズに成功しました。   ぼくと同じように思っている人へ向けて、本記事を執筆します。   本記事の内容 『しかく(枠のみ)』を破線ボックスに変更するカスタマイズ CSSコードの入力 ...

ReadMore

2019/5/19

JINとAFFINGER5を比較検証!初心者にオススメなのは・・・

  誠太こんにちは、誠太です!   JINとAFFINGER5はよく比較されるWordPressテーマです。 そのため、はじめての有料WordPressテーマを購入しようとしているけど迷ってしまう人がほとんどだと思います。   JINとAFFINGER5ってどっちがいいの? 初心者が使いやすいのはどっち? 雰囲気はJINが好きだけど、稼ぎたいならAFFINGER5?   このような悩みを解決するべくJINとAFFINGER5の検証を行い、あなたにはどちらの選択が合っ ...

ReadMore

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

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-AFFINGER5
-

Copyright© Limitless.net , 2019 All Rights Reserved.