カスタムデザイン管理について

 

リウムスマイル！のデザインスキンの仕組み

カスタムデザイン管理の操作方法に入る前に、リウムスマイル！のデザインスキンの仕組みについてご紹介いたします。

【１】１０個のエリア

【２】表示させるホームページパーツ

【３】スタイルシート

 

【１】１０個のエリア

リウムスマイル！のデザインスキンは、１０個のエリアで構成されています。

 

デザインスキンによって、エリアの配置はそれぞれ決められています。

エリアの配置は、変更できません。

必ず、１つのデザインスキンに１０個のエリアが組み込まれています。

 

【２】表示させるホームページパーツ

ホームページパーツとは、電話番号や住所、サービスの内容や、お店紹介など、入力されたデータのことです。

１０個のエリアにそれぞれ表示させるホームページパーツを選択できます。

また、そのホームページパーツの表示方法も、それぞれ設定できます。

例えば、「サービスのバナーを横に４つ並べて、全てのエリアに表示させる」ということも可能です。

 

【３】スタイルシート

リウムスマイル！のデザインスキンは、スタイルシートでレイアウトや色などのデザインを設定しています。

PAGETOP

 

カスタムデザイン管理ページの機能説明

管理画面→[ホームページ]-[デザイン設定メニュー]-[カスタムデザイン管理]をクリックします。

【１】新規作成

【２】カスタムデザインスキン一覧

【３】CSSタブ

【４】FILEタブ

 

【１】新規作成

元にするデザインスキンを選択し、名前をつけて、カスタムデザインスキンを作成します。

 

【２】カスタムデザインスキン一覧

作成したカスタムデザインスキンの名前が表示されます。

複数のカスタムデザインスキンを作成している場合、編集するカスタムデザインスキンをここで選択します。

 

【３】CSSタブ

２つのスタイルシートの設定画面があります。

• style.css タブ
  主にこちらをご利用ください。
  文字の色、ホームページの背景、レイアウトなどのデザインを自由にカスタマイズできます。
  「カスタムデザイン用スタイル記述エリア」にご記入ください。
• style2.css タブ
  予備としてお使いいただけます。

 

【４】FILEタブ

デザインスキンで使用している画像ファイル一覧です。

上書きしたり、追加することで、デザインスキンをカスタマイズできます。

PAGETOP

 

カスタムデザインスキンを作成してみよう！実践編

【１】カスタムデザインスキンを新規作成する

【２】作成したカスタムデザインスキンを編集する

【３】デザインスキンを、作成したカスタムデザインスキンに変更する

 

【１】カスタムデザインスキンを新規作成する

1. 新規作成ボタンをクリックします。
2. 元にするデザインスキンを選択します。
   ▼をクリックしタイプ名をクリックするか、[参照]をクリックし「元デザインスキン選択」画面から選択してください。
3. 作成するデザインスキンに名前を設定します。
   ※半角英数字のみ可（「-」や「/」など、記号は使えません）
4. [新規作成実行]をクリックします。
   
5. 左の「カスタムデザイン一覧」に設定した名前が追加されます。
   

PAGETOP

 

【２】作成したカスタムデザインスキンを編集する

1. カスタムデザインスキン一覧から編集したいカスタムデザインスキンを選択します。

   選択されているスキンは黒い太字で表示されています。

   複数ある場合、選択されていないスキンは水色のリンクになっています。

   

2. 文字の色や、レイアウトを変更したい箇所のスタイルの設定を、[CSS]→[style.css]をクリックします。

   「カスタムデザイン用スタイル記述エリア」内に設定したいスタイルを記述します。

   ※編集後は[保存]をクリックします。

   ※[保存]をクリックせずに、タブを変更した場合、編集前の状態に戻ります。

   

3. 画像を編集する場合、[FILE]をクリックします。

   

PAGETOP

■既存の画像を上書きする方法

1. 変更したい画像のサイズを確認する
   
2. 既存のサイズと同じサイズで画像を作成する
3. [FILE]−[ファイルアップロード]をクリックする
   
4. [参照]から作成した画像ファイルを選択する
   
5. 上書きしたい画像の「このファイルに上書きアップロード」アイコンをクリックする
   
6. 上書き完了！
   

PAGETOP

■新しい画像を追加する方法

1. 画像を作成する　※ファイル名は半角英数字にしておく
2. [FILE]−[ファイルアップロード]をクリックする
   
3. [参照]から作成した画像ファイルを選択する
4. [アップロード実行]をクリックする
   
5. アップロード完了！
   

PAGETOP

■追加した画像を使用する方法

1. 追加した画像ファイル群の左上に追加されたファイル名をコピーする
   
2. [CSS]タブに切り替え、使用したい箇所に（※１）のコードを追加する
3. [保存]をクリックし、ホームページを確認する

PAGETOP

 

【３】デザインスキンを作成したカスタムデザインスキンに変更する

カスタムデザインスキンの編集が完成したら、デザインスキンを設定してみましょう。

1. 管理画面→[ホームページ]→[デザイン設定メニュー]→[デザイン設定[PC]]→[デザインスキン設定]をクリックします。
   
2. [カスタムデザイン]タブをクリックします。
   
3. 作成した、カスタムデザインスキンの、[このデザインを適用]をクリックします。
   
4. 「デザインスキンを変更します。よろしいですか？」と表示されますので、「OK」をクリックします。
   
5. デザインスキンが変更されますので、プレビューで確認してください。

PAGETOP

 

カスタムデザインスキンの内容を初期状態に戻す

1. カスタムデザインスキンを新規作成します。（今まで作成したものとは違う名前で登録します。）
2. 管理画面→[ホームページ]→[デザイン設定メニュー]→[デザイン設定[PC]]→[デザインスキン設定]をクリックします。
3. [カスタムデザイン]タブをクリックします。
4. 新しく作成した、カスタムデザインスキンの、[このデザインを適用]をクリックします。
5. 「デザインスキンを変更します。よろしいですか？」と表示されますので、「OK」をクリックします。

PAGETOP

 

使わないカスタムデザインスキンを削除する

1. カスタムデザインスキン一覧で、削除するデザインスキンにチェックをいれます。
2. [チェックをつけたフォルダを削除]をクリックします。

PAGETOP