スマホとPC両対応のホームページ作成、ご予約フォームの作成、
メルマガ配信、顧客管理機能までがまるっと一つになったリウムスマイル!

電話番号:06-6484-5445

営業時間:平日 9:00〜17:30

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

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

カスタムデザイン管理

カスタムデザイン管理は、リウムスマイル!に用意されたデザインスキンの、デザインを制御するための設定を編集する機能です。

HTMLやCSSの知識がある方は、ホームページ全体のデザインをカスタマイズすることが可能です。

カスタマイズされたデザインは、携帯電話のモバイルモードのデザインスキンには適用されません。

(現在、携帯電話のモバイルモードのデザインスキンを編集する機能はありません。)



ここでは、パソコンで見た際のホームページのデザインの設定を編集する方法をご紹介いたします。

なお、リウムスマイル!ではスタイルシート(CSS) に関する技術的な質問はサポートできませんのでご了承ください。


  1. リウムスマイル!のデザインスキンの仕組み

    【1】10個のエリア

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

    【3】スタイルシート

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

    【1】新規作成

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

    【3】CSSタブ

    【4】FILEタブ

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

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

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

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

  4. カスタムデザインスキンの内容を初期状態に戻す
  5. 使わないカスタムデザインスキンを削除する

 

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

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


【1】10個のエリア

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

【3】スタイルシート


 

【1】10個のエリア

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


10個のエリア

エリアの主な役割

area_1 → ヘッダ(ロゴ、サイトキャッチコピー など)

area_2 → メインメニュー

area_3 → ランディング

area_4 → サブサイドメニュー(リンク など)

area_5 → ヘッダ(電話番号、会社情報 など)

area_6 → サイドメニュー

area_7 → コンテンツヘッダ

area_8 → メインコンテンツ

area_9 → ランディング

area_10→ フッタ

 

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

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

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


 

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

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

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

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

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

ホームページパーツの表示設定は、リウムスマイル!のレイアウト設定の機能で、カスタムデザインではありません。

カスタムデザインを使用しなくても、レイアウト設定で、さまざまなパーツの組み合わせ表示が可能です。


 

【3】スタイルシート

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

PAGETOP





 

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


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


【1】新規作成

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

【3】CSSタブ

【4】FILEタブ


 

【1】新規作成

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


 

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

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

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


 

【3】CSSタブ

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

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

2つのスタイルシートの設定画面


 

【4】FILEタブ

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

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

カスタムデザインスキンを1つも作成していない場合、【2】【3】【4】は表示されません。

PAGETOP





 

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

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

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

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


 

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

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

PAGETOP


 

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

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

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

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

    カスタムデザインスキンを選択

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

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

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

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

    [CSS]を編集

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

    [FILE]を編集

PAGETOP


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

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

PAGETOP


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

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

PAGETOP


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

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

(※1) 追加記述 例)background: url(img/ファイル名) no-repeat left top;

PAGETOP


 

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

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

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

カスタムデザインスキンの編集は何度でも可能です。

レイアウトが崩れたりすることがありますので、プレビューで確認しながら行ってください。

PAGETOP





 

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

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

PAGETOP





 

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

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

削除したカスタムデザインスキンを、デザインスキンとして設定していた場合は、自動的に「type001-01」のデザインスキンが割り当てられます。

PAGETOP