メインコンテンツへスキップ

デザイン設定（HTML・CSS）で出来ることを教えてください

カラーミーショップ運営
  • 更新

使用するテンプレートのHTML、CSSを編集しデザインをカスタマイズすることができます。
【編集中のテンプレートを確認するには】テンプレート名もしくは「利用中のテンプレート」の下にある画面キャプチャをクリックすると、編集中のショップ画面を確認できます。

テンプレート選びに迷っている方へ

レスポンシブのテンプレートがおすすめです。

下記ページにて、編集・確認することができます。

ショップ作成＞デザイン設定＞テンプレート編集＞デザイン設定（HTML・CSS）
 

テンプレートを編集する

2017-12-12_12h41_10-700x357.png
 

【デザイン設定】画面で、編集するテンプレートの【テンプレート編集】ボタンをクリックします。

編集するテンプレート種類を選択

__________2022-11-11_12.59.55.png

 

テンプレート名を覚えやすい名称に変更する

使用するテンプレート名を編集できます。
『オリジナル名称』の欄には、テンプレートをダウンロードした際のオリジナルテンプレート名称が表示されます。

design-tmpl-list-13-e1509074741646.png

 

テンプレートごとに html・css を変更してデザインをカスタマイズする

テンプレート種類一覧が表示されますので、設定を行うページの【HTML・CSS】をクリックしてください。 SSL対応画面は、【CSS】のみとなります。

__________2022-11-11_12.59.55.png

sublink.gif【項目編集】 の説明はこちら

決済のデザイン編集について

これまでのショッピングカートのみ、決済のデザイン編集が可能です。
※現在、新しいショッピングカートは、決済のデザイン編集に対応しておりません。
※スマートフォン表示については、「スマートフォン表示設定：PC版表示」に
　設定している場合のみ、編集内容が反映されます。
※決済ページは個人情報を入力する画面のため、セキュリティの観点から
　カスタマイズを制限しております。

 

フリーページを作成・編集する

現在選択中のテンプレートの、フリーページ設定画面へ移動します。

sublink.gif【フリーページ設定】 の説明はこちら

design-tmpl-list-15-e1509076106479.png

 

商品一覧ページの表示設定

design-tmpl-list-14-e1509074856987.png

並び順の初期設定

カテゴリー（グループ）別商品一覧、商品検索結果での、商品の並び順を設定します。

  • おすすめ順…設定した表示番号順に表示されます。表示番号の設定がない場合、登録の古い商品から順に表示されます。
  • 価格順…価格の安い順に表示されます。
  • 新着順…登録の新しい商品から順に表示されます。
 

表示商品数

カテゴリー（グループ）別商品一覧、商品検索結果での、１ページに表示される商品数を設定します。

 

HTML・CSSの編集

各テンプレートの仕様やバナーの差替方法マニュアルはこちら

__________2022-11-11_14.15.31.png
 

1.HTML編集

HTMLを表示しています。 編集エリアは、<body>　要素以下から設定されています。
<{**********}> のように記述されている箇所は独自タグとなります。
消去されますと正常な動作が出来なくなりますのでご注意ください。

例：　<{ $logo }>　等
※この項目はHTML編集が可能な場合のみ表示されます。
※HTMLの文字数は半角65,530文字が上限となっています。

 

2.CSS編集

設定されているCSSを表示しています。
※この項目はCSS編集が可能な場合のみ表示されます。
※CSSの文字数は半角65,530文字が上限となっています。

 

3.「項目編集」に切り替え

【項目編集】タブをクリックすると、「項目編集で編集」画面に切り替わります。

 

4.ページ一覧にもどる

【デザイン設定】ページ一覧画面に戻ります。

 

5.もとに戻す

【保存】ボタンをおすひとつ前の状態に戻ります。履歴は5回まで保存されています。

※最初に編集する時は【もとに戻す】ボタンは表示されません。

 

6.保存

【保存】ボタンを押すと、編集内容を保存します。

 

7.プレビュー

現在編集中の「ページ種類」に該当する画面のプレビューを確認することができます。


8.入力支援ツールで編集

クリックすると、文字の色や大きさを変更したり画像挿入用のHTMLタグを入力する支援ツールが
別ウィンドウで表示されます。 【入力支援ツール】 マニュアルはこちら

 

9.広げる・縮める

クリックすると編集エリアが拡大・縮小されます。

 

なお、HTML・CSS欄への画像の設置時に「入力支援ツール」や「画像ファイル管理」をご利用の場合は、画像URLは [ URLコピー ] 欄のURLをそのままコピーしてご利用ください。
独自に画像URLを用意し設置いただく場合、URL末尾に《?cmsp_timestamp=~~》というパラメーターがついていない画像では、画像の差し替えをおこなった際に反映まで最大24時間程かかる場合がございます。
画像の差し替えがショップページに反映されない場合は、時間をあけて確認していただくようお願いいたします。

独自タグでの設置が可能である項目については、独自タグのご利用を推奨します。
　※独自タグとは何ですか？ - ヘルプセンター
　※デザインカスタマイズに使える独自タグの一覧（PC、スマートフォン） - ヘルプセンター

この記事は役に立ちましたか？

他にご質問がございましたら、以下お問い合わせフォームよりご連絡ください。

お申込み前の方、または管理画面にログインできない方はこちら
カラーミーショップのアカウントをお持ちの方はこちら

14人中4人がこの記事が役に立ったと言っています
ページの先頭へ戻る

関連記事

コメント

0件のコメント

記事コメントは受け付けていません。