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

0
23659

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

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

本記事の索引 -INDEX-

スポンサードサーチ

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

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

楽天GOLDの申請方法
楽天GOLDの申請方法その1

楽天GOLDの申請方法その2

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

サーバー(ホスト) ftp.rakuten.ne.jp
ユーザー名 http://www.rakuten.co.jp/●●●(店舗URLの●●●部分)
パスワード FTPサーバー用パスワード
ポート 16910

接続が完了したら、以下コードで外部スタイルシート読み込みが可能。
店舗アカウントには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!ショッピング側から接続に関する情報がメールで送られてきます。
すぐに使用開始はできないのは不便ですが、必要であれば申し込むようにしましょう。
また、トリプルサーバーへアップロードしたファイルは実際に読み込んだり、
反映されるのにある程度時間がかかります。
(Yahoo!ショッピングのサーバーが巡回してはじえて反映される)
CSSの読み込みなどアップロード後から何時間も必要な場合がありますので、ご注意ください。

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

サーバー(ホスト) ftp.geocities.jp
ユーザー名 FTP申請Yahoo!JAPAN ID
パスワード FTPサーバー用パスワード
ポート 21
<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まで無料で使用する事が可能なので申し込みをしておこう。
ポンパレモールPROの申請方法

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

サーバー(ホスト) pros.ponparemall.com
ユーザー名 FTPログインID(※Fから始まる7ケタの数字)
パスワード 設定したFTPパスワード
ポート 21

FTPログインIDがわからない場合、「ポンパレモールPRO利用申請」リンクの
2つ上に「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を読み込む、など。

返事を書く

Please enter your comment!
Please enter your name here

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください