ブログの記事を書き終えて、「実際のサイトで見え方をチェックしよう」と、プレビューや公開ページを開いてみたら、なぜか記事の本文下あたりに、身に覚えのない不自然な空白ができていた…。
WordPressの編集画面でコードをチェックしても、そこには何も入っていない…。
とりあえずページの再読み込みをしたところ、今度はタブの横にあるサイトのロゴがいつまでもぐるぐる回ったまま（読み込み中）になってしまう…。
パソコンを再起動したり、キャッシュをクリアしたり、スーパーリロードも試してみるけれど、実際のサイト画面にある謎の余白は消えないし、読み込みも重いまま…。
終いには解決策をネットで検索するものの、ドンピシャな情報が見つからなくて困っていませんか？
その、編集画面には映らない「消せない空白」と「サイトのぐるぐる」、もしかすると原因はアフィリエイト広告の「計測タグ」かもしれません。
この記事では、ブログ運営の初心者でも、実際のページから問題の原因をピンポイントで突き止められる「検証ツール」の簡単な使い方と、追加CSSを使って一瞬でこの空白と遅延問題を解決する手順を分かりやすく解説します。
プラグインは使わず、コピペだけで今すぐ簡単に以前の良好な状態のブログに戻せるので、ぜひ自身のサイトを開きながら、一緒に試してみてください。
【原因特定】検証ツールで判明した「1x1pxの透明画像」
ところで、みなさんはサイトに何らかの問題があるとき、どうやってその原因を見つけ出しますか。
今回のケースに関して、私はまずWordPressの編集画面に目を付けました。けれど、ブロックエディタで開いてもコードエディタで開いても、空白が入っている場所にはどんなブロックもコードも見当たりません。
そこで、サイトに問題があったとき、原因を特定するのに役立つブロガーにはおなじみの「ブラウザの『検証ツール（デベロッパーツール）』」を使ってみることにしました。
ブラウザの検証ツールでコードをチェックしてみよう
それではみなさん、パソコンのブラウザ（Google ChromeやMicrosoft Edgeなど）で「謎の空白」ができている実際のブログ記事は開いてありますか。
１．画面上で右クリック。
２．メニューの一番下にある「検証」（または「開発者ツールで調査」）をクリック。
これで、画面の右側（あるいは下側）に、英語や記号が書かれた検証ツールの画面が表示されます。
３．検証ツール画面の左上にある「ページ内の要素を選択して検査」のアイコン（□の中に↖）をクリック。
４．問題の空白の上にカーソルを動かしてもう1度クリック。
これで、空白部分のコードが、検証ツールの画面上にハイライト表示されます。
謎のコードと消えた広告の残骸
みなさんの画面にはどんなコードが出てきましたか。
私の場合、自分では絶対に書き込んでいない、以下のようなコードが紛れ込んでいるのが見つかりました。
<img src="https://moshimo.com..." width="1" height="1" ...>これは、明らかにもしもアフィリエイトの広告に関連したコードです。
実は、この空白問題のある記事には、本文中にもしもアフィリエイトの「かんたんリンク」を使ってAmazon商品の広告を貼っていました。
みなさんは、紹介したい商品の購入先を複数提示したいとき（商品ボックス）にどんなツール（サービス）を使っていますか。
私は普段、「ヨメレバ」や「カエレバ」を使うことが多いのですが、たまに検索しても紹介したい商品が出ないときがあり、そういうときはもしもの「かんたんリンク」に頼っています。そして、今回がまさにそんな状況（大半の商品ブロックは「ヨメレバ」で、1つだけ「かんたんリンク」で作成）でした。
その状態で公開していれば、こんな問題に悩まされることはなかったでしょう。
ところが、「そう言えば、私が使ってるCocoonにも同じようなブロックがあったはず…。どんなものか試しに使ってみよう！」と、使い方もわからないまま、広告のコードを「Amazon商品リンク」というブロックに貼り付けてしまいました。
結果は…エラー。慌ててブロックごと削除し、最終的には使い慣れたもしもの「かんたんリンク」で記事を公開しました。
どうやら今回の空白は、私が余計なことをしたために、WordPressのデータベースの裏側（表面からは見えない、保存されたデータの隙間）に「エラーを起こした広告コード（残骸）」が取り残されてしまったせいのようです。
改めて確認してみると、問題の記事だけでなく、すべての記事の本文下に同じ空白が表示されるようになっていました。ぐるぐるも同様に発生しています。
1x1pxの透明画像が埋め込まれる理由
さて、検証ツールで判明した画像コードですが、専門用語では「トラッキングピクセル」や「Webビーコン」と呼ばれています。
現在一般的なアフィリエイトでは、商品の購入やクリックなどの成果を計測（トラッキング）するのには、主としてCookie（クッキー）やJavaScriptといった技術が利用されています。けれど、ウェブサイトへの表示回数や、広告データをサーバーから呼び出すための通信トリガーとしては、いまだにWebビーコンを使用しているASPがあるようです。
通常であれば、この1x1pxの画像（Webビーコン）は背景と同化して目には見えず、通信も一瞬で終わるため、サイトの表示速度に影響を与えることはありません。
けれど、今回のように「エラーの出た商品リンクブロック」のデータが裏側に残ってしまうと、肝心の商品ボックス（広告本体）は消えているのに、この1x1pxの画像（通信の命令）だけがシステムに取り残されてしまうことがあるそうです。
本体がないのに通信だけが走り、さらにその通信がスムーズに完了しないと、ブラウザは「1x1pxの画像を何とかして読み込もう」といつまでも待ち続けてしまいます。そしてその結果、画像を表示するための無駄な空白がページ下にポッカリと空き、読み込みが終わるまでタブの横でロゴがぐるぐる回り続ける現象が起こってしまうのです。
【一瞬で解決】追加CSSでアフィリエイトの計測タグを強制非表示にする手順
データベースの隙間にこびりついてしまった「1x1pxの透明画像（計測タグ）」。
これが非常に厄介な代物で、何度パソコンを再起動したり、ブラウザのキャッシュクリアやスーパーリロード（強制再読み込み）を試したところで、一向に取り除くことができません。
無駄な空白のせいで起こる「ぐるぐる」に悩まされること2日…。最後に泣きついたAIが提示してくれた解決策というのが、「追加CSS」を使う方法でした。
テーマ側に「その1x1pxの画像を無視（非表示）しなさい」という、デザインの命令（CSS）を1行書き込むだけで、外部サーバーとの通信トラブルをすべて無視して、一瞬でサイトを正常化させることができる方法です。
手順は以下の2つのステップだけ。さっそく進めていきましょう。
ステップ１：追加CSSにコードを貼り付ける
１．WordPressの管理画面（左メニュー）で、「外観」 ＞ 「カスタマイズ」 とクリック。
２．画面左側にメニューが開くので、一番下にある 「追加CSS」 をクリック。
３．文字を入力できる欄に、以下のコードをそのままコピペ。
/* アフィリエイトの1px計測画像を強制非表示にしてページのぐるぐるを止める */
img[src*="moshimo.com"][width="1"][height="1"] {
display: none !important;
}４．貼り付けたら、画面上部にある青色の 「公開」ボタン をクリックして保存。
ステップ2：WordPress（テーマ・プラグイン）とブラウザのキャッシュをクリアする
１．使用テーマにキャッシュ削除機能がある場合や、キャッシュ系のプラグイン（WP Fastest Cache等）を導入している場合、それらすべてで「すべてのキャッシュをクリア」する
２．ブラウザのスーパーリロード（またはキャッシュクリア）を実行する
追加したCSSをブラウザに新しく読み込ませるため、スーパーリロードやキャッシュクリアは、自身のブログ（TOPページや、どれかひとつの記事ページなど、どのページでも構いません）を開いた状態で実施します。
- Windows（Chrome/Edgeなど）の場合： キーボードの
Ctrl+F5（またはShift+F5） - Mac（Safari/Chromeなど）の場合： キーボードの
Cmd+Shift+R
＼ブラウザのスーパーリロード（またはキャッシュクリア）がうまくいかない？／
最後に、実際のページを数ページ分確認してみてください。本文下の不自然な余白が消え、サイトロゴの「ぐるぐる」が治まっていれば、成功です。
通常の画像広告や報酬の発生には影響がないので安心！
もしかすると「CSSで非表示にしたら、他のアフィリエイト広告まで消えたり、報酬が発生しなくなったりしないの？」と不安に思われるかもしれません。
安心してください。今回追加したコードは、width="1"[height="1"（横1ピクセル、縦1ピクセル）という特定の計測用タグだけをピンポイントで非表示にする指定になっています。
そのため、ブログ内に設置している通常の商品画像広告やテキストリンクはターゲットから完全に外れるため、正常に表示されますし、クリックによる報酬の発生にも一切悪影響はありません。（少なく当サイトではどんな問題も起こりませんでした。）
まとめ：謎の空白や遅延はCSSでスマートに解決しよう
公開ページを見て突然現れた「謎の空白」と「終わらないぐるぐる」の原因は、WordPressのシステムの裏側に取り残された1x1pxの透明画像（Webビーコン）でした。
どうりで、管理画面の中をどれだけ探し回っても、削除したいコードは見つからないし、一時的にデータを保存するだけのキャッシュをクリアしたところで、問題が解決しなかったわけです。
「追加CSSを使って、ブラウザの読み込みを強制的に終わらせる」 方法なら、見えない残骸に時間を奪われることなく、スマートに問題を解決できます。
私と同じように「アフィリエイト広告を消したのにブログの下に変なスペースができてるし、サイトも重い…」と悩んでいるみなさん、ぜひ今回の追加CSSによる対処法を試してみてください。
