なんとな~くしあわせ?の日記

JavaとかAWSの設定とかをメモする技術ブログ

忍者ツールの広告位置を無理やり移動させる

Debian勉強会に触発されてOS自作入門をまたやりたくなってきたのでホームページを作りました。
http://buildos.xxxxxxxx.jp/ 移転しました
OS自作入門メモ


サーバは忍者ツールを借りたのですが、無料だと広告が出てしまう。
まあ、それはいいのだが広告ユニットがbootstrapの位置と合わず表示が汚い。*1

以下、やったこと

  1. 1.広告ユニットのcssのクラスをブラウザの開発者モード*2を起動して探す
  2. これでターゲットの要素が ul.tdftad だとわかる。

f:id:panzer-jagdironscrap1:20160306143210p:plain

  1. 2.cssのクラスを上書きして強制的に位置をずらす
  2. 実際ホントは!important;は使いたくないのだが、まあしょうがないよね。
ul.tdftad {
    width: 1170px       !important;     // bootstrapのcontainerの横幅と合わせる
    padding-right: 15px !important;
    padding-left: 15px  !important;
    margin-right: auto  !important;   // 左右が揃う
    margin-left: auto   !important;    // 左右が揃う
}

今回はCSSを使って解決しましたが、javascriptを使えばonloadで特定要素を消すといった処理も行えそうです。

*1:body要素の最後に広告ユニットを挿入するようにプログラミングされているようだ

*2:Fn+F12