*

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

公開日: : 最終更新日:2016/04/16 ネットショップ

Yahoo!ショッピングで出店されているショップ運営者さんもたくさんいらっしゃると思います。

Yahoo!ショッピングといえば、商品ページで使えるタグが制限されていたり、文字数も制限され、外部スタイルシートも使えずデザイン的には不便という印象を持っていました。しかし、この常識は既に変わっています。少なくとも外部 CSS は使用できる手段はあります。

トリプルとの連携で外部CSSを使用

Yahoo!ショッピングの商品ページで外部スタイルシートを使うには「トリプル」という有料サービスに申し込む必要があります。

トリプルとは、Yahoo!ショッピングで自由に使える有料サーバースペースです。楽天で言う Gold スペースと同じようなサービスです。トリプルを使う事によって jquery や 外部 CSS も使えるようになり、より動きのある現代風なサイト作りができます。

Yahoo!ショッピングの過去の常識に囚われて、既にトリプルに契約していても外部 CSS に気づいていない方もいらっしゃると思います(実は私も)。商品ページで外部 CSS が使えるとなると、今までは変更できなかったシステム的なデザイン部分も変更できるようになり、かなり表現の幅が広がります。

商品ページで外部CSSを使う方法

トリプルのサーバースペースに CSS ファイルを用意します。そこに商品ページ用の CSS を記述しましょう。

YahooショッピングでCSS

Yahoo!ショッピングのストアクリエイターPro を開き、ストアデザインからヘッダーを選び、「看板」をクリックします。

YahooショッピングでCSS2

看板の html 部分に外部 CSS を読み込む下記のタグを挿入します。

<link rel="stylesheet" href="CSSのURL" type="text/css">

入れたら保存して反映処理をしましょう。CSS を読み込むリンクタグはここでなくてもいいのですが、とりあえず一番上に入れました。

外部CSSで出来る事

今までできなかった事が多数できるようになります。

  • 価格などの色・文字サイズ変更
  • ショッピングカートボタンの色変更
  • 数量のテキストボックスの大きさ変更
  • 商品説明の行間調整
  • 楽天などでよく見かける縦帯バナーを付けられます

ここに挙げたのはごく一例ですが、工夫次第で色々な事が出来ます。

おわりに

Yahoo!ショッピングはデザイン的に不便というのは過去の常識です。トリプルサービスが開始されてからは外部 CSS を読み込む事が可能になり、商品ページのデザイン調整も可能になりました。商品ページもデフォルトの枠から外れてカスタマイズし、他店とちょっと差をつけましょう!

関連記事

Yahoo!ショッピング5のつく日だけ自動でバナーを切り替えてキャンペーンに誘導する
Yahoo!ショッピングでは5のつく日キャンペーンを継続的に実施しています。すなわち毎月5日、15日、25日にキャンペーンにエントリーして Yahoo!ショッピングで買い物
  • Pocket

おすすめトピックス

関連記事

ミニパソコン
売りたい商品のアピールは第一印象が重要である

ネットショップで商品を売りたいならまずは商品登録して各ショッピングモールへ出品します。今の時代、出品しただけでは売れません。 どこのショップでもいかに自分の商品を売るか考えられ実践されています。商品を売るために商品ページ […]

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

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

メール
楽天メルマガR-Mailが週1回なら配信無料に!2015年9月から(※条件付)

楽天の各ショップから送る事ができるメールマガジン(R-Mail)が2015年4月から配信が有料になりました。お客様が求める最適なメールマガジンが届くような環境づくりの為の有料化でしたが、ここにきて手のひらを返したかのよう […]

画像ダウンロード
楽天R-Cabinetの画像をURLから一括でダウンロードする方法

楽天市場の商品ページにある商品画像や説明画像は、楽天 RMS の R-Cabinet にアップロードします。しかし、この R-Cabinet。画像ファイルの一括アップロード機能は用意されていても、一括ダウンロード機能は提 […]

キーボードと紙
要注意、Amazonに出品する商品の商品名は一度決めたら変更できません

Amazon でネットショップを出店している方も多いかと思います。が、Amazon で商品を出品する際、注意点があります。 それは、Amazon に商品登録する際に一度決めた商品名は変更不可能という事です。以前は変更する […]

楽天ショップで売り切れ商品が入荷したら通知する機能があります

(また売り切れか…) 楽天ショップで買い物している時、凄く購買意欲をそそらせる良い商品に巡りあう事もあるでしょう。商品説明や画像を見ながらショッピングカートまで進むと目当ての商品が売り切れとなっていた時のショックは大きい […]

著者について

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

フォローはこちら

       

       
Aipo8.1.1オープンソース版で2018年の祝日設定を行う(さくらのVPS)

オープンソース版の無料グループウェア「Aipo」のサポートが2

タイヤのホイールナットが緩んで紛失、1個で買う方法はあるか

車の発進時や曲がる時にわずかなゴリッという音がする事に気づいて

高速道路
高速道路の上りと下りってどっち方面?全国高速道路総まとめ

高速道路には進行方向によって「上り」と「下り」という表現があり

名古屋久屋大通(丸の内)の「Cafe One」で居心地良い空間でおうちごはんランチ

名古屋観光で名古屋テレビ塔と久屋大通公園を見に行った際にランチ

豊田合成リンク
名古屋栄の豊田合成リンクで氷じゃないスケートリンクで滑ってきた感想

名古屋市の栄に氷じゃないスケートリンクがあるという話を連れに聞

→もっと見る