PC用、スマホ用のリンク切替について

あぁ、リンクされてしまった。すみません。

イメージとしては、

 ［pc-only］<a href=～pc.html>商品名</a>［/pc-only］
 ［mobile-only］<a href=～.mobile.html>商品名</a>［/mobile-only］

のような感じです。

もう少し具体的に説明してもらいたんですけれども、例えばその商品名を仮に「item」とした場合に、itemはPC、モバイルに関わらず同じリンク先ではなく、名称はitemだけれどもリンク先が変わると言う事ですか？

つまり、同じ商品を指すのではなく、PCとモバイルでリンク先を変えたいと言う感じなんですかね？

具体的には、

<a href="link">石鹸</a> //こんな表示で

<a href="link-pc">石鹸</a>
<a href="link-mobile">石鹸</a>

link-pcは花王石鹸で、link-mobileは牛乳石鹸みたいな感じですかね？

説明不足で申し訳ございません。
商品は同じで、PCからのアクセスと、モバイルからのアクセスで
リンク先を変えたいです。

<a href="link">石鹸</a> //表示（見え方）は共通

<a href="link-pc">石鹸</a>
<a href="link-mobile">石鹸</a>

名称も同じです。
PCもモバイルも花王石鹸ですが、リンク先は異なります。
アマゾンは同じ商品でもPC用とモバイル用のページが分かれているため。

今、パッと思いつく方法としては、aタグにクラスをつけて、jQueryでその画面サイズ(あるいは何かしらのクラス)の時に、hrefの中身を書き換えと、予めPC用とモバイル用の2つのリンクを同じクラスで用意しておいて、メディアクエリによって表示・非表示させる方法です。

サンプル: jQueryでdata属性切り替え | jsFiddle

サンプル: メディアクエリで変更 | jsFiddle

例えば、PC用とモバイル用のリンクで一部だけが違うようなものはjQueryのほうが良いかもしれませんね。その場合は上記サンプルの用に予め書いたdata属性の切り替えではなくではなく文字の置換を行います。

モバイルのリンク: amazon/xxxx/mobile/xxxx
PCのリンク: amazon/xxxx/pc/xxxx

こういう場合に、mobileとpcの部分を書き換えると言うことです。xxxの部分が共通の場合は使えます。

メディアクエリのほうが48emで切り替えてますが、30emが良いかもしれません。

48em(768px)
30em(480px)

なので。
pc用のリンクを表示する場合、1280px以上と言うことなら、1280pxは80emなのでそこを境界に仕分けると良いかもしれません。

モバイルファーストで書く場合、

.pc-show {
  display: none;
}
.pc-hide {
  display: inline-block;
}
@media screen and (min-width: 80em) {
  .pc-show {
    display: inline-block;
  }
  .pc-hide {
    display: none;
  }
}

このようにすれば1280pxを境界にpcリンクは表示されて、それ以下のサイズではpcリンクは非表示になります。

サンプルに追加しましたが、上記の書き方でタブレットを入れる場合、更にタブレットとスマホを表示非表示するクラスが必要になります。

サンプル: min-widthでの指定 | jsFiddle

細かく書くのは面倒なので、scssでミックスインを使うと以下のような感じになります。
※リンクではなくボックスの中の名称がそれぞれの端末の名称になるようにしてあります。

サンプル: メディアクエリのミックスインとその使い方 | codepen

とまぁ、メディアクエリは最初に書き上げるまでが面倒くさいですが、書いてしまえばとても便利に使えます。jQueryよりも間違いがなく、htmlの内容は増えますが、css自体は増えたりしないので軽く表示できて、かつ速いです。

ご回答いただき、ありがとうございます。
SCSSはハードルが高かったので、、とりあえずCSSでの表示/非表示としました。
いつもご丁寧に、サンプルを複数提示していただいて、助かります。
ありがとうございました。

scssについては、css欄のview compiledからscssをcssに変換したものを見て、どのようにすればどうなるかを確認してもらう為だけなので、特にこれで実装してくださいと言うわけではないです。

僕がよくこのフォーラムでメディアクエリを書く時、たいていmax-widthを使いますが、それはPC側から見て書く時は便利で簡潔にかけるんですけども、モバイルファーストでmin-widthを使うと、サイズが重なる部分があったり色々とあるので、いつものように単純にはかけませんと言うのを示しているだけなのです。

cssで表示・非表示はcssフレームワークなどでよく使われる方法です。
色々とcssフレームワークをググってみて、そのドキュメント等からスマホの時だけ表示とか、そういった類のユーティリティ部分を調べると、最近のものならもっとうまくかける方法が見つかるかもしれません。

たいていは同じようなことをしていると思うんですけどね。

別の質問の追加になります。
リンク先を別窓で開きたいので、
<a class="pc-show" href="～.pc.html" target="_blank">石鹸</a>
として、ソースを確認しても target=”_blank があるのですが、
別窓で開きません。class指定のないのリンクで試しても同様でした。
Simplicityのどこかに別窓で開くことを無効にしている設定があるのでしょうか？
別の方法で、設定するのでしょうか？

javascript(jQuery)で、ブラウザデフォルトの挙動をオフにしない限り普通はtarget指定があればそれで開くはずです。

後から何かしらの設定がしていない場合はsimplicityではブラウザの挙動で動作していると思います。
デベロッパーツールで何かしらエラーが出ているとか、ポップアップの設定をoffにしているとか、その辺りのような気がしますが、タイプミスがない限りは普通は動作すると思うんですけどねぇ。

ご回答、ありがとうございます。
も、申し訳ございません。パソコンを再起動したら、別窓に開くようになりました。
今後とも、よろしくお願いします。