fc2blogをiPadで閲覧時に自動挿入される追尾広告のまとめ

更新
2012年12月22日(土)

追尾広告によりiPadでの操作性が損なわれた場合の対処方法などを述べます。iPadは、追尾広告の挿入方法がiPhoneやiPod touchとは異なります。この記事は、fc2blogを利用して記事を公開されている管理者向けの内容です。

概要

  1. 2012年12月6日頃からiPadで追尾広告が強制的に表示されるようになったようです。

  2. 追尾広告の重なり(z-index)が記事よりも低いと、iPadでのブラウジングが困難になるようです。テンプレートを編集し、追尾広告の重なりを記事よりも上にする方法を述べます。これにより操作性が必ず改善するかどうかはまだ不明ですが、同じようなやり方でiPhoneとiPod touch 5では操作性が改善しました。よって見切り発車的に改善方法として記事にしました。

    追記:このページに記載している操作性改善案では対処不可。机上の空論でした。

  3. 追尾広告に idclass などがないため、ピンポイントで広告のCSSを編集しにくいです。それでもJavaScriptを使わずに対処します。2012年12月現在の対処方法であり、広告出稿側の仕様変更により当ページの内容が無効になっている場合もあります。

テンプレートを編集し重なりを調整する方法

HTMLを編集

  1. </body> を探します。HTMLの一番下あたりにあります。その上に次のコードを追加します。

    <div id="dummy-for-ipad">iPad操作性改善用暫定コード(ver1.0.0.121220)</div>
  2. 下図で反転している部分が追加後です。

    121220ipad-ad-6.png

テンプレートのCSSを編集

  1. CSSの一番下あたりに次のコードを追加します。

    /*iPad操作性改善用暫定コード(ver1.0.0.121220)*/
    #dummy-for-ipad{display:none;}
    body>div:last-child{z-index:100;}
    
  2.  更新  をクリックすれば完了です。

  3. なお、当サイト作者が作成したテンプレート以外では、z-indexの値を100よりももっと大きくする必要があるかもしれません。

上記編集の簡易解説

  1. 追加したHTMLやCSSのコードについて解説します。web製作者向け解説なので、不慣れな方は意味不明かと思います。

  2. iPad用の追尾広告は、idclass がないため、それらで特定してスタイル(z-index)を追加できません。しかし、今のところ body の閉じタグ直前に必ず挿入されます。そこに着目しました。下図ではchromeを使用していますが、User Agent を iPad にし、擬似的にiPadでの表示にしています。

    121220ipad-ad-8.png
  3. bodylast-child にそのままスタイルを適用すると、iPad以外で副作用がでるかもしれません。そのため、ダミーコード(dummy-for-ipad)をHTMLで追加しました。これにより、iPad以外ではこのダミーコードが last-child になるので、スタイルを追加しても display:none; 状態で問題ありません。下図は User Agent を変更していない通常のchromeです。body の閉じタグ直前にダミーコードがあるのを確認できます。

    121220ipad-ad-7.png
  4. 下図は擬似的なiPadでの表示です。CSSで last-childz-index を変更したので、追尾広告が記事の前に来ました。ダミーコードが last-child でなくなりましたが、iddisplay:none; を設定しているので無問題です。

    121220ipad-ad-9.png

今後のテンプレート改訂時には

  1. 上記説明で述べた方法をデフォルトで採用する予定です。よって、改訂版ではこのページで述べた方法が不要であったり、相違がある可能性があります。

fc2blogを利用されている方々の、広告に関する吐露を列挙します。日付は各ページの公開日もしくは最終更新日です(このページの公開日現在)。ありがとうございます。

阿鼻叫喚

  1. FC2 blog vol.79 - 2ちゃんねる - 追尾広告の実装に関して、2chの過去ログが最速のようです。 2012年12月20日

    121220ipad-ad-1.png
  2. iPadでFC2ブログ楽しんでいます。最近、ポップアップ広告が出てきて邪魔なのですが... - Yahoo!知恵袋 2012年12月12日

    121220ipad-ad-2.png
  3. ベリー☆ベリー☆イスタンブール  fc2さん、広告がジャマすぎます、、、 - 追尾広告により、引越しを示唆されています。 2012年12月12日

    121220ipad-ad-3.png
  4. かずぶろぐ iPhone表示の広告がウザくてFC2やめようかと思ってる件 - この記事の管理人さんは、この記事の1ヶ月後には本当にfc2blogをやめた模様。 2010年8月19日

    121220ipad-ad-4.png

ブログ読者側でできること

  1. まっくの徒然日記 fc2ブログiPhoneでの広告の消し方 - 当該動画のコメント欄によると、この方法で消せる広告とそうでないのがあるようです。 2010年8月25日

    そこで発見したのが、かんたんに広告を消去する方法。以下の動画をご覧下さい。
    広告に軽く触れたら画面外にフリック。これで邪魔な広告は消え去ります。
  2. iPhone PSP 覚え書き iphone用の広告などを非表示にもできる UserAgent faker 2010年11月17日

    簡単にいうとUAを変えてFire fox などに偽装するアプリです
    いろいろ活用できますが今回は広告を消してみましょう
  3. 行動追尾型ターゲティング広告が気持ち悪いからその対策 | 自由帳 2012年11月28日

    最初に書いておく。バナー広告はアドフィルタとかで遮断しない限り非表示は無理。 最新のPCブラウザ、例えばFirefoxあたりだとトラッキング(追尾追跡)の拒否を通知する機能、オプトアウトができたりするのだけどiPhoneのデフォルトブラウザのSafariにはそんな機能はない。
    ということでクッキーを蓄積しつづけると精度は上がっていくしプライバシーもありもしない。

ブログ管理者側で設定できること

  1. HyperMotard&R1200ST iPhoneページの広告対策できたかも? 2011年12月11日

    まぁ、どーせブログ提供サイトとの追いかけっこになるので
    「今だけ」なのかもしれませんが...
    えっと、前回の続きで、自分のiPhoneになにかをするのではなく
    ブログを提供する側で対策を講じる手法です。
    CSSだけで片付けてみました。

fc2さんへのリクエスト

  1. iPadの画面に出るポップ広告が目に非常に負担がかかります。 - FC2リクエスト 2012年12月20日

    数日前から、iPadでFc2ブログを閲覧していると、POP広告が出るようになりました(FC2さんの広告のみ)。非常に目に負担がかかり、困っています。以前の状態に戻して頂きたいのです。
    121220ipad-ad-5.png

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)