Last.fmウィジェットのコード整形

css html memo

自分用？メモ。本家(http://www.lastfm.jp/widgets/chart/?chartType=recenttracks&path=default)で生成されるコードが気に入らないから、整形した。

before

トンデモHTML
<style type="text/css">table.lfmWidgetchart_c23c75cb1a77280e6a12e9272784b5eb td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidgetchart_c23c75cb1a77280e6a12e9272784b5eb tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/jp/header/chart/recenttracks_regular_grey.png) no-repeat 0 0 !important;}table.lfmWidgetchart_c23c75cb1a77280e6a12e9272784b5eb tr.lfmEmbed object {float:left;}table.lfmWidgetchart_c23c75cb1a77280e6a12e9272784b5eb tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/jp/footer/grey.png) no-repeat 0px 0 !important;;}table.lfmWidgetchart_c23c75cb1a77280e6a12e9272784b5eb tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/jp/footer/grey.png) no-repeat -85px 0 !important;}table.lfmWidgetchart_c23c75cb1a77280e6a12e9272784b5eb tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/jp/footer/grey.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidgetchart_c23c75cb1a77280e6a12e9272784b5eb" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="kageroh: 最近聴いたトラック" href="http://www.lastfm.jp/user/kageroh/" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/jp/header/chart/recenttracks_regular_grey.png) no-repeat 0 -20px;text-decoration:none;border:0;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" data="http://cdn.last.fm/widgets/chart/19.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="184" height="179" > <param name="movie" value="http://cdn.last.fm/widgets/chart/19.swf" /> <param name="flashvars" value="type=recenttracks&amp;user=kageroh&amp;theme=grey&amp;lang=jp&amp;widget_id=chart_c23c75cb1a77280e6a12e9272784b5eb" /> <param name="bgcolor" value="999999" /> <param name="quality" value="high" /> <param name="allowScriptAccess" value="always" /> <param name="allowNetworking" value="all" /> </object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/grey.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.lastfm.jp/widgets/?colour=grey&amp;chartType=recenttracks&amp;user=kageroh&amp;chartFriends=0&amp;from=code&amp;widget=chart" title="自分だけのウィジェットをゲット" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/jp/footer/grey.png) no-repeat 0px -20px;text-decoration:none;border:0;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.lastfm.jp/user/kageroh/" title="kageroh のプロフィールにアクセス" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/jp/footer/grey.png) no-repeat -85px -20px;text-decoration:none;border:0;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.lastfm.jp/widgets/popup/?colour=grey&amp;chartType=recenttracks&amp;user=kageroh&amp;chartFriends=0&amp;from=code&amp;widget=chart&amp;resize=1" title="このウィジェットをポップアップに読み込む" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/jp/footer/grey.png) no-repeat -159px -20px;text-decoration:none;border:0;" onclick="window.open(this.href + '&amp;resize=0','lfm_popup','height=279,width=234,resizable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table>

after

XHTML
<table class="lfm">
  <thead>
    <tr>
      <td colspan="3">
        <a
          title="kageroh: 最近聴いたトラック"
          href="http://www.lastfm.jp/user/kageroh/"
          >
        </a>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td class="config">
        <a
          title="自分だけのウィジェットをゲット"
          href="http://www.lastfm.jp/widgets/?colour=grey&amp;chartType=recenttracks&amp;user=kageroh&amp;chartFriends=0&amp;from=code&amp;widget=chart"
          >
        </a>
      </td>
      <td class="view">
        <a
          title="kageroh のプロフィールにアクセス"
          href="http://www.lastfm.jp/user/kageroh/"
          >
        </a>
      </td>
      <td class="popup">
        <a
          title="このウィジェットをポップアップに読み込む"
          href="http://www.lastfm.jp/widgets/popup/?colour=grey&amp;chartType=recenttracks&amp;user=kageroh&amp;chartFriends=0&amp;from=code&amp;widget=chart&amp;resize=1"
          target="_blank"
          >
        </a>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">
        <object
          codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
          data="http://cdn.last.fm/widgets/chart/19.swf"
          type="application/x-shockwave-flash"
          width="184"
          height="179"
          >
          <param
            name="movie"
            value="http://cdn.last.fm/widgets/chart/19.swf"
            />
          <param
            name="flashvars"
            value="type=recenttracks&amp;user=kageroh&amp;theme=grey&amp;lang=jp&amp;widget_id=chart_cba70e0086672310041ab7e1b13fb750"
            />
          <param
            name="bgcolor"
            value="999999"
            />
          <param
            name="quality"
            value="high"
            />
          <param
            name="allowScriptAccess"
            value="always"
            />
          <param
            name="allowNetworking"
            value="all"
            />
        </object>
      </td>
    </tr>
  </tbody>
</table>
CSS
table.lfm {
  border-collapse: collapse;
}

table.lfm a {
  background-repeat: no-repeat;
  display: block;
  height: 20px;
  overflow: hidden;
}

table.lfm thead a {
  background-image: url('http://cdn.last.fm/widgets/images/jp/header/chart/recenttracks_regular_grey.png');
  background-position: 0 -20px;
}

table.lfm thead a:hover {
  background-position: 0 0;
}

table.lfm tfoot a {
  background-image: url('http://cdn.last.fm/widgets/images/jp/footer/grey.png');
}

table.lfm tfoot td.config a {
  background-position: 0 -20px;
  width: 85px;
}

table.lfm tfoot td.config a:hover {
  background-position: 0 0;
}

table.lfm tfoot td.view a {
  background-position: -85px -20px;
  width: 74px;
}

table.lfm tfoot td.view a:hover {
  background-position: -85px 0;
}

table.lfm tfoot td.popup a {
  background-position: -159px -20px;
  width: 25px;
}

table.lfm tfoot td.popup a:hover {
  background-position: -159px 0;
}

すっきり。特にCSSは無駄が多かったから。

はてなはHTML 4.01なので、param要素が嘘だけど。

<param name="ほげ" value="ぴよ" />

これを、

<param name="ほげ" value="ぴよ">

こうしてしまうと、なぜか巧くいかない。