*

楽天のスマホ商品ページにPC版で見るボタンを追加するカスタマイズ

公開日: : ネットショップ

タブレットとスマホFreepikによるデザイン

スマートフォンでウェブサイトを見ていたり、ネットショッピングをしている時に PC 版のサイトを見たいと思った事はありませんか?

大抵のウェブサイトやネットショッピングサイトでもスマートフォンからのアクセスが PC を上回る状況に来ていますが、スマートフォンで PC 版を見たいというニーズは今でも一定数はあるようです。ウェブサイトやスマートフォンのブラウザで PC 版サイトを表示する設定やボタンがありますが、初心者にはわかりづらい所にあります。

PC版で見る

例えばショッピングモールの楽天では、画面右上に PC 版で見るボタンが用意されています。しかし、初心者にはそれが何のボタンかもわかりませんし触ろうとも思わないでしょう。

楽天でもスマートフォンサイトに力を入れているショップが大半となりましたが、やはりスマートフォンサイトでは画面も小さくて収められる情報も限られてきます。そこで誰でもわかりやすく楽天のスマホ商品ページに「PC版で見る」ボタンを付けようというのが今回の本題です。

PC版で見るボタンを作る

<table width='85%' align='center' bgcolor='#ff2525' cellpadding='5'><tr><td align='center' height='50'><b><a href='商品ページのURL?force-site=pc'><font color='#ffffff' size='5'>PC版で見る≫</font></a></b></td></tr></table>

上のコードは例ですが、html で PC 版で見るボタンを作りました。

PC版で見る

これをブラウザで見ると上図のような感じになります。

楽天でスマートフォンサイトから PC 版サイトを見る為には、URL の最後に「?force-site=pc」というパラメータを付加する事で PC 版サイトを見る事ができます。つまり商品ページ URL の最後に「?force-site=pc」を追加して a タグでリンクすれば OK です。

スマホページに一括でPC版で見るボタンを追加

PC 版で見るボタンは作れましたが、商品数が何千、何万とあれば付けるのが大変です。そんな時は Excel のマクロを使えば一瞬です。

Excelで全ての行のセルの頭や最後に文章を追加したい【マクロ使用】
Excel にはマクロ機能といって Visual Basic を使ってプログラミングができる機能があります。ちょっとでも自分でプログラミングが出来ると作業の時短が出来て便利

上の記事でも紹介している方法でスマホサイトの商品説明の最下部に PC 版で見るボタンを追加します。

Sub セル末尾文章追加()
    Dim i As Integer
    For i = 2 To Sheets(1).UsedRange.Rows.Count
        Sheets(1).Cells(i, 53).Value = Sheets(1).Cells(i, 53).Value & "<br><br>" & Chr(10) & "<table width='85%' align='center' bgcolor='#ff2525' cellpadding='5'><tr><td align='center' height='50'><b><a href='http://item.rakuten.co.jp/******/" & Sheets(1).Cells(i, 2).Value & "/?force-site=pc'><font color='#ffffff' size='5'>PC版で見る≫</font></a></b></td></tr></table>"
    Next
    Msgbox("終了")
End Sub

随分と長いですがやっている事は単純です。商品情報を CSV で一括編集する事はよく行われている事だと思います。スマホ商品説明の末尾に PC 版で見るボタンを追加しています。

楽天の商品ページの URL は「http://item.rakuten.co.jp/ショップID/」の後に商品管理番号が付加されて出来ています。その為「Sheets(1).Cells(i, 2).Value」で商品管理番号を付加して URL を完成させています。「Sheets(1).Cells(i, 53)」「Sheets(1).Cells(i, 2)」の53と2という部分は、お使いのデータフォーマットに合わせてスマホ商品説明の列番号、商品管理番号の列番号に変更してください。

補足説明

  • Chr(10)は CSV データ上で改行する意味です。
  • Sheets(1).Cells(i, 2).Value とは、1番めのシートの i 列2行目のデータを挿入するという意味です。上の例で iは for 文により 2から最後の行数まで変化します。

おわりに

これで、ちょうどショッピングカートの上部分に PC 版で見るボタンができます。スマートフォンで見ながら商品ページを PC 版サイトで詳しく見たいというニーズを満たせると思います。

  • Pocket

おすすめトピックス

関連記事

ランキング1位獲得
要注意!楽天商品ページへのランクイン実績表示についてルールを制定

楽天で買い物をしていると商品ページに「この商品は楽天ランキングで1位獲得!」というようなアピールをよく見かけると思います。売れてるアピールをする為に、楽天ランキングのランクイン実績を画像なりにまとめて商品ページにドンッと […]

ポスト
どう違うの?ゆうメールとゆうパケットの違い

荷物を送るための郵便局のサービスも多種多様なものがあり、種類が多くてどれがどう違うのかもわからなくなる事もあると思います。今回はゆうメールとゆうパケットの違いについてまとめたいと思います。 目次1 ゆうメールとは1.1 […]

カートボタン
2015年末版、楽天の商品ページのカートボタンを画像にしてクリックしやすくしよう

楽天と言えば有名なショッピングモールの一つです。楽天で買い物をした事がある方もいらっしゃるでしょう。 ネットショップで買い物をする場合、商品ページを見て内容に納得してほしいと思ったら「カートに入れる」ボタンを押すのが普通 […]

iphone
Yahooショッピングのトリプルページを手っ取り早くスマホ対応に

Yahoo!ショッピングにショップを出店している方で、jquery や CSS が自由に使えてデザインができる「トリプル」を契約していらっしゃる方も多いと思います。しかし、トリプルで普通に PC 用のトップページを作った […]

カートフォント
商用無料!様々なショッピングカートのデザインが揃っているフリーフォント

インターネットショッピングのサイトを作るなら必ず必要な「買い物カゴボタン」。お客様が商品を注文するために必要なボタンです。よく買い物かごに入れるという文字とともにショッピングカートのアイコンがあしらわれたボタンがよく使わ […]

楽天の選択し
楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
リフレッシュレートを上げると画面がモザイク状になりぼやける原因

フレームレート 60fps 以上を体験すべくリフレッシュレート

いらすとや以外でためを張るかもしれないイラスト素材サイト「イラスタ」

イラスト素材サイトと言えば「いらすとや」というくらいに有名で、

朝が苦手でもスッキリ起きられるかもしれない目覚ましサポートアプリ「熟睡アラーム」

朝なかなか布団から出られず起きられない、朝起きても眠くてたまら

車でスマートフォンの充電切れに備えるスマホグッズ3つ

出先でスマートフォンの充電が切れてしまうのは結構悲惨な事です。

FF15のPC版のベンチマークをGeforce GTX 1070でやってみたスコアは?

2018年2月2日に FINAL FANTASY15 のPC版

→もっと見る