*

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

おすすめトピックス

関連記事

商品ページの回遊率アップで売上向上を狙う為の施策について

どこのネットショップ、ショッピングモールでもそうですがマニュアル通りにただ商品を載せただけでは売上向上に繋がりません。ちょっとしたカスタマイズで商品ページの回遊率を高め、商品が売れる機会を増やすことができます。 カスタマ […]

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

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

陳列された商品
【ネットショップ】商品が売れなくなってきた?それは当たり前です。

ネットショップで商品を出品していて、売上がだんだん伸び悩み落ちていく事に悩まれている方もいらっしゃると思います。もし何も施策を打っていないのであれば、それは当たり前です。 何もしなければ大概商品の売上は伸び悩んでいくもの […]

CSV
重くて開けないCSVをExcelで開くには分割するべし

CSV ファイルと言えば IT系の業務に携わっている人なら一度は使った事があるファイル形式だと思います。 目次1 CSVファイルとは2 重いCSVをExcelで開くには2.1 重いCSVを分割する方法3 おわりに CSV […]

ボタン
Photoshop不要!ボタン素材を自動生成してくれるButton Makerの使い方

Web 上にはボタンというものが至る所に存在しています。検索ボタン、閉じるボタン、送信ボタン、クリアボタン、これらは Web 上でよく見られるボタンです。 このボタン画像は一見簡単に見えて地味に手間がかかるんですよね。C […]

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

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

著者について

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

フォローはこちら

       

       
ラジオのAM/FMとはどういう意味か?

ラジオ放送には2種類ある事は多くの方がご存知かと思います。それ

美山鍾乳洞
大変珍しい立体迷路型鍾乳洞、岐阜県郡上市の「美山鍾乳洞」を探検

岐阜県郡上市にある美山鍾乳洞は日本最大級の立体迷路型鍾乳洞とい

スープカレー
こだわりのスープカレーが旨い岐阜県郡上市の老舗カフェ「アルピーヌ」でランチ

岐阜県の郡上八幡へ観光へ行った時に、郡上市でどこかランチができ

養老軒の大福
売切れ続出!独創的な絶品大福で有名な岐阜県川辺町の和菓子処「養老軒」

岐阜県加茂郡川辺町に存在する和菓子屋さん養老軒は独創的なフルー

モネの池の鯉
神秘的で青く美しい岐阜県関市の「モネの池」に行ってみた。最善の見頃は6月

Google マップで適当に色々な場所を見ていた所、偶然「Mo

→もっと見る