ブログの記事を書き終えて、「実際のサイトで見ると、どんな感じかなぁ」と、プレビューや公開ページを開いてみたら、なぜか記事の本文下あたりに不自然な空白ができていた…。
慌ててWordPressの編集画面でコードをチェックしても、そこには何も入っていない…。
とりあえずページの再読み込みをしてみると、今度はタブの横にあるサイトのロゴがいつまでもぐるぐる回ったまま（読み込み中）になってしまう…。
パソコンの再起動、キャッシュクリア、スーパーリロードも試してみるけれど、実際のサイト画面にある謎の空白は消えないし、サイトも重いまま…。
終いには解決策をネットで検索するものの、ドンピシャな情報が見つからなくて困っていませんか？
その「突如現れて、何をしても消えない謎の空白」と「サイトのぐるぐる」…、もしかすると原因はアフィリエイト広告の「計測タグ」かもしれません。
この記事では、ブログ運営の初心者でも、実際のページ（公開したページ）から問題の原因をピンポイントで簡単に突き止められる「検証ツール」の使い方と、今回の謎の空白と遅延問題を追加CSSで瞬時に解決する手順について、分かりやすく解説します。
プラグインは使わず、コピペだけ。今すぐ簡単に以前の良好な状態のブログに戻せるので、ぜひ自身のサイトを開きながら、一緒に試してみてください。
【原因特定】検証ツールで判明した「1x1pxの透明画像」
みなさんはサイトに何らかの問題があるとき、どうやってその原因を見つけ出していますか。
今回のケースに関して、私はまずWordPressの編集画面に目を向けました。けれど、ブロックエディタで開いてもコードエディタで開いても、空白が入っている場所にはどんなブロックもコードも見当たりません。
そこで、続いての手段として、サイトに問題があったとき、原因を特定するのに役立つ、ブロガーにはおなじみの「ブラウザの『検証ツール（デベロッパーツール）』」を使ってみることにしました。
ブラウザの検証ツールでコードをチェックしてみよう
始めるにあたって、みなさん、パソコンのブラウザ（Google ChromeやMicrosoft Edgeなど）で「謎の空白」ができている実際のブログ記事は開いてありますか。
１．まずは画面上で右クリック。
２．続いてメニューの一番下にある「検証」（または「開発者ツールで調査」）をクリック。
これで、画面の右側（あるいは下側）に、英語や記号が書かれた検証ツールの画面が表示されます。
３．次に、検証ツール画面の左上にある「ページ内の要素を選択して検査」のアイコン（□の中に↖）をクリック。
４．そして、問題の空白の上にカーソルを動かしてもう1度クリック。
これで、空白部分のコードが、検証ツールの画面上にハイライト表示されます。
謎のコードと消えた広告の残骸
ところで、みなさんの画面にはどんなコードが出てきましたか。
私の場合、自分では絶対に書き込んでいない、以下のようなコードが見つかりました。
<img src="https://moshimo.com..." width="1" height="1" ...>これは、明らかにもしもアフィリエイトの広告に関連したコードです。
実は、この空白問題のある記事には、本文中にもしもアフィリエイトの「かんたんリンク」を使ってAmazon商品の広告を貼っていました。
紹介したい商品の購入先を複数提示したい（商品ボックスを作る）ときにチャチャっと使える、便利なツール（サービス）の1つです。
私は普段、「ヨメレバ」や「カエレバ」を使うことが多いのですが、たまに検索しても紹介したい商品が出ないときがあり、そういうときはもしもの「かんたんリンク」に頼っています。そして、今回がまさにそんな状況（大半の商品ブロックは「ヨメレバ」で、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による対処法を試してみてください。
