コピペで簡単!クリックしてサブウインドウを表示させよう

サブウインドウTOP

ネットショップやサイトを作成しているとき、リンク先を新しいタブで開くように設定することってよくありますね。

たとえば、購入ガイドとかよくある質問のページなんかを新しいタブで開いたりすると、ショップサイトが今見ている画面からぜんぜん見えなくなってしまいます。

見えなくなるのが嫌なので、今回は、リンク先をサブウインドウで表示するようにしてみよう。

Sponsored Links

サブウインドウを表示する方法

まずは、下記のサブウインドウのサンプルを試しにクリックしてみてください。

このブログのトップページがサブウインドウで表示されます。

サンプルサブウインドウページ

テキストや画像をクリックすると、サブウィンドウを開くスクリプトです。

実装は至って簡単。
<body>~</body>内のサブウインドウが開くテキストなり画像を置くところに以下を記述します。

<a href="ここにサブウインドウで表示したいURL"onclick="window.open('ここにサブウインドウで表示したいURL','subwin','width=320,height=500');return false;">ここに書いたテキストがリンクになります</a> 

テキストの場合

<a href="ここにサブウインドウで表示したいURL"onclick="window.open('ここにサブウインドウで表示したいURL','subwin','width=320,height=500');return false;">ここに書いたテキストがリンクになります</a> 

画像(アイコン)の場合

<a href="ここにサブウインドウで表示したいURL"onclick="window.open('ここにサブウインドウで表示したいURL','subwin','width=320,height=500');return false;"><img src="画像のパス(URL)" width="画像の幅" height="画像の高さ" alt="代替テキスト"></a> 

サブウィンドウの横幅、サブウィンドウの高さの設定は、

width=幅

height=高さ

の数字をすきな大きさの数字に変更してください。

参考閲覧者に不便をかけない「サブウインドウ」を開く方法

Sponsored Links
合わせて読みたい
よろしければシェアお願いします
同じカテゴリーのコンテンツ一覧