URLのリンクからサイズを指定して別画面で開く方法

 (2011/06/09 制作)

リンクから別画面や別タブ画面で開くことについて

基本的に同じウィンドウ内の同じタブ内で開いた方が何かと問題が起きないと思います。というのは、別ウィンドウや別タブで開くと、閲 覧者は、別ウィンドウを閉じるときに、元のウィンドウを閉じてしまう可能性があるからです。

元のウィンドウが消えてしまえば、もう見てもらえないかもしれま せん。

閲覧者が別ウィンドウで開きたければ、中クリックで開けます。その場合、閲覧者は別ウィンドウということを知っているので、元ウィンド ウを消し てしまうことは少なくなると思います。

どうしても別ウィンドウで開きたい場合は、サイズを、小さくして開けば、別ウィンドウだということ はわかりますので、元ウィンドウを消すことは少なくなります。横幅450 X 縦幅540くらいのサイズだとYoutube の動画の縦幅が収まります。

同じサイズで、別タブとしてリンク先を開く方法

HTMLは次のようになります。 - ( target=”_blank” )を使います。

<a target="_blank" href="URL">タイトル</a> または <a href="URL" target="_blank">タイトル</a>

例:  Jennifer Lopez - On The Floor (Live On American Idol)

サイズを指定して、別ウィンドウで開く方法

HTMLは次のようになります。 - ( onclick="window.open )を使います。

<a href="javascript:void(0)" onclick="window.open('URL',null,'width=715,height=470,top=0,left=0,scrollbars=yes');return false;">タイトル</a>

サイズとしては、「有効ウインドウサイズ+縦と横のスクロールバー」の値を指定します。開く位置は、上からと左からのpxをtop= 0,left=0,のように記します。

例:  Jennifer Lopez - On The Floor (Live On American Idol) 

画像から別画面のURLを開く場合は、画像のリンク先を別ウィンドウにするには、タイトルの所に、imgタグを設定します。

参考にした資料



応用編


サイズを指定して、別ウィンドウで開くTHMLを自動的に変換する方法

サイズを指定して、別ウィンドウで開くための THML は複雑なので、リンクがいくつもある場合は記述が大変です。

次の方法で、自動的に変換すると便利かと思います。

例えば

<a href="URL1">タイトル1</a>

や 

<a target="_blank" href="URL2">タイトル2</a>

や 

<a href="URL3" target="_blank">タイトル3</a>

のような一般的な形式になっているものを対象にした場合、

途中で改行されていないという条件の場合は

<a .*?href="(.*?)".*?>(.*?)</a>

を検索し、
タイトルの途中に限って改行されていてもいいという条件の場合は

<a .*?href="(.*?)".*?>(.*?|.*\n.*?)</a>

を検索して正規表現で、

<a href="javascript:void(0)" onclick="window.open('\1',null,'width=715,height=470,top=0,left=0,scrollbars=yes');return false;">\2</a>

に置換します。ウィンドウサイズは、width= ,height= で設定ましす。

EmEditor というフリーソフトを使ったら、次のように

<a href="javascript:void(0)" onclick="window.open('URL1',null,'width=715,height=470,top=0,left=0,scrollbars=yes');return false;">タイトル1</a>

や 

<a href="javascript:void(0)" onclick="window.open('URL2',null,'width=715,height=470,top=0,left=0,scrollbars=yes');return false;">タイトル2</a>

や 

<a href="javascript:void(0)" onclick="window.open('URL3',null,'width=450,height=540,top=0,left=0,scrollbars=yes');return false;">タイトル3</a>

のように一括変換できました。


このページのホームページは、こちら「恋 するボーカル」です。