ショップ様独自デザイン設定方法


楽売ティッカー ショップ様独自デザインの設定方法

ショップ様サイトの雰囲気に合わせてオリジナルデザインを何パターンでも追加して、いくつでも設置していただくことができます。

※ご契約時の弊社での初回設置・サイズ変更は無料です。
※初回設置後のデザイン変更も有償で承っております。

【ご留意事項】

  • 独自デザインには、基本的なHTML、CSS、FTP操作の知識が必要です。
  • 当ページで説明しているフォルダ・ファイル以外は変更しないでください。(変更した場合、本システムが正常に動作しなくなる可能性があります。)
  • 独自デザインに変更された場合、極力影響がないようにいたしますが、バージョンアップ時の追加機能が反映されない可能性があります。
  • 独自デザイン後は、テスト用のページ等で充分テストを行なってから公開してください。

※ご留意事項をご理解の上、オリジナルデザインへの変更を行ってください。

手順1:テンプレートフォルダをダウンロード

ご使用中の楽売ティッカーのテンプレートフォルダを楽天Goldサーバーからパソコンにダウンロードしてください。

テンプレートフォルダは、楽天Goldサーバーのドキュメントルートのcbフォルダ内にあります。

(テンプレートフォルダ名は選択されたテンプレートデザインによって異なります。 下図フォルダ名「rkttpl01-gray-180」は【1】グレイッシュトーン 1-縦長-グレー系(横180×縦680) の場合のフォルダ名です。)

(FTPフォルダ内例)rkttpl01t-gray-180 フォルダをダウンロード

 

手順2:フォルダ名を変更し、オリジナルデザインに対応

手順2-1:フォルダ名の変更

ダウンロードしたテンプレートフォルダを任意の英数字フォルダ名に変更します。(例として、「rkttpl01t-gray-180」フォルダを 「type1」フォルダにリネームします。)

手順2-2:オリジナルデザイン対応への前知識

■以下は 楽売ティッカーのフォルダ構成です。

 (※「type1 」以外のフォルダ名・ファイル名は変更しないでください。)

フォルダ構成

■以下は index.html の一部抜粋です。

index.html 一部抜粋

手順2-3:オリジナルデザインにしたい箇所に対応した画像またはCSSを変更

表示する見出し画像を変更したい場合は、「img」フォルダ内の画像を差し替えてください。

各項目のサイズや色などを変更したい場合は style.css を修正してください。

※詳細につきましては、「よくある変更Tips集」をご覧ください。

【ご注意!】CSSファイルはUTF-8で保存してください。

イメージ画像説明

① ショップ様画像
楽売ティッカー コントロールパネルより更新してください。

② ショップ様メッセージ
メッセージは、楽売ティッカー コントロールパネルより更新してください。
表示幅の変更は、「よくある変更Tips集」をご覧ください。

③ データ部 タイトル画像
タイトル画像を変更する時は、フォルダ構成に記載のファイル名を確認してください。
※注意:ファイル名は変更できません。

④ データ部 商品画像
自動的に受信します商品画像です。

⑤ データ部 内容
自動的に受信しますデータ内容です。
表示幅の変更は、「よくある変更Tips集」をご覧ください。

手順3:オリジナルデザインに変更後、cbフォルダへアップロード

変更した「type1」フォルダを 「cb」フォルダへアップロードしてください。

「cb」フォルダ内には、変更元のテンプレートフォルダも、独自デザインへ変更後の「type1」フォルダもある状態です。

手順4:独自デザインを行った楽売ティッカーを iframe で読み込む

iframe タグのsrc属性で、独自デザインを行ったフォルダのindex.html を読み込んでください。
例)「http://www.rakuten.ne.jp/gold/[ショップID]/cb/type1/index.html 」

楽売ティッカーの幅または高さに合わせて、iframe タグのwidth・height を調整してください。

よくある変更Tips集

楽売ティッカー全体の幅と高さを調整するには?

style.css を下記内容に変更します。
(例として、幅180px 高さ620px に変更する場合)

1.全体枠の幅と高さを調整
 #NewsTicker の width:178px (リスト枠幅 -2px)
 #NewsTicker の height:620px (リスト枠高さ+ヘッダ高さ70px+18px)

2.リスト枠の幅と高さを調整
 #NewsVertical の width:180px 、height:532px

3.リスト枠 ul の幅を調整
 #TickerVertical の width:180px

4.リスト枠 li の幅を調整
 #TickerVertical li の width:180px

5.データ部の内容表示幅を調整
 .cb_item_right の width:110px (リスト枠幅-商品画像幅-20px)

ヘッダー部の背景色を変更するには?

#cb_hd の background-color を変更

ヘッダー部のメッセージの文字色や表示幅を変更するには?

文字色は、 #cb_hd_mes の color を変更

表示幅は、 #cb_hd_mes の width を変更(リスト枠幅-90px)

データ部の背景色を変更するには?

#NewsTickerの background-color を変更

枠線の色を変更するには?

#NewsTickerの border-color を変更

フォントの色やサイズを変更するには?

#TickerVertica の color と font-size を変更