リンクを別ウィンドウで開かないようにする
- スマホ・タブレット閲覧時では、内部へのリンク移動時にウィンドウを新しく開かないようにしたい。
- PC閲覧時では、内部リンクであっても新しいウィンドウで開きたい。
ココがポイント
結論：
JavaScriptで、内部リンクをする要素を指定できるセレクタを使用して、「target」属性に「_blank」を追加する。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、「スマホ・タブレットなどの携帯端末」と「PC」とで動作を別々にしたいと思ったことはございませんか？
『内部のリンクに移動するたびに新しいウィンドウを開いていては、「携帯端末」を操作していると、いつの間にやらウィンドウが沢山、折り重なってしまっている。しかし、「PC」を操作しているときは新しいウィンドウで開いていると、元の画面に戻りやすく、別ウィンドウで開くことは便利になる』
このように、「携帯端末」と「PC」とで、動作を変えたいと思う機会はかなりあると思います。
そこで、今回は内部リンクに移動するとき、「携帯端末」閲覧時では新しいウィンドウを開かずに移動、「PC」閲覧時では新しいウィンドウを開く、このように設定できる方法をご紹介していきます。
それでは説明していきます。
1.JavaScriptに以下のコードを追加
jQuery(document).ready(function($){
$(window).on('load', function() {
/*スマホ・タブレット_PC条件分岐*/
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
/*スマホ・タブレット（iOS・Android）の場合の処理を記述*/
}else{
/*PCの場合の処理を記述*/
/*target_blankを入れる*/
$('a[href^="https://my_WebPage.com/"]').attr('target', '_blank');/*ご自身のWebページのURLを入れる*/
}
});
});
９行目の「my_WebPage.com」に、自身のWebページからホームのURLを入れるだけでOKです。
9行目のセレクタa[href^="https://my_WebPage.com/"]で、aタグでくくられている要素の中から、href属性値の先頭に「https://my_WebPage.com/」を含んでいる全てのaタグを選択しています。
以上で、PC閲覧時のみ、内部リンクが別ウィンドウで開くように設定できました。
2.リンクにアイコンをつけることができる超簡単なプラグイン
皆様は内部リンク・外部リンクにアイコンをつけたいと思ったことはございませんか？
WordPressのプラグイン「External Links」を使用すれば、簡単にリンクのアイコンを追加することができます。
また、外部リンクを全て別ウィンドウで開く設定にできたりと、かなり便利なので一度インストールをしてみてはいかがでしょうか？
もっと詳しく
3.「携帯端末」と「PC」とで読み込むCSSを切り替える
今回、「1.JavaScriptに以下のコードを追加」でご紹介した、「携帯端末」と「PC」を判別する方法を使用すると、読み込むCSSも切り替えることができるようになります。
まとめ
お疲れ様でした。
スマートフォンでの、Webサイトの閲覧は、できる限りウィンドウを多く開かない方が閲覧履歴を見やすくなると思います。PCではウィンドウを横に並べて確認できるのに対して、スマートフォンではウィンドウを切り替えてWebサイトを閲覧しています。そこで、PCとスマートフォンでリンク先の開き方を変える方法は、いろいろと知っておきたいものです。
今回は、JavaScriptを使用して、aタグのURLをセレクタで判別し、target属性に「_blank」の値をいれる方法をご紹介いたしました。
最後まで、ご一読いただきありがとうございました。
