*

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

おすすめトピックス

関連記事

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

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

ダンボール
楽天の商品ページの納期情報の文字色やサイズを変更する方法

「楽天商品ページにある納期情報の文字色変えれる?」 突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予 […]

スマートフォンを持つ手
楽天のスマホページで外部CSSを使用する方法

楽天に限らずネットショッピングはスマートフォンで買い物をする人が増えているという事は2013年くらいから言われている事ですが、現在ではパソコンをも上回るシェアに迫っているようです。扱っている商材によっては既にスマートフォ […]

楽天のカテゴリ表示順序(優先度)変更でエラー「CSVファイルのフォーマットが違います。」

今回は楽天のカテゴリページの話をします。カテゴリページとはそのカテゴリに属する商品が一覧として表示されるページの事です。何も考えずにどんどん商品登録をしていくと、カテゴリページに表示される商品の順番はバラバラになってしま […]

ガラケーとスマホ
楽天スマホ商品ページで制限なく画像説明を載せる方法

楽天に限らずネットショッピング界隈ではスマートフォンでのアクセスが PC を上回るなど年々スマートフォン比率が上昇してきています。今まではスマートフォンは後回し~にしてきた所もあるかと思いますが、パソコン版もスマートフォ […]

線画に変換
写真や画像から綺麗なベクター線画に変換してくれるツールが便利

「この画像から線画にできる?」 この前そんな事を言われました。その画像とはある物の設計図のようなものでした。線画に出来るか?と問われれば出来ます。Adobe Illustrator で縁をなぞって線を書けばいいわけです。 […]

著者について

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

フォローはこちら

       

       
microUSBケーブルでもUSB Type-Cに対応させるには変換アダプタを使おう

USB ケーブルといえば様々な家電や端末に使います。スマートフ

作業用BGMをすぐに探して作業したい人向けサイト「#作業してくる」の使い方と活用法【無料】

創作活動にしろ、書類作成、レポート作成、現代を生きる人々には作

ボンボンショコラ
珠玉のチョコレート専門店!滋賀県長浜市の黒壁近く「ボンボンショコラ」

滋賀県長浜市に本格チョコレート専門店があります。その名前は「L

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々

漬けトロチャーシュー麺
ボリューム満点の漬けトロとんこつラーメン!滋賀県長浜市の「麺屋風火」

滋賀県長浜市に出来たラーメン屋「麺屋風火」へ行ってきました。元

→もっと見る