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