原因不明?でフッターに空白が出来てしまう問題は楽天市場のモーションウィジェットだった

原因不明
このエントリーをはてなブックマークに追加
PR

Webサイトにいつの間にかフッター部分に空白が!
そこでHTML、CSSを徹底的に調べ直したが原因が見つからない

これは困り果てて
最終的に、HTMLの要素をしらみつぶしに消していった
箇所ごとじゃなくて、HTMLがまっさらになるように一つ一つ消していった

それのお陰でやっと発見
原因は楽天アフィリエイトのモーションウィジェットでした

複数設置していたので、1箇所ずつ消して戻す、次を消して戻すの確認では
特定できなかったのも複数設置してたからです

結構時間がかかって大変だったんですが
分かってしまえば、こんなことだったのか・・・と

 

分かってしまえばこっちのもんです

モーションウィジェットを必ず使いたいのなら、それを考慮したフッターのデザインにしてしまう

方法1
フッターの隙間が合ってもなくても代わり映えしないデザインにする

方法2
ネガティブマージンで隙間を殺す footer{margin-bottom:-25px;}
-25pxでピタリ消えました(ケースによって違うかも)

方法2はCSSをちょこっと加えるだけなので楽です

 

なんで隙間が出来てしまうのかというと
bodyの下にimgが追加されてしまっているのです
これが原因、インプレッションを測るためのものと思われます

imgでwidth=”0″となっているので
このパラメータがあるタグを非表示にしてしまう方法もあります

なんか弊害があったら嫌なので自分は。方法1か方法2を使います

 

他の原因の場合は、phpをBOM有りのUTF-8で保存してる時も、なったりしますので
その時はBOM無しのUTF-8にすればOKです UTF-8Nとの表記されます

 

 

※方法2のCSSのスペルが間違っていたので修正しました。

楽天モーションウィジェットが原因の場合はこちらの方法も使えます

楽天モーションウィジェットでサイトのデザインに空白ができてしまう問題をPositionで克服

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)