デザイン力アップ

• 大きさや向きがバラバラな画像の表示サイズを自動で揃える
• ブログページのレイアウトをカスタマイズする（設定例付き）
• ホームページのデザインスキン（デザインテンプレート）を変更する・元に戻す
• スマホから画像をアップロードする
• 簡単ロゴ作成機能で、ホームページのロゴを作成する
• 複数のヘッドライン画像が切り替わるようにする
• ホームページにファビコン（Favicon）を設定する
• 画像を追加・変更する
• 区切り線・水平線矢印を入れる
• ページに「リンクカード」を挿入する

• 大きさや向きがバラバラな画像の表示サイズを自動で揃える
  一覧ページなどでそれぞれの記事の画像をアイキャッチとして表示させることがあると思いますが、この時画像の縦横の向きやサイズが不統一だと少し不格好に見えます。
  サービスメニュー一覧などの場合ですとトリミングしたりして統一し、意図した通りに表示することがベストですが、ブログなどの場合スマホでカジュアルに撮影した写真をそのまま使うことも多く、不揃いになってしまうこともあるかと思います。
  そういう時に良い感じに使える「画像比率固定トリミング」という表示設定をすると、一つ一つ画像を加工しなくても、画像の縦横比を維持したまま自動でトリミングして一律同じサイズで表示されます。
  
  

  

  例えば、上記のように画像のサイズや縦横の向きがバラバラなブログ一覧ページを、画像の加工をせずに
  
  

  

  この↑ような形で自動的にトリミング表示できます。
  
  
  設定手順は、
  プレビュー画面でブログ一覧ページを表示して、
  
  ブログ見出しの左肩に表示されている緑色の歯車ボタンをクリックし、
  
  
  
  画像比率固定トリミング欄を、「正方形」、または、「16:9」に設定し、下部の「保存」をクリックします。

• ブログページのレイアウトをカスタマイズする（設定例付き）

  ネット上のブログを観てみると、多種多様なレイアウトが存在します。

  一番良いレイアウトはこれ！というものが存在するのではなく、ノウハウ系、読み物系、日常日記系など、その形態によってそれぞれに合ったレイアウトがあるように思います。リウムスマイル！では、専門的な知識不要で、簡単にページレイアウトをカスタマイズすることができます。

  
  

  以下にページレイアウト例と、その表示設定例をご紹介いたします。

  
  

  まず、レイアウトの設定手順は、

  
  
  1. リウムスマイル！管理画面ログイン後、画面左上の「PC版 プレビュー」ボタンをクリックしてプレビュー画面を表示
  2. 上部「ブログ」をクリックするなどして、ブログ一覧ページを表示
  3. 「ブログ」見出し左肩に表示されている緑色の歯車ボタンをクリック
  
  

  

  
  緑歯車ボタンをクリック後に表示される「表示設定」画面でレイアウトや表示数、表示したい項目など、色々カスタマイズできます。

  
  

  次に具体的なレイアウト例とその表示設定をご紹介します。

  くわしく！
• ホームページのデザインスキン（デザインテンプレート）を変更する・元に戻す

  リウムスマイル！は、ホームページのデザイン部分だけが「デザインスキン」として定義されているため、ページの内容、構造はそのままで、デザインのみ簡単に変更することができます。 

   

  　　　

  デザインスキン（テンプレート）一覧はこちら

  バナーの自動変更にご注意

  デザインスキンを変更すると、各パーツで設定した「おすすめプリセットバナー」が自動的に変更されます。

  バナーがイメージに会わない場合は、各パーツのバナーを再設定してみましょう。

  操作手順

• スマホから画像をアップロードする

  リウムスマイル！は、パソコンだけでなくスマホやタブレットなどインターネットに繋がるデバイスでご利用いただくことができます。

  最近では、ホームページに使用する写真を、スマホで撮影されることも多いかと思いますが、スマホで撮影した写真は、そのままスマホから簡単にリウムスマイル！へアップロードしていただけます。

  スマホからリウムスマイル！管理画面にアクセスする方法は、PCと同じです。
  詳しくはこちらをご覧ください。
  くわしく！
