コピペでOK！ショッピングモールで外部CSSファイルを読み込む方法

外部スタイルシートを使用する事で、各商品ページやカテゴリページの編集作業の
効率化を図る事が可能です。

ここでは楽天市場・Yahoo!ショッピング・ポンパレモールでの外部スタイルシートの使用方法を説明いたします。
FTPソフトを準備し、使用方法を知っておく必要がありますので、FTPソフトについて
わからない方は【ECサイトオーナー向け】はじめてでも安心！使いやすい初心者向けFTPソフトを参照ください。

スポンサードサーチ

1. 楽天市場での外部スタイルシート読み込み

まず楽天GOLD（無料）へ申し込みをしましょう。
楽天GOLDは無料で100MBの容量を使用できます。
※申し込みすれば追加で毎月100MBずつ容量を拡張可能。

楽天GOLDの申請方法

楽天GOLDのパスワードは、FTPサーバーのパスワードと同一です。
申し込みが完了したら以下情報でFTPソフトを使って接続してみましょう。

接続が完了したら、以下コードで外部スタイルシート読み込みが可能。
店舗アカウントにはFTPのユーザー名、●●●にはアップロード先のファイル名を入力。

<link rel="stylesheet" href="http://www.rakuten.ne.jp/gold/店舗アカウント/●●●" />

仮に css というフォルダを作成して style.css というファイル名でアップロードしたとすると、

<link rel="stylesheet" href="http://www.rakuten.ne.jp/gold/店舗アカウント/css/style.css" />

となる。

2. Yahoo!ショッピングでの外部スタイルシート読み込み

Yahoo!ショッピングも楽天GOLDのように作成したファイルをアップロードできる、
トリプルというサービスがあるが、
こちらは有料（月額3,000円）になります。
申し込み方法は以下を参照。

申し込みが完了するとYahoo!ショッピング側から接続に関する情報がメールで送られてきます。
すぐに使用開始はできないのは不便ですが、必要であれば申し込むようにしましょう。
また、トリプルサーバーへアップロードしたファイルは実際に読み込んだり、
反映されるのにある程度時間がかかります。
（Yahoo!ショッピングのサーバーが巡回してはじえて反映される）
CSSの読み込みなどアップロード後から何時間も必要な場合がありますので、ご注意ください。

接続方法は楽天GOLDと同じようにFTPソフトを使用します。

<link rel="stylesheet" href="http://shopping.geocities.jp/店舗アカウント/●●●" />

仮に css というフォルダを作成して style.css というファイル名でアップロードしたとすると、

<link rel="stylesheet" href="http://shopping.geocities.jp/店舗アカウント/css/style.css" />

となる。

3. ポンパレモールでの外部スタイルシート読み込み

ポンパレモールPROへ申請する事で、楽天GOLDのようにFTPサーバーが利用可能になる。
申請方法は管理画面のメインメニューの「各種申請」から「ポンパレモールPRO利用申請」をクリック。
ポンパレモールPROは100MBまで無料で使用する事が可能なので申し込みをしておこう。

接続方法は以下のようにFTPソフトを使用します。

FTPログインIDがわからない場合、「ポンパレモールPRO利用申請」リンクの
２つ上に「FTPパスワードの変更」がありますので、そちらのページで確認可能です。

接続が完了したら、以下コードで外部スタイルシート読み込みが可能。
店舗アカウントにはFTPのユーザー名、●●●にはアップロード先のファイル名を入力。

<link rel="stylesheet" href="http://store.ponparemall.com/pro/店舗アカウント/●●●" />

仮に css というフォルダを作成して style.css というファイル名でアップロードしたとすると、

<link rel="stylesheet" href="http://store.ponparemall.com/pro/店舗アカウント/css/style.css" />

となる。

4. まとめ

今回は楽天・Yahoo!ショッピング・ポンパレモールの3つを参考に説明しましたが、
読み込む方法は基本的に同じです。

<link rel="stylesheet" href=“ファイルのURL" />

「ファイルのURL」に対象のファイルが存在するパスを入力しましょう。
ただ、異なるサービスのサーバーからファイルを読み込むような方法は避けましょう。
※例えば、自社サイトから楽天GOLDのCSSを読み込む、など。