WordPress.com Stats の謎のスマイルマークと Amazon ウィジェットの謎の余白

変なフェイスマークと Amazon の謎の余白
どこかのロゴマークみたいですが、別々の内容です!

まずは変なフェイスマークから

actyway のレイアウトで気になるところがあったので WindowsXP からレイアウトの確認を行いました。
すると、フッター部分に変なファイスマークが表示されていたので なんだこれ? と思い調べました。

WordPress.com Site Stats のフェイスマーク
これがその変なフェイスマークです。

WordPress.com Stats のフェイスマークの拡大
拡大するとこんな感じw

ちょっと小さいので見つけにくいかもしれませんが WordPress.com Stats を入れると出るフェイスマークみたいです。
wp-admin にログインしているブラウザでは表示されないみたいです。
actyway ではフッター部分の一番左下にちょこっと出てましたw
かわいいんですけど、フッターの背景がかかっていない部分に表示されていたのですごく目立ちます。
普段わたしは見えていなかったので気付かなかったけど、actyway にアクセスしていただいてるみなさんには見えていたということですね〜w

WordPress.com Stats とは?

WordPress.com Stats は WordPress.com のアクセス解析を自分のブログでも使えるようにするプラグインです。WordPress.com からアクセス解析が確認出来るようになりますよ〜!
http://wordpress.org/extend/plugins/stats/
あとついでに WordPress.com Stats Helper ってプラグインを入れると wp-admin 内でアクセス解析が見れるようになります。

Wordpress.com Stats Helper
こんな感じでなかなか便利です。
http://wordpress.org/extend/plugins/wordpresscom-stats-helper/

WordPress.com Stats が Jetpack (WP公式プラグイン) から利用できるので最近は Jetpack を使っています。

スマイルマークの消し方

まず WordPress.com 側で消す設定があるのか見てみたんですけど無さそうなので Google で検索したのですがキーワードが悪かったのか、日本のページはヒットしませんでした。
それで海外ページを見てみたら、How To Remove The WordPress Stats Footer Smiley ってまさにぴったりのタイトルの記事に出会いました!
http://bloggingreview.com/blogging-basics/how-to-remove-the-wordpress-stats-footer-smiley/

英語はさっぱりのわたしなので合ってるか不明ですけど、WordPress.com Site Stats の FAQ では display:none; で消せば良いと書いていますが、これだと問題がある!と解釈しました。

1
2
3
4
5
6
7
img#wpstats{
	width:0px;
	height:0px;
	padding:0px;
	border:none;
	overflow:hidden;
}

BloggingReview で説明してあるCSSで一応非表示にはなるのですがなんだか height が残ってしまうみたいでフッターの背景がかかっていない部分はそのままでした。
これではちょっとダメだと思い以下のようにしました。

1
2
3
4
5
6
7
8
img#wpstats{
	position:absolute;
	width:0px;
	height:0px;
	padding:0px;
	border:none;
	overflow:hidden;
}

position:absolute; を追加しました。
これでとりあえず解決とします。

Amazon のウィジェットを入れた場合の謎の1ピクセル

上でスマイルマークを消したのでもうフッターには何もないはずなんですけど、1ピクセルだけ背景がかかっていない部分が残っていました。1ピクセルのラインなのであまり気にもしてなかったのですが、良い機会なので原因を追求して解消しようと思いました。

Amazon プロダクトクラウドウィジェット
ちなみに使っていたウィジェットは プロダクトクラウドウィジェット です。

Amazon ウィジェットの1ピクセルのソースコード
Firebug でソースを表示させるとこの1ピクセル部分のソースはすぐに見つかります。
body の閉じるタグ直前あたりにあると思います。
ただこの img には id も class も指定されていません。
javascript の getElementsByTagName() でスタイルの追加をしてあげれば非表示にはできるんでしょうけど、プロダクトクラウドウィジェットを気に入ってなかったので使わないことで解決としました。

なぜこうゆう画像が表示されるんでしょう?

どちらの画像もトラッキングに使われていると思います。
消し方なんですけど、どうゆう部分に波及してしまうか不明なので画像は一旦読み込ませておいて後から CSS なり Javascript で見えないようにするのが良いと思います。
CSS や Javascript の実行タイミングとかで、そもそもリクエストを送らないように消せるのかも不明ですw