Wordpress

スマホ画面のときは内部リンクを別ウィンドウで開かないようにする方法【WordPress】【JavaScript】

  1. HOME >
  2. Wordpress >

スマホ画面のときは内部リンクを別ウィンドウで開かないようにする方法【WordPress】【JavaScript】

リンクを別ウィンドウで開かないようにする

リンクを別ウィンドウで開かないようにする

  • スマホ・タブレット閲覧時では、内部へのリンク移動時にウィンドウを新しく開かないようにしたい。
  • 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を入れる*/
    }
  });
});

9行目の「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」の値をいれる方法をご紹介いたしました。

最後まで、ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.