• 簡単ロゴ作成機能で、ホームページのロゴを作成する

  ロゴには、「どんなサービスをしている会社なのか？」といったサロン（お店）そのもののイメージを相手に伝える大切な役割を持っています。

   

  また、デザインがインパクトとなりお客様にサロン（お店）を印象づけることができます。

  例えば、有名企業のロゴでいうと、こんなのがありますね。

   

  

   

  このロゴを見ると、どこの会社か？何をやっているのか？がすぐに連想されると思います。

  ロゴにはそれだけ、人に印象付ける効力があります。

   

  このことから、サロン（お店）をはじめたら、できるだけ早いうち（できれば最初から）ロゴはご用意いただくことをおすすめします。
  

  もちろんロゴを作成するにあたってプロのデザイナーに依頼されることをお勧めしますが、リウムスマイル！の「簡単ロゴメーカー」でワンポイントの画像と文字を組み合わせる簡易なロゴをご自身で作成することが可能です。

  本簡単ロゴメーカーで作成したロゴは、リウムスマイル！で作成したホームページでのみ利用可能です。

   

  くわしく！
• 複数のヘッドライン画像が切り替わるようにする

  簡単にヘッドラインの画像が、順次自動的にふわっと切り替わるようにできます。

  例えば、

  • お店のコンセプトを表した画像
  • お料理や施術風景などの画像
  • お店の外観や内観の画像

  などの画像を用意しておき、それぞれが順次切り替わるようなホームページが作成できます。

  くわしく！
• ホームページにファビコン（Favicon）を設定する

   ファビコン（Favicon）とは、ブラウザのアドレスバーやタブ、お気に入り登録時にサイトタイトル横に出ているアイコンのことです。

  サロン・お店のロゴマークなどを設定しておくと、たくさんタブを開いている時やお気に入り（ブックマーク）の中から探す時の目印となってとても便利です。

  ファビコンにセットしたい正方形の画像をご用意いただき、それを下記の手順で設定できます。

  操作手順

  1. リウムスマイル！管理画面上部オレンジタブ［ホームページ］-［ホームページパーツ一覧］の順にクリック
  2. ［ホームページ基本情報］をクリック
  3. ホームページ基本情報画面を下にスクロールし、Favicon設定の左にある［画像アップロード／選択］をクリック
  4. 「ファイルをアップロードする」ボタンをクリックして、お使いのPCの中からFaviconに設定したい画像を選択してアップロード
  5. 基本情報画面左下の［保存］をクリック

• 画像を追加・変更する

  リウムスマイル！では、一つのホームぺージパーツにアイキャッチ画像として１つの画像を簡単に設定できます。

  アイキャッチ画像とは、パーツの本文冒頭や一覧に配置される一番目を引く画像です。

  1パーツにつき1画像であることや必ず冒頭に表示されることなどいくつかの制約がありますが、その分簡単に設定でき、表示レイアウトの変更が簡単にできます。

   

  また、本文内にはいくつでも自由に画像を表示することができます。

  文章と画像を上手にレイアウトするには少しコツが要りますが、その分自由度が高いです。

   

  まずは、アイキャッチとなる画像を一つ設定し、もっと沢山画像を表示したい場合に、後述する本文内に画像を挿入していく方法を試してみてください。

  くわしく！
• 区切り線・水平線矢印を入れる

  リウムスマイル！で作成したホームページの文章内に、区切り線を入れることができます。

  ちなみに区切り線というのはこういう線のことです。

  
  

  ---

  ---

  ---

  ---

  
  

  見出しなどで区切るまでもない、文章の途中で一呼吸置きたいときなどにご利用いただくとピッタリの機能です。

  
  

  操作手順

• ページに「リンクカード」を挿入する

  「リンクカード」とは、内部や外部のホームページやブログ記事へのリンクを、タイトルや概要、アイキャッチ画像などを見やすくまとめた、リンクデザインの一つです。

  ブログなどを書かれている時に、外部のブログで紹介したい記事、引用したい記事などをリンクすることがあると思います。

  そんな時に、このリンクカードデザインを活用すると、とても見やすくなります。

   

  リウムスマイル！では、本文エディタ上部の鎖ボタン（リンクを追加/変更）をクリックして、リンクを作成するときに「カード型スタイル」デザインを選択することで、下記のようなリンクカードを簡単に作成することができます。

  

  ホームページ作成・予約管理・顧客管理・メルマガ配信 | サロン、お店のためのリウムスマイル！

  スマホとPC両対応のホームページ作成、予約管理、メルマガ配信、顧客管理サロン・お店に必要なものがまるっと一つになったリウムスマイル！

  riumsmile.jp

   

  
  
  くわしく！