*

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

おすすめトピックス

関連記事

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

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

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

楽天会社概要
楽天ショップ会社概要ページもCSSを使って若干のデザイン付けが可能です

楽天ショップで買い物しようとするとき、送料や支払い方法、納期、利用規約等を調べるために会社概要ページを見る事もあると思います。 その会社概要ページ、字ばかりでダラダラと書き連ねられており読むのも辛いほど読みづらい構成とな […]

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

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

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

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

動画からアニメーションgifへ自動で変換してくれるフリーソフト「動画GIF変換」

gif と言えば透過に対応した画像形式の一つですが、gif はアニメーションにも対応しています。ただの画像でありながらパラパラ漫画の要領で動く画像が作れるわけです。アニメーション gif はインターネット上で動画が普及し […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
宇佐美
ガソリンスタンドENEOSの看板にある「宇佐美」とは何か?

普段何気なしに利用しているガソリンスタンドですが、ふと気になっ

中部国際空港のプレミアムラウンジセントレアに入るための条件や必要な物

空港には特別な待合室(ラウンジ)があります。中部国際空港も例外

厚さ4cmの封筒が入る郵便ポストは存在するか?

郵便物をポストに投函する場合、投函できる厚みのボーダーラインとしてよく

潮騒そば
こだわりの魚介スープが織り成すラーメン、彦根市の「らー麺潮騒」

滋賀県彦根市の彦根駅周辺の国道8号線を通っている時に、何か新し

超人気のラーメン店銀座篝がsitatte sapporo(シタッテ札幌)に上陸

2017年3月4日に札幌駅前に新たなランドマークとしてオープン

→もっと見る