別窓を指定サイズで開く （ 2 ）
2005年03月02日 AQ
パート （ ２ ） では、パート （ １ ） を少し進化させました ・・・ というより手間が増えただけなんですが 
パート （ １ ） ではクリックしてポップアップするページが " プロフィール " の ＵＲＬ 入力欄がひとつしかない為、画像ページもひとつしか設定できませんが、こちらの方法ですと何個も設定できます。まずは下をご覧下さい。
パート （ １ ） ではクリックしてポップアップするページが " プロフィール " の ＵＲＬ 入力欄がひとつしかない為、画像ページもひとつしか設定できませんが、こちらの方法ですと何個も設定できます。まずは下をご覧下さい。  マーボは、ドッグショーにチャレンジ中です p(^0^)q 応援して下さいね〜♪
|
黄色の文字の
「 ☆CERTIFIED PEDIGREE 」 をクリックしてみて下さい。左上に血統が記載された HTML ページがポップアップしてくるはずです。さらにその下の ・マーボがGet？ をクリックして下さい。違うページがポップアップします。表示されるページごとに、幅・高さを設定できます。もちろん何個でも設定できます。大変ですが ^_^;
さてこれのカスタマイズの仕方なんですが、血統書の画像を埋め込んだ HTML ページ （ 画像だけではなく、HTML のページならなんでも良いですけど ） を、必要な分だけ作成しなければなりません。下記のような記述で作成し、サーバーに上げて URL を控えておいて下さい。赤字の部分 を適宜変更するようにして下さい。ここまでは
パート （ １ ） と同じです。
この次に、カスタマイズ / 管理 > プラグインの新規追加からフリースペースを選択し、そのフリースペースの中に、あらかじめ作成しておいた HTML のページをポップアップさせるためのリンクを貼ります。フリースペースを設置する場所は、このパート （ ２ ） の場合はどこに設置しても問題ありません。お好きな所にどうぞ。
通常リンクを貼る時には、このようにしますが ・・・
このページにサンプルで作った上記の場合ですと ・・・
のようになります。javascript:subWin1(); の末尾にある数字の 1 は、ポップアップさせる HTML と連動しますから、２つ 作成した場合は ２つめ のリンクは当然 2 に変わります。
さて最後にスクリプトの設置です。
この上記のスクリプトを、トップページ・個別記事・カテゴリー別・月別のすべてのHTMLに、追記して下さい。記述する位置は、<head> 〜 </head> の間ならばどこでもかまいません。
赤字の部分 は、適宜変更して下さい。 幅と高さのところは、画像より ＋20 ぐらいの大きさが綺麗かと思います、ご自身で調整して下さい。px などの余計な記号はいりません、数値だけで OK です。
青字の部分 も変更する部分なのですが、1 と 2 に数字が変わっている事に注意して下さい。ポップアップさせるページが増えるごとに、このfunction subWin 数字(){ 〜 } の記述を増やしていきます。それにあわせて、window 数字 、sub 数字 の部分の数値も変更して下さい。
さあ、あとは再構築するだけです。調整中の時はトップページのみを。成功したのを確認したら、全ページを再構築して下さい。頑張って
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>MARBO -CERTIFIED PEDIGREE-</title>
</head>
<body>
<p align="center"><a href="#" onClick="window.close()"><img border="0" src="表示する画像のURL" width="画像の幅" height="画像の高さ"></a></p>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>MARBO -CERTIFIED PEDIGREE-</title>
</head>
<body>
<p align="center"><a href="#" onClick="window.close()"><img border="0" src="表示する画像のURL" width="画像の幅" height="画像の高さ"></a></p>
</body>
</html>
この次に、カスタマイズ / 管理 > プラグインの新規追加からフリースペースを選択し、そのフリースペースの中に、あらかじめ作成しておいた HTML のページをポップアップさせるためのリンクを貼ります。フリースペースを設置する場所は、このパート （ ２ ） の場合はどこに設置しても問題ありません。お好きな所にどうぞ。
通常リンクを貼る時には、このようにしますが ・・・
<a href="http://blog.pekebatu.com/○○○.html">☆CERTIFIED
PEDIGREE</a>
このページにサンプルで作った上記の場合ですと ・・・
<a href="javascript:subWin1();">☆CERTIFIED
PEDIGREE</a>
のようになります。javascript:subWin1(); の末尾にある数字の 1 は、ポップアップさせる HTML と連動しますから、２つ 作成した場合は ２つめ のリンクは当然 2 に変わります。
さて最後にスクリプトの設置です。
<script
language="javascript">
function subWin1(){
sub1=window.open("作ったHTMLのURL(1)","window1","scrollbars=no,resizable,menubar=no,directories=no,status=no,location=no,width=画像の幅＋20,height=画像の高さ＋20");
}
function subWin2(){
sub2=window.open("作ったHTMLのURL(2)","window2","scrollbars=no,resizable,menubar=no,directories=no,status=no,location=no,width=画像の幅＋20,height=画像の高さ＋20");
}
</script>
function subWin1(){
sub1=window.open("作ったHTMLのURL(1)","window1","scrollbars=no,resizable,menubar=no,directories=no,status=no,location=no,width=画像の幅＋20,height=画像の高さ＋20");
}
function subWin2(){
sub2=window.open("作ったHTMLのURL(2)","window2","scrollbars=no,resizable,menubar=no,directories=no,status=no,location=no,width=画像の幅＋20,height=画像の高さ＋20");
}
</script>
この上記のスクリプトを、トップページ・個別記事・カテゴリー別・月別のすべてのHTMLに、追記して下さい。記述する位置は、<head> 〜 </head> の間ならばどこでもかまいません。
赤字の部分 は、適宜変更して下さい。 幅と高さのところは、画像より ＋20 ぐらいの大きさが綺麗かと思います、ご自身で調整して下さい。px などの余計な記号はいりません、数値だけで OK です。
青字の部分 も変更する部分なのですが、1 と 2 に数字が変わっている事に注意して下さい。ポップアップさせるページが増えるごとに、このfunction subWin 数字(){ 〜 } の記述を増やしていきます。それにあわせて、window 数字 、sub 数字 の部分の数値も変更して下さい。
さあ、あとは再構築するだけです。調整中の時はトップページのみを。成功したのを確認したら、全ページを再構築して下さい。頑張って
1. Posted by ガク
2007年11月15日 09:30
「別窓を指定サイズで開く」この方法を、とてもよく理解できました。
解りやすいご説明で、感激してます。
お仕事は講師関係でしょうか？
それでは失礼致します。
解りやすいご説明で、感激してます。
お仕事は講師関係でしょうか？
それでは失礼致します。
2. Posted by AQ
2007年11月16日 22:55
＞ ガクさん
>>1
スクリプトの設置、上の記事では各 HTML の <head> 〜 </head> って書いていますけど、投稿記事文章中にこれを活用するのなら、その記事の一番上に記述すれば良いですよ。
この記事を書いた頃は、それで問題なく作動するか自信が
無かったんですけど、後に問題が無いことがわかりました。
応用でやってみて下さい (^^)
PS. 講師の仕事もやっておりました (^^)v
>>1
スクリプトの設置、上の記事では各 HTML の <head> 〜 </head> って書いていますけど、投稿記事文章中にこれを活用するのなら、その記事の一番上に記述すれば良いですよ。
この記事を書いた頃は、それで問題なく作動するか自信が
無かったんですけど、後に問題が無いことがわかりました。
応用でやってみて下さい (^^)
PS. 講師の仕事もやっておりました (^^)v
3. Posted by 通りすがり
2008年06月21日 23:34
とても困っていたので、助かりました [アハ]
本当に本当にありがとうございます [愛してる]
本当に本当にありがとうございます [愛してる]
4. Posted by AQ
2008年06月24日 04:30
＞ 通りすがりさん
>>3
い〜え、お役に立てて良かったです (^^)
サイドカラムに仕掛けるなら、すべての HTML にスクリプトを記載しなければなりませんが、ひとつの記事内だけにこの方法を使用するなら、その記事の末尾にスクリプトのタグを記入するだけで OK ですよ！
>>3
い〜え、お役に立てて良かったです (^^)
サイドカラムに仕掛けるなら、すべての HTML にスクリプトを記載しなければなりませんが、ひとつの記事内だけにこの方法を使用するなら、その記事の末尾にスクリプトのタグを記入するだけで OK ですよ！
![[BloMotion]ブログで記事を書いて報酬をゲット!!](http://blomotion.jp/img/blogBnr-invite.gif "[BloMotion]ブログで記事を書いて報酬をゲット!!")
