*

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

おすすめトピックス

関連記事

レスポンシブメールマガジンを遂に楽天がリリース、メルマガもスマホ対応を

2016年2月15日より楽天がレスポンシブメール機能をリリースしました。 レスポンシブメールとは一つのメールでパソコン、スマートフォンの両方に最適なメールマガジンを送る事ができる機能です。ただ両方に送るだけではなく、パソ […]

5のつく日キャンペーン
Yahoo!ショッピング5のつく日だけ自動でバナーを切り替えてキャンペーンに誘導する

Yahoo!ショッピングでは5のつく日キャンペーンを継続的に実施しています。すなわち毎月5日、15日、25日にキャンペーンにエントリーして Yahoo!ショッピングで買い物をすると誰でもTポイントが5倍となるキャンペーン […]

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

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

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

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

電話応対
お客様の注文間違いは転換率アップのチャンスです

ネットショップ、EC サイトを運営していれば日々お客様からのお電話を頂くかと思います。それは、商品に対する質問であったりクレームであったり内容は様々。その問い合わせ、受けただけで終わりにしてませんか? お客様からの問い合 […]

スマートフォン操作
楽天スマホ商品ページの画像制限が緩和!3枚から10枚までへ

楽天でインターネットショップを運営されている方に朗報です。かつては楽天のスマートフォン用商品ページには画像は3枚まで(高さは1200pxまで)という画像制限がありました。ようやく重い腰を上げてこの画像制限が2016年より […]

著者について

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

フォローはこちら

       

       
300円カレー
カレーが300円!?長浜駅前にある激安カレー屋「SUNカリー部」えきまちテラス長浜内

滋賀県の長浜駅東口の前、一等地とも言える場所に激安なカレー屋が

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるよ

PhotoshopなどAdobeソフトのシリアル番号を忘れたり紛失した場合

Photoshop など Adobe ソフトのシリアル番号はイ

メルカリのうるさすぎる不要なプッシュ通知を止める

CM でも放送されている誰でもかんたんフリマアプリとして代表的

シーリングファン
天井に取り付けられるプロペラ「シーリングファン」の意味とは?

天井が高いカフェやオフィスなどでたまに天井に取り付けられている

→もっと見る