読者です 読者をやめる 読者になる 読者になる

ノラプログラマーの技術メモ

ネットで調べても出てこなかった情報を載せていきたい技術系ブログ。

nend広告のhtmlタグを解析してスタイルを変更してみる

nend広告はjavascriptから読み込まれるので、実際にはどんなhtmlタグが使われているか分からない。そこで解析してみた結果がこちら。

ちなみにテキストありのアイコン型のソースコードですが、広告の横幅は決まっていなくて全体を中央寄せしているだけみたい。

<div id="nend_adspace_00000_000000" style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;padding:0px;line-height:1;text-align:center;font-size:0px;border:none;">
  <ul id="nend_icon_list_00000_000000" style="text-align:center;text-indent:0;padding:0px;margin:0px;line-height:1;font-size:0px;border:none;background:transparent;">
    <li id="nend_icon_00000_000000_0" style="display:inline-block;padding:0px;margin:0px;line-height:1;border:none;background:transparent;text-indent:0;font-size:0px;vertical-align:top;">
      <a href="http://c1.nend.net/click.php?xxx" target="_blank" style="text-decoration:none;background:transparent;border:none;padding:0px;margin:0px;font-size:0px;line-height:1;">
        <img src="http://img1.nend.net/img/icon/0000/00000/0000.gif" border="0" alt="広告テキスト" style="border:none;fload:none;background:transparent;width:57px;height:57px;padding:0px;margin-top:1px;magin-bottom:1px;margin-right:10.5px;margin-left:10.5px;">
        <br style="line-height:1;font-size:0px">
        <span id="nend_icon_title_00000_000000_0" style="display:block;float:none;margin-top:4px;margin-bottom:2px;margin-left:auto;margin-right:auto;padding:0px;width:78px;border:none;line-height:1;text-align:center;text-indent:0;font-style:normal;font-weight:normal;letter-spacing:0px;font-size:10px;color:#000000;background:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">広告テキスト</span>
      </a>
    </li>
    <li id="nend_icon_00000_000000_0" style="display:inline-block;padding:0px;margin:0px;line-height:1;border:none;background:transparent;text-indent:0;font-size:0px;vertical-align:top;">
      <a href="http://c1.nend.net/click.php?xxx" target="_blank" style="text-decoration:none;background:transparent;border:none;padding:0px;margin:0px;font-size:0px;line-height:1;">
        <img src="http://img1.nend.net/img/icon/0000/00000/0000.gif" border="0" alt="広告テキスト" style="border:none;fload:none;background:transparent;width:57px;height:57px;padding:0px;margin-top:1px;magin-bottom:1px;margin-right:10.5px;margin-left:10.5px;">
        <br style="line-height:1;font-size:0px">
        <span id="nend_icon_title_00000_000000_0" style="display:block;float:none;margin-top:4px;margin-bottom:2px;margin-left:auto;margin-right:auto;padding:0px;width:78px;border:none;line-height:1;text-align:center;text-indent:0;font-style:normal;font-weight:normal;letter-spacing:0px;font-size:10px;color:#000000;background:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">広告テキスト</span>
      </a>
    </li>
    <li id="nend_icon_00000_000000_0" style="display:inline-block;padding:0px;margin:0px;line-height:1;border:none;background:transparent;text-indent:0;font-size:0px;vertical-align:top;">
      <a href="http://c1.nend.net/click.php?xxx" target="_blank" style="text-decoration:none;background:transparent;border:none;padding:0px;margin:0px;font-size:0px;line-height:1;">
        <img src="http://img1.nend.net/img/icon/0000/00000/0000.gif" border="0" alt="広告テキスト" style="border:none;fload:none;background:transparent;width:57px;height:57px;padding:0px;margin-top:1px;magin-bottom:1px;margin-right:10.5px;margin-left:10.5px;">
        <br style="line-height:1;font-size:0px">
        <span id="nend_icon_title_00000_000000_0" style="display:block;float:none;margin-top:4px;margin-bottom:2px;margin-left:auto;margin-right:auto;padding:0px;width:78px;border:none;line-height:1;text-align:center;text-indent:0;font-style:normal;font-weight:normal;letter-spacing:0px;font-size:10px;color:#000000;background:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">広告テキスト</span>
      </a>
    </li>
    <li id="nend_icon_00000_000000_0" style="display:inline-block;padding:0px;margin:0px;line-height:1;border:none;background:transparent;text-indent:0;font-size:0px;vertical-align:top;">
      <a href="http://c1.nend.net/click.php?xxx" target="_blank" style="text-decoration:none;background:transparent;border:none;padding:0px;margin:0px;font-size:0px;line-height:1;">
        <img src="http://img1.nend.net/img/icon/0000/00000/0000.gif" border="0" alt="広告テキスト" style="border:none;fload:none;background:transparent;width:57px;height:57px;padding:0px;margin-top:1px;magin-bottom:1px;margin-right:10.5px;margin-left:10.5px;">
        <br style="line-height:1;font-size:0px">
        <span id="nend_icon_title_00000_000000_0" style="display:block;float:none;margin-top:4px;margin-bottom:2px;margin-left:auto;margin-right:auto;padding:0px;width:78px;border:none;line-height:1;text-align:center;text-indent:0;font-style:normal;font-weight:normal;letter-spacing:0px;font-size:10px;color:#000000;background:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">広告テキスト</span>
      </a>
    </li>
  </ul>
  <img style="border:none !important:width:0px !important;height:0px !important; padding:0px !important; margin 0px !important;" src="http://impression.nend.net/impression.php?xxx" alt>
</div>

nend広告のスタイルを変更してみる。htmlタグにstyleが直打ちされているので、!importantルールを使ったcssを追加する。広告全体を左寄せしたいならこんな感じ。

※ちなみに広告タグを<div id="nend">で囲っている場合です

<style type="text/css">
<!--
  #nend ul { text-align: left !important; }
  #nend img { margin-left: 0px !important; }
  #nend span {
    width: 58px !important;
    margin-left: 0px !important;
  }
-->
</style>

最後に注意点を。

nendでは広告タグの改変は認めていない恐れがあるので、スタイルを変更する場合は自己責任でどうぞ。