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

ぬじろぐ

メモです。議論やコメントは受け付けておりません。当方オタクの女ですので、唐突に腐ったりします。注意。

ニコ動の外部貼り付け模索

tips web

せっかくサイトのデザインをレスポンシブにしたのに、ニコニコの外部貼り付けタグを使うとはみ出てかっこ悪いしスマホでの取り回しも悪い…ということでどうにかしました。

http://d.hatena.ne.jp/sikii_j/20080814/p1
こちらを参照に、まずブックマークレートを改造

javascript: (function(){ var test=prompt('以下のタグをコピペ','<div class="nico_item"><a href="'+document.URL+'" target="_blank"><img src="http://tn-skr.smilevideo.jp/smile?i='+document.URL.substring(32)+'" alt="'+document.title+'">'+document.title+'</a></div>'); })();

これをブクマに登録して、貼り付けたい動画のページでぽちっとすると

<div class="nico_item"><a href="動画アドレス"></a><img src="サムネイルアドレス">動画タイトル</a></div>

こうなります。
div要素の部分は、CSSでデザインをいじるためのもの。

んで、CSSをこんな感じかな?

.nico_item{border:solid 1px #ccc;
           padding:5px; 
           max-width:320px;
           /* Firefox */
              background: -moz-linear-gradient(top center, #fff 0%, #efefef 100%);
           /* Chrom , Safari */
           background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#efefef));
           }
.nico_item img{width:50%; height:50%; border:solid 2px #333;}
.nico_item a {font-weight:bold;
              color:#555;
              text-decoration: underline;}
.nico_item a:hover{color:#999;}