ニコニコ外部プレーヤーが「アメブロ」にも対応！
ニコニコ外部プレーヤーが「アメブロ」にも対応！だとさ・・・
ニコニコニュース
タグ編集エディタで
<script type="text/javascript" src="http://www.nicovideo.jp/thumb_watch/sm2619617"></script>
<script type="text/javascript" src="http://www.nicovideo.jp/thumb_watch/sm2619617?w=400&h=324"></script>
<script type="text/javascript" src="http://www.nicovideo.jp/thumb_watch/sm2619617?w=350&h=288"></script>
<script type="text/javascript" src="http://www.nicovideo.jp/thumb_watch/sm2619617?w=300&h=250"></script>
サムネイル画像は
http://tn-skr.smilevideo.jp/smile?i=2619617
と、IDを入れます
smile.jpg
サイズ変更はゲーム雑っ記さまからです
?eco=1 で、エコノミーモードになるとの事ですが・・・???
3日からThickBoxで出来ないかやってましたが・・・・
うまくいきません・・・
まっ、簡単だからいいか・・・・
※画面を横切るコメントがウザイという方は
画面右下にある
をクリックして
にしてください仕組み・・・
これが簡単な説明です・・・
なんかこうやって説明するとたいしたことないですね・・・・
function _enTb() {
var myLimit=300,k=1,i; 変数を定義しています myLimit=300は暴走したら困るので300までで限度に
var ourl = http://ameblo.jp/public/image/displayimage.do?imagePath="
アメブロによって書き換えられた画像のURL--Ａ
var nurl = http://stat.ameba.jp 元に戻す画像のURL--Ｂ
var myLinks = document.getElementsByTagName("a"); 1ページの中の<a>タグをセットします
for(i = 0; i < myLinks.length; i++){ それを1つずつ
var myLink = myLinks[i]; 調べていきます
if(myLink.href.indexOf("do?imagePath") > 0){ もし<a>タグの中にdo?imagePathがあったら
myLink.href = (myLink.href).replace(ourl,nurl); 画像のURL ＡをＢに変えます
myLink.className = "thickbox"; ついでに<a>タグの中にclass= "thickbox"を加えます
var myTitle = myLink.childNodes[0].getAttribute("alt"); myLink.setAttribute("title",myTitle);}
サムネイル画像のタイトルを<a>タグにタイトルとしてコピーします
k++;if (k > myLimit) {break;}}} 安全のためチェックが300回を超えたら中止します
function enThickbox() {var ret = 0;_enTb(); ↓ココからはエラー回避
try {initializeUpload(false, false);} catch(ret) {}
try {checkpw();} catch(ret) {}}
window.onload = function(){enThickbox();} このページを全部開いてからこのスクリプトを動かします
※Thickboxで「タイトル未設定」と出ないようにするには
いままでみなさんがチャレンジして出来なかったわけは
アメブロによって公開時に画像のURLがＡのように書き換えられていたからです
このスクリプトは逆に書き換えられたURLを探して元の画像のURLに戻してしまいます
ついでにクラス、タイトルもつけるようにしたので何もしなくても動作出来るようになりました
なのでコレを使えばThickboxだけでなくLightbox、Slimbox（前のページでLightboxはこちらって紹介 していますが実はSlimboxなんです・・・Lightboxと見かけはまったく変わりません）などなど・・・・
JavaScriptとCSSさえ用意すれば動いてしまいます
※ameba-custom さまの方でLightbox説明されています
他にも<a>タグを<span>に変えたり
<a>タグの中身を変えたり、前後に他の物を付け加えたりとか
使い道はいろいろと出てくると思います
私のように付けすぎると後で元に戻せなくなりますのでほどほどに改変ください
たかがこんな簡単なことに去年からズルズルしていたのですが
皆さまの直接のご依頼と脅迫？そして無言の圧力のおかげで何とかすることが出来ました
ありがとうございました
PS. 使い方やカスタマイズの仕方を記事にしようとしたのですが
実際に完成したのが去年で自分でもなんでこんな使い方をしたのか忘れてしまっています
YouTubeなんてマジで付け方忘れました・・・設置は出来ますが説明できません・・・
ネットで調べましたがありません・・・・
ど～しましょ・・・？
Thickbox すっぴんバージョン
4/7 少し変更しました
すっぴんバージョンとしてはたぶん完成です
すっぴんバージョン＋コメント部分を管理人とゲストに分けるのを付け加えた
Thickboxとコメント背景の両方を使用する場合は↑コチラを使用下さい
アメブロでThickboxを使うためのスクリプトです
フリープラグインに青字部分をそのままコピペするだけで使えます
※フリープラグインには3800字の字数制限があります
引っかかった場合は他のプラグインを外すか導入は諦めてください
これがThickboxです↓クリックしてみてください
↓これもクリックしてくださいYouTubeも・・・
使用方法は べつに・・・・・
基本的に何もする必要はありません
今まで通りに記事をカキコして画像を貼るだけです
１ページ内で複数の画像を関連付けグループ化する場合はこちらの記事 を参考にして下さい
表示される画像についているタイトルの付け方、変更方法も↑にあります
※必ず現在のフリープラグインは別に保存した上で試してください
フリープラグインに青字部分をそのままコピペしてください
<link href="http://stat.ameba.jp/blog/ucs/css/common/thickbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/editor/selectimage.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/jquery.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/thickbox.js"></script >
<SCRIPT LANGUAGE="JavaScript">
<!--
/* 80407exlink/vjcatkick */
function enTb() {
var myLimit=500,e=0,k=1,i;
var ourl = "http://ameblo.jp/public/image/displayimage.do?imagePath="
var nurl = "http://stat.ameba.jp"
var myLinks = document.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
var myLink = myLinks[i];
if(myLink.href.indexOf("do?imagePath") > 0){
myLink.href = (myLink.href).replace(ourl,nurl);
myLink.className = "thickbox";
if(!myLink.innerHTML.match(/<img/i) && myLink.href != ""){ myLink.setAttribute("title"," ");} else {var myTitle = myLink.childNodes[0].getAttribute("alt"); myLink.setAttribute("title",myTitle);}}
k++;if (k > myLimit) {break;}}}
function enThickbox() {enTb();
try {initializeUpload(false, false);} catch(e) {}
try {checkpw();} catch(e) {}}
window.onload = function(){enThickbox();}
// -->
</SCRIPT>
※myLimit=300は念のため<a>タグチェックを300個に設定しています--変更可
同じページの中で動作する画像しない画像がある場合・・・
まれに同じページ内で動作する画像と動作しないで新しいウインドウで開いてしまう場合があります
ソースを見ると（記事の編集のHTMLタグを表示ではありません）
動作する場合は
<a href="http://ameblo.jp/public/image/displayimage.do?imagePath=/user_images/33/88/100000.gif " target="_blank"><img src="http://stat.ameba.jp/user_images/33/88/100000_s.gif " /></a>
動作しない場合はなぜか下のようになっている場合があります・・・・
（記事の編集のHTMLタグを表示では全部がこうなっています間違えないようにしてください）
<a href="http://stat.ameba.jp/user_images/33/88/100000.gif " target="_blank"><img src="http://stat.ameba.jp/user_images/33/88/100000_s.gif " /></a>
アメブロによって変えられているdo?imagePath部分を探して処理していますので下のような場合は処理できません
その場合は<a>タグの中にclass="thickbox"を書き加えてください
<a class="thickbox" href="http://stat.ameba.jp/user_images/33/88/100000.gif " target="_blank"><img src="http://stat.ameba.jp/user_images/33/88/100000_s.gif " /></a>
※テキストからのリンクは動作しません
<a href="画像のURL" target="_blank">画像はココをクリック</a>
または<a href="画像のURL" target="_blank"></a>
コレが１つでもあるとそのページ全部でthickboxが動作しません
他のページでは動作するのにという場合は確認してください
アメブロの場合<a href="画像のURL" target="_blank"></a>これ出来やすいので
動作しない場合は最初に確認下さい
※4/7 動作するようにしました
まったく動作しない場合・・・・
まずはいろんなページで試してみてください
どこかのページで動作したら上のチェックをして下さい
全部がダメな場合はサイドにつけてあるプラグインが原因かもです
サイドバーの配置で1つずつ使用しないにして動作するか確認していってください
フリープラグインにいくつも入っている場合は現在の状態を保存した上で他のプラグインを全部外してから確認下さい
それで動作すればそのプラグインのうちどれかと相性が悪かったと判断できます
Thickboxが動作しない場合は、
今までと同じように新しい画面が立ち上がるだけです
エラーは表示されますが気にしなくてもOKです
ソースを開いて記事中のミスを探して訂正下さい
タイトルが必要でない方は・・・
今後ともタイトルを付ける予定がなくて「タイトル未設定」と表示されるのを出ないようにするには
if(!myLink.innerHTML.match(/<img/i) && myLink.href != ""){ myLink.setAttribute("title"," ");} else {var myTitle = myLink.childNodes[0].getAttribute("alt"); myLink.setAttribute("title",myTitle);}}
この部分を
myLink.setAttribute("title"," ");}
このように変更してください
その代わり後でaltにタイトルを入れてもタイトルは付きません
また何枚かの画像だけタイトルをつけない場合は
<a href="画像のURL" target="_blank"><img alt=" " src="サムネイル画像のURL" /></a>
その画像のサムネイルのaltに 半角、または全角のスペースを入れてください
タイトルは付くのですがスペースなので見えなくなるわけです
※ alt="" だと「タイトル未設定」って付いてしまいます・・・アメブロ仕様です
※携帯から写真をアップしている場合
タイトルが長すぎて表示が崩れる場合があります
写真の幅に比べてタイトルが長すぎるので表示位置が崩れます
PCでタイトルを付けなおすか、タイトルを表示しないようにしてください
※大きな画像は画面に収まるよう縮小されて表示されます
※ページ全部を読み終わってから動作しますので重い画像、たくさんの画像が貼ってある場合や、
重いプラグイン等がある場合は動作はじめるまでに時間がかかります
外部にファイルを置ける方はLightboxも試してください
LightboxはLightboxの呼び出しもグループのどちらもrel属性をつかいます
なので私は<a>タグにいちいち加えてやりました
3800字制限がありますので出来るだけ詰めて記入しておりますので見難くなっています
なので、長ったらしい著作権表示は出来ませんが/* exlink/vjcatkick */は消さないでお願いします
なお、いろんな機能を付け加えたりして改変された場合は/* exlink/vjcatkick/あなたのID */と
あなたのIDを加えた上で自由に再配布していただいてかまいません
エラー部分の回避はさまに協力いただきました
FLO：Qとは相性が悪いようです
FLO：Qは削除するかこちらを諦めるかです
2008.8.6
アメブロの画像表示方法の変更によりThickboxは自動では使えなくなりました
ど～しても使いたい方は・・・面倒でもいいよって方は・・・