【WordPress】記事上に謎の余白(隙間)ができた時の原因と対処方法｜空白で表示される場所や文字を消す方法【ブログ初心者向け】

こちらの記事では、WordPress(ワードプレス)のTOPページや記事上に表示された、謎の余白(隙間)や空白・文字などの原因と対処方法を解説しています。

記事上に余白ができる原因

1、CSSが原因

基本的にCSSは、サイトのデザインをカスタマイズする項目なので、余白が発生する原因の中で最も可能性が高いです。

そのため、メインコンテツなどの上部に「padding」「margin」などが入っていると、サイトの上部に余白ができる原因となります。

▼デベロッパーツールで確認する

余白や空白だけでなく、サイト全体の修正点がある場合はデベロッパーツールで確認するようにしましょう。

デベロッパーツールを使うと、サイト内の要素が分かるので、空白がある場合は指定箇所をCSSで消すことが可能です。

Windows；F12キー
MacOS：command+option+Iキー

2、「header.php」内にスペースがある

Googleアドセンス広告を配置する時などに、headerを触る機会があるのですが、その際に「header.php」内にスペース文字が入っていると余白が生まれます。

▼header.phpの場所

「外観」→「テーマエディターファイル」→「テーマ選択」→「header.php」

header.phpの場所は、上記の手順で行けます。

逆に記事下に謎の余白(空白)が出来た場合は、「 footer.php」の「<body></body>」内を確認してみましょう。

3、functions.phpに全角スペースがある

header.phpだけでなく、「functions.php」にも全角スペースが入っていると、ヘッダーに1行分の余白ができることがあります。

分かりにくいですが、phpタグの外に全角スペースが入っていると余白が発生するので、functions.php内を確認してみましょう。

▼functions.phpの影響で余白が発生

テーマファイルの中でも「functions.php」は、「header.php」より早く呼び出されるファイルです。

余白となるデータが出力されてから、ヘッダーが出力されることになるので、上部の謎の余白が生まれる原因となります。

4、テーマファイルにアクションフックが無い

サイトにログインしていないときは余白がないけど、ログインしているときのみ現れる場合はテーマファイルに「<?php wp_footer(); ?> (アクションフック)」が抜けている可能性があります。

テーマファイルに上記のアクションフックが無いと、様々な不具合が起きるので「footer.php」が書かれているか確認してみましょう。

5、使用中のプラグイン

プラグインも余白が発生する原因として多いのですが、プラグインによって余白が発生している可能性があります。

直近で導入したプラグインや、サイトデザインに関するプラグインを一つ一つOFFにして検証してみましょう。

6、TOPページを固定ページ化

以前、TOPページを固定ページ設定にした時に、サイト上部に記事内テキストの文字が表示されたので、解決手順を下記にまとめていきます。

「WordPress」でTOPページの変更など、まだ行ってない方は下記の記事を参考にして下さい。

▶TOPページ変更方法を見る

▼固定ページからTOPページを編集

まず始めに「固定ページ」に行き、TOPページ(フロントページ)などの原因が発生した記事の編集画面に行きましょう。

▼メタディスクリプションの表示変更

記事編集ページに入った後は、下記にスクロールして「Meta Description (メタディスクリプション)」の欄に「固定ページコンテンツ」とあるので消しましょう。

固定ページコンテンツがあると、記事内のテキストが記事上のディスクリプションスペースに余白が発生するので、この部分を変更すると無駄な空白を消すことができます。

▼メタディスクリプションの記入

最後はSEO対策のカテゴリ欄にある、「Meta Description (メタディスクリプション)」に1文字でも良いので入力しましょう。

こちらが空白になっていると、サイト上部にテキストが表示されたり空白ができたりします。

Web制作

ウェブ制作関連記事
ブログサイトの始め方	ドメイン取得方法
ドメイン取得～サイト作成手順	外観テーマ導入手順
おすすめレンタルサーバー	おすすめテーマ
記事内容(ジャンル)の選び方	SSL化の設定方法
固定ページをトップページ変更	おすすめプラグイン一覧
サイト運営者ID確認	効率化ショートカットキー
不要なCSS・JS特定	ホームページの作り方
スパムコメント対策

▼Googleアナリティクス

Googleアナリティクス関連記事
複数サイト管理方法	旧バージョン(UA)設定

Googleアドセンス・アフィリエイト

Googleアドセンス関連記事
アドセンス設置場所	広告単価の高い時期
広告クリック率確認	広告サイズ改善
アンカー広告の固定化	広告が表示されない原因
ads.txtファイル問題の修正	ダブルレクタングル作成
リクエスト処理エラー	Amazonアソシエイト
おすすめASP一覧	【クローズドASP】felmat依頼内容

サイトデザイン

関連記事
TOPページの割り当て	padding設定方法
margin設定方法	border設定方法
記事上の余白原因と消し方	スマホ余白の原因と消し方
特定カテゴリー非表示	perタグ内の改行方法
▶が文字化けする原因対策	サイドバーのずれ修正
コメント欄に絵文字	サイドバータイトル非表示
CSSが反映されない原因	テーブル文字を上下中央揃え

▼テーマ毎のデザイン

THE THOR (ザ・トール)
アイキャッチ画像を非表示	グローバルメニューの出し方

エラー対策

エラー対策の関連記事
style.cssエラー	functions.phpエラー
画面表示がおかしい対処法	重大なエラー対処法
サーバーでプラグイン削除	エラーコード一覧
404エラー対策	ー