WordPressのプラグイン、『FeedList』を使ってニコニコ動画のマイリストを表示させる方法です。
ニコニコ動画のマイリストなどはRSS配信されているので、以前紹介した方法でやればOKです。
しかし配信先によって、タグ等が違います。
実際このブログの右サイドに表示している形式を元に、以下より説明いたします。
『FeedList』の設置の仕方は『【WordPress】Tumblrを表示させる方法』を参照してください。
以下は、ニコニコ動画のマイリストのRSSから配信されているコードです。
<div class="nico_box">
<span class="rssLinkListItemTitle"><a href="http://www.nicovideo.jp/watch/sm***" rel="external" title="動画UP者のコメント 動画時間｜投稿日 投稿時間 投稿">動画タイトル</a></span><br />
<p class="nico-memo">自分で付けた動画メモ</p>
<p class="nico-thumbnail"><img alt="動画タイトル" src="http://tn-skr4.smilevideo.jp/smile?i=***" width="94" height="70" border="0"/></p>
<p class="nico-description">動画UP者のコメント</p>
<p class="nico-info"><small><strong class="nico-info-length">動画時間</strong>｜<strong class="nico-info-date">投稿日 投稿時間</strong> 投稿</small></p>
</div>赤字は動画によって変わる部分です。
上記のように、ニコニコ動画は細かくクラス分けされているので、後は自分好みにCSSに書くだけです。
<div class="nico_box">～</div>以下は私が書いたCSS。
/* ボックスにポジションを付けます。 */
.nico_box {
position: relative;
height: 110px;
margin: 0 5px 10px;
}
/* 画像の位置決めと、94x70に縮小されているので元のサイズに戻します。 ついでに枠も付けてみる。 */
.nico_box .nico-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 130px;
height: 100px;
padding: 2px;
border: solid 1px #ccc;
background: #fff;
}
/* 動画タイトルの位置決め。 */
.nico_box .rssLinkListItemTitle {
position: absolute;
top: 0;
left: 140px;
padding: 2px 0 2px 5px;
font-size: 12px;
}
/* メモは付けていませんが、一応隠します。 */
.nico_box .nico-memo {
height: 0;
overflow: hidden;
}
/* 動画UP者のコメントも隠します。 */
.nico_box .nico-description {
height: 0;
overflow: hidden;
}
/* 動画の時間や投稿日などの位置決め。 */
.nico_box .nico-info {
position: absolute;
bottom: 0;
right: 0;
font-size: 10px;
}
/* 太字を普通にします。 */
.nico_box .nico-info strong {
font-weight: normal;
}
/* strongをブロック化にし、右寄せにします。 */
.nico_box .nico-info-length {
display: block;
text-align: right;
}実際四苦八苦した IE6での問題点。
動画のUP者コメント（多分）の内容によって、表示がおかしくなります。
ソース見ると、普段しない文字バケをおこしていました。
他の動画ではならなかったので、只単に「この動画のコメントが影響してる」としか言えません。
ちなみにこの崩れが起こるのは、案の定IEだけ。
何が原因かは掴めていないので、こればっかりはIEだけの悪口を言えないのでした・・・。
追記（6/12 23:20）
今日見たら、何もなく直ってました。
RSSの受信が上手くいってなかったのかな。
原因はさっぱりですが、直って良かった事に変わりはありません。
