今回は、サイト・ブログ作成をする中でリンクを別タブ、または別ウィンドウで表示させる際に出てくる悩みを解決していきます。
例えば、、、
- うまくリンクを別タブ、別ウィンドウで表示できない！
- 実現するにはどんなコードを書けば良いの？
といった悩み、疑問に答えていきます。
では初めに、別タブ、別ウィンドウでリンクを表示することのメリットをご紹介していきましょう！
別タブ、別ウィンドウでリンクを表示することのメリット
別タブ、別ウィンドウでリンクを表示することのメリットには
- UIが向上し、ユーザーのストレス軽減につながる！
- サイトからユーザーの離脱を軽減する事ができる！
といったものがあります。
ユーザー、サイト管理者双方にメリットがあります。
では実際に別タブ、別ウィンドウでリンクを表示してみましょう。
別タブでリンクを開いてみよう！
初めに別タブでリンクを開いてみましょう！
別タブでリンクを開くには、HTMLの記述のみで完結する事ができます。
実際に下記のボタンはGoogle Chromeの検索フォームへのリンクとなります。
押してみると、別タブで画面へ遷移する事が確認できます。
次に別タブでリンクを開くためのHTMLコードを見てみましょう！
プログラムを確認してみよう！
|
1 |
<a href="リンク先のURL" target="_blank">別タブで開く</a> |
別タブでリンクを表示するには上記のように記述します。
ポイントは、target 属性を"_blank"としてリンクの表示先を設定することです。
別ウィンドウでリンクを開いてみよう！
次に別ウィンドウでリンクを開いてみます！
別ウィンドウでリンクを開くには、HTMLとJavaScriptの記述で実現する事ができます。
別タブリンク同様、実際に下記のボタンはGoogle Chromeの検索フォームへのリンクとなります。
押してみると、別ウィンドウで画面へ遷移する事が確認できます。
[myInclude file='tenkake_js/tenkake_js.js']
次に別タブでリンクを開くためのHTML、JavaScriptコードを見てみましょう！
ブログラムを確認してみよう！
HTML
|
1 |
<a href="javascript:linkTransition()">別ウィンドウで開く</a> |
JavaScript
|
1 2 3 |
function linkTransition() { window.open("リンク先URL","window","width=ウィンドウの幅,height=ウィンドウの高さ"); } |
別ウィンドウでリンクを表示するには上記のように記述します。
まとめ
今回は、リンクを別タブ・別ウィンドウで開く方法をご紹介してきました。
ぜひ、参考にしてみてください。
最後までお読みいただきありがとうございました！
