*

楽天のスマホ商品ページに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

おすすめトピックス

関連記事

Sold Out
あなたのショップは大丈夫?誤解を招く文言でお客様を逃しているかもしれません

日本語って難しいな。といつも切に思います。 例えば複数の必要条件があるキャンペーンをショップで打ち出す時、どのようにお客様にわかりやすくお伝えするか。本当に難しい事です。もちろん、長い文章で説明するのであれば簡単です。イ […]

ポンパレ
ポンパレモールの商品ページにアクセスできない時の対処法

リクルート社が運営しているショッピングモールで「ポンパレモール」があります。多数のネットショップさんが集まって出店しているという所は楽天と同じです。 ポンパレモール:ネット通販/オンラインショッピングサイト トップページ […]

プチプチ
誰も教えてくれない梱包に使うプチプチの切り方

プチプチと言えばきっと誰もが見たことがあるでしょう。手元にあればついプチプチと潰したくなるあれです。通販で購入した物の中に緩衝材として入っている事が多々あると思います。 ネットショップを開いている方や、個人でオークション […]

ポンパレモールの商品ページで外部CSSを使用する方法

ポンパレモールに出店されている方向けの記事となります。 ポンパレモールと言えば、ページ作成において使用できるタグが制限されており作りづらい仕様でした。しかし、2014年12月からタグの規制が一部緩和されました。緩和された […]

画像上書きの反映は遅いが一瞬で反映させる代替策はある【楽天ショップ】

楽天ショップを運営している人なら一度は頭を悩まされた事はあるでしょう。楽天の商品画像、すなわち楽天 RMS にアップロードした画像・楽天 GOLD スペースにアップロードした画像を上書きして差し替える場合、画像の反映処理 […]

Yahoo×CSS
Yahoo!ショッピングの商品ページで外部CSSを使用する方法

Yahoo!ショッピングで出店されているショップ運営者さんもたくさんいらっしゃると思います。 Yahoo!ショッピングといえば、商品ページで使えるタグが制限されていたり、文字数も制限され、外部スタイルシートも使えずデザイ […]

著者について

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

フォローはこちら

       

       
ゆうメールが厚み3cm以上の規格外サイズを廃止!代替の発送方法は

先日久しぶりに郵便局へゆうメールを発送しに行ったのですが、受付

梱包用ppバンドのストッパーのはさみを使わない外し方

ダンボールで荷物を梱包する時、より強固にする為に pp バンド

ローチョコレート
彦根市に生カカオが活きたローチョコレート専門店「ハレトケト」

滋賀県彦根市、彦根城周辺の古き町並みが残る地に滋賀県初のローチ

アサシンクリードオデッセイ
アサシンクリードオデッセイPC版をGeforce GTX 1070でプレイした感想

2018年10月5日に発売されたアサシンクリードオデッセイの

大垣市のお洒落なビストロ「洋食もくれん」でディナー

岐阜県大垣市の大垣駅近くに「洋食もくれん(洋食 MOQLEN)

→もっと見る