ビジュアルエディターによるデザイン調整

カテゴリー : 管理画面
2015年01月27日 (火)

CS-Cartではショップフロントを表示しながら、カラーやロゴ、背景を設定出来ます。
本記事ではビジュアルエディターによるデザインの調整方法を説明します。

※ロゴの変更方法についてはこちらの記事で紹介しておりますため、本記事では割愛します。


STEP01.

管理画面にログインし、画面右上のメニューから
 デザイン -> テーマ
に移動します。

STEP02.

 ビジュアルエディター
ボタンをクリックし、テーマエディターを起動します。

STEP03.

【一般】では、ファビコン角丸のオン/オフの変更ができます。

※角丸については、ブラウザによっては反映されない場合があります。

STEP04.

【カラー】では、テキストメニューボタンのカラーを変更することができます。

カラーを変更するには、変更したい箇所の名称の右側をクリックしカラーパレットを開きます。
任意のカラーを選択すると適用されます。

STEP05.

【背景】では各所の背景を変更することができます。
グラデーションや全幅表示のオン/オフ、透明化のオン/オフが設定できます。 また、全体の背景にはカラーだけでなく画像を適用することもできます。
背景画像はスタイルにデフォルトで入っているものもありますが、お手持ちの画像のアップロードもできます。ポジションやリピートの指定、背景固定などの設定も可能です。

歯車のアイコンをクリックするとグラデーションなどのオプション設定項目が開きます。

STEP06.

【フォント】ではフォントの種類やサイズ、スタイルを変更することができます。
本文や見出しなど、場所ごとに適用できます。

STEP07.

【カスタムCSS】では既存のスタイルを変更・上書きすることができます。

STEP08.

変更したスタイルを保存します。 【保存ボタン】をクリックするとスタイル名の入力ウィンドウがポップアップ表示されるので、任意のスタイル名を入力してOKボタンをクリックします。

STEP09.

左カラムの右上に表示されている「<」タブにカーソルを合わせると表示される
「X」タブ
をクリックしてビジュアルエディターを終了します。