営業時間:平日 9:00〜18:00(土日祝休)
リウムスマイル!で作成したホームページのデザインスキン(テーマ)を変更すると、全体の雰囲気がガラッと変わります。
サービスメニューの構成をリニューアルした時や、ペルソナ(ターゲット)さんの想定を再構築した時など、ホームページのブラッシュアップのタイミングで、デザインスキン(テーマ)を変更されるもの良いと思います。
ただ、
「デザインを変更して、変になったら怖いし…。」
と、危うきに近寄らずな方もいらっしゃるのではないでしょうか?
リウムスマイル!のホームページデザインスキン(テーマ)は100種類以上あるのに、勿体ない…。
と言うことで今回はそんな不安を吹き飛ばすべく、デザインスキン(テーマ)の変更の手順と、いくつかのアドバイスを書きたいと思います。
■ホームページデザインスキン(テーマ)の変更方法
■デザインスキン(テーマ)の変更で、ホームページはどう変化するか?
■デザインスキン(テーマ)を元す方法
■ヘッドライン画像の推奨画像サイズの調整
1.プレビュー画面上部の「デザインスキン変更」ボタンをクリック
2.変更したいデザイン欄の「同じ系統を全部見る」をクリック
3.2で選んだデザインと同系統の色違いやレイアウト違いがすべて表示されますので、その中から変更したいデザインの「このデザインを見る」→「このデザインを選択」の順にクリック
これだけで瞬時にホームページのデザインスキン(テーマ)が切り替わります。
「沢山あって、どれにしようか…」とデザイン選びに迷ったら、あなたのお店が想定しているお客様像に立ち戻ってみましょう。
その人はシンプルなデザインが好みでしょうか?カワイイ系?ゴージャス系?
そのお客様(ペルソナさん、ターゲット)が、あなたのお店に求めていることはなんでしょうか?
清潔感? 信頼感? オシャレ感? ゴージャス感? お手軽感?
そこから、デザインを選んでみてください。
デザインスキン(テーマ)の変更で、ホームページはどう変化するか?
例えば、type003-03から、type048-11へ変更した場合、下のように変化します。
type003-03 | type048-11 |
![]() | ![]() |
トップページ(クリックで拡大します) 全体の装飾、見出し、バナーなどデザインが自動的に変化します。 | |
![]() | ![]() |
個別ページ(クリックで拡大します) 箇条書き、特記事項、表(テーブル)、カレンダーなどのデザインが自動的に変化します。 |
逆に以下の項目については、デザインスキン(テーマ)を変更しても変化しません。
1のオリジナルのバナー画像については、まったくそのまま変化しません。ですので、あまりにも違和感が出る場合は、作り直す必要があります。
2のロゴ画像は、お店のロゴ画像ですので、勝手に変わってしまっては逆に困りますよね?ですのでそのままです。ただ、最初にリウムスマイル!の簡単ロゴ作成機能で作成したものの場合、デザインスキンの色調が変わることによって縁などが多少ギザギザ汚くなってしまう場合があります。その場合は簡単に再作成できますので、もう一度作り直してみてください。
3の本文に付けた文字色などの指定は、そのまま残ります。ですので普段から個別の装飾はせずに、本文エディタ上部の強調や特記、引用などの機能ボタンを使って意味づけをされることをおススメします。
(※個別に色づけなどを行うと、ホームページ全体の統一感を損ないやすく、また、素人っぽくなりがちです)
色々試してみたけど、やっぱり以前のものに戻したい。
そういう時も、簡単に戻せます。
1.リウムスマイル!プレビュー画面上部の「ホームページパーツ編集履歴」ボタンをクリック
2.操作履歴から、元に戻したいデザインスキンの変更操作欄の虫眼鏡ボタンをクリック
3.元のデザインスキン画像をクリック
以上で、元のデザインスキン(テーマ)に戻すことができます。
変更したデザインスキン(テーマ)のヘッドライン画像周りのレイアウトが以前のものと異なるものを選んだ場合、下の画像のようにヘッドライン画像付近に余白(下の画像の←→部分)ができる場合があります。
この場合、ヘッドライン画像を推奨サイズの画像でアップロードし直したものに置き換えることで、最適なデザインになります。
1.プレビュー画面のヘッドライン画像右肩に表示される鉛筆ボタンをクリックして、ヘッドライン画像の編集画面を開く
2.「画像アップロード/選択」ボタンをクリック
3.「参照」ボタンをクリックしてヘッドライン画像用のアップロードファイルを選択後、「アップロード実行」をクリック
※「画像オススメサイズ」欄にチェックを付けたまま、ここに表示されている推奨横幅サイズ以上の画像をアップロードしてください。
4.アップロードした画像をクリック
5.画面下部の「保存」をクリック
以上で、下の画像のように、余白のないピッタリサイズのヘッドライン画像に再設定できます。
※ヘッドライン画像を複数枚設定されている場合は、同じ要領ですべてのヘッドライン画像を推奨サイズに再設定してください。