› web工房 やんばる堂 › カスタムプラグイン2011年07月05日
【EDIT 】カスタムプラグイン
テンプレートをいじるのはこれくらいにして、
カスタムプラグインなるものを使ってみることにする。
管理画面＞ブログ環境設定＞カスタムプラグインの登録
ここに HTMLタグで 記述した内容がサイドバーで指定した位置に
表示される。
試してみた結果
左サイドバーに、ちゃんと表示されている。
しかも、JAVAスクリプトを埋め込むことができ、
記事本文のデータにもアクセス可能であることがわかった。
これなら、テンプレートをカスタマイズするまでもなく
上記のカスタムプラグインの登録ページで
HTMLタグソースを貼り付けて登録するだけでいい。
記事中に切替表示する画像のURL一覧をリストアップして
サイドバーでスライド表示
デフォルトの一覧とボタンで切り替える。
画像のURL一覧はいつでも、記事本文で切り替えられるようにする
完成したら、コメント欄で カスタムプラグイン登録用の
HTML貼り付けソースを公開して、だれでも簡単に使えるようにする。
・・・・予定
たぶん、２～３日ではできるだろう。
Posted by ひでぼ@やんばる堂 at 12:52│Comments(1)
この記事へのコメント
とりあえず、切替表示は、うまくいっているようです。
これだと、トップページ（新着記事ほか）でも
個別記事でも、問題なく動作する。
切替画像のURL一覧を、個別記事で設定して
それを、反映させるのに、もう少し時間がかかりそうだ。
プラグインのHTMLソースを自分でカスタマイズして
切替画像のURL一覧を、変更したいという方は
次のソースの、該当箇所を適当に書き換えて試して
みて下さい
<!------------------------------------------
＊カスタムプラグイン用HTMLテンプレート
------------------------------------------->
<body onload=start1()>
<span style=font-weight:bold;background-color:#ffffff;color:#ff3333;>スライドショー</span><BR>
<img id=img1 width=300 height=200 src="" style="filter:blendTrans(duration=3.0) revealTrans(transition=23 duration=2.0);">
<br>
<iframe width="300" height="20" onclick=start1()
src="http://www.youtube.com/embed/-DW8ecqu0Iw?rel=0"
frameborder="0" allowfullscreen></iframe>
<!--------画像URL一覧---------->
<input type=hidden id=dt1 value="//img02.ti-da.net/usr/delshanon/IMG_1705.jpg
//img02.ti-da.net/usr/delshanon/IMG_1713.jpg">
<!--------画像URL一覧ここまで---------->
<!----------------------------------------------
＊JAVAスクリプト
------------------------------------------->
<script language=javascript type=text/javascript><!--
var BR=String.fromCharCode(10)
var sec=0
var RX=0
var IMG=new Array()
function cutStr(str,str1,str2){
var yy=str.split(str1)
var xx=yy[1].split(str2)
ret=xx[0]
//ret=trimCsv(ret)
return ret
}
/**********************************************
＊start()
//img02.ti-da.net/usr/delshanon/IMG_1705.jpg
***********************************************/
function start1(){
sec=0
dt=document.all.dt1.value
IMG=dt.split(BR)
document.all.img1.src=IMG[0]
RX=0
slideUrl()
}
/**********************************************
＊タイマー
***********************************************/
function slideUrl(){
dt=document.all.dt1.value
IMG=dt.split(BR)
SRC=IMG[RX]
WT=6*1000
TR="blend"
TR="23"
DR="2.0"
elm=document.all.img1
if(TR=="blend"){
elm.filters.blendTrans.Apply();
elm.filters.blendTrans.duration=DR
elm.style.visibility="visible"
elm.src=SRC
elm.filters.blendTrans.Play()
elm.style.display="block"
}else{
elm.filters.revealTrans.Apply();
elm.filters.revealTrans.duration=DR
elm.filters.revealTrans.transition=TR
elm.style.visibility="visible"
elm.filters.revealTrans.Play()
elm.src=SRC
}
RX++
LX=IMG.length-1
if(RX>LX){RX=0}
timer1=setTimeout("slideUrl()",WT)
}
//-->
</script>
これだと、トップページ（新着記事ほか）でも
個別記事でも、問題なく動作する。
切替画像のURL一覧を、個別記事で設定して
それを、反映させるのに、もう少し時間がかかりそうだ。
プラグインのHTMLソースを自分でカスタマイズして
切替画像のURL一覧を、変更したいという方は
次のソースの、該当箇所を適当に書き換えて試して
みて下さい
<!------------------------------------------
＊カスタムプラグイン用HTMLテンプレート
------------------------------------------->
<body onload=start1()>
<span style=font-weight:bold;background-color:#ffffff;color:#ff3333;>スライドショー</span><BR>
<img id=img1 width=300 height=200 src="" style="filter:blendTrans(duration=3.0) revealTrans(transition=23 duration=2.0);">
<br>
<iframe width="300" height="20" onclick=start1()
src="http://www.youtube.com/embed/-DW8ecqu0Iw?rel=0"
frameborder="0" allowfullscreen></iframe>
<!--------画像URL一覧---------->
<input type=hidden id=dt1 value="//img02.ti-da.net/usr/delshanon/IMG_1705.jpg
//img02.ti-da.net/usr/delshanon/IMG_1713.jpg">
<!--------画像URL一覧ここまで---------->
<!----------------------------------------------
＊JAVAスクリプト
------------------------------------------->
<script language=javascript type=text/javascript><!--
var BR=String.fromCharCode(10)
var sec=0
var RX=0
var IMG=new Array()
function cutStr(str,str1,str2){
var yy=str.split(str1)
var xx=yy[1].split(str2)
ret=xx[0]
//ret=trimCsv(ret)
return ret
}
/**********************************************
＊start()
//img02.ti-da.net/usr/delshanon/IMG_1705.jpg
***********************************************/
function start1(){
sec=0
dt=document.all.dt1.value
IMG=dt.split(BR)
document.all.img1.src=IMG[0]
RX=0
slideUrl()
}
/**********************************************
＊タイマー
***********************************************/
function slideUrl(){
dt=document.all.dt1.value
IMG=dt.split(BR)
SRC=IMG[RX]
WT=6*1000
TR="blend"
TR="23"
DR="2.0"
elm=document.all.img1
if(TR=="blend"){
elm.filters.blendTrans.Apply();
elm.filters.blendTrans.duration=DR
elm.style.visibility="visible"
elm.src=SRC
elm.filters.blendTrans.Play()
elm.style.display="block"
}else{
elm.filters.revealTrans.Apply();
elm.filters.revealTrans.duration=DR
elm.filters.revealTrans.transition=TR
elm.style.visibility="visible"
elm.filters.revealTrans.Play()
elm.src=SRC
}
RX++
LX=IMG.length-1
if(RX>LX){RX=0}
timer1=setTimeout("slideUrl()",WT)
}
//-->
</script>
Posted by ひでぼ
at 2011年07月05日 17:06
at 2011年07月05日 17:06
画像一覧 
