コーディング

PC表示時のみaタグのリンクを機能させないJS

2017.07.28

PC表示時のみaタグのリンクを機能させないJS

ページに図表や細かい文字が多い画像を貼ったとき、PC表示では大きく取り扱っているがスマートホン表示時には拡大して表示させたい、なんてことが起こりえます。今回はそんなときにaタグの機能を制限するreturn:falseの活用法です。

HTMLの記述

<p><a class="pc-nolink" href="https://01earth.jp"><img src="aaa.png"></a></p>

機能させたくないaタグにクラスを設定します。

JSの記述

$(window).load(function() {
  jQuery(function(){
    var w = jQuery(window).width();
    var x = 667;
    if (w >= x) {
      $(function(){
        $(".pc-nolink").click(function(){
          return false;
       });
      });
    }
  });
});

ページに上記のJSとjQueryを読み込みます。aタグに画面の横幅依存でreturn:falseを適用することで、横幅667px以上の画面で表示しているときはクリックしてもリンクが開かない動作になります。

CSSの記述

.pc-nolink{
  cursor:default;
}

PC表示時にaタグにオンマウスするとリンク可能を示す指アイコンになってしまうので、これを矯正します。これで使い勝手と見栄えが揃います。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。