デザイン力アップ

• 「画像」パーツの表示設定を変更して、写真に枠や影などのスタイルを付ける
• ブロックテンプレートで会話形式の吹き出しスタイルを設定する
• ホームページ全体のフォント（書体）や大きさを変更する
• ホームページ全体・パーツごとの背景画像を変更する
• ページのタイトルをクリックして内容を表示する
• ホームページを任意のカラーに変更する
• ホームページのパーツ毎に背景を変更する
• 固定エリア（ホームページの四隅）にパーツを固定表示する
• ちょっとした設定でただの画像を「メニューバナー」に！
• ホームページのフォントサイズのカスタマイズ

• 「画像」パーツの表示設定を変更して、写真に枠や影などのスタイルを付ける

   

  ホームページパーツの「画像」を、元の画像を加工せずに表示設定の指定だけで装飾することができます。

  例えば、上記にある「おすすめコース」という親ページパーツを開いた時の子ページパーツの画像の表示を変更するには、以下の手順で表示設定を変更することができます。

  
  
  くわしく！
• ブロックテンプレートで会話形式の吹き出しスタイルを設定する

  ブロックテンプレートの「会話形式の吹き出し」を使うと、人と人の会話のようなやりとりを、吹き出しスタイルで表示できます。

  たとえば、お客様とのやりとりを紹介したいときや、ブログの中で親しみやすく情報を伝えたいときに便利です。

  
  

  このページでは、「会話形式の吹き出し」テンプレートの使い方と設定手順をご紹介します。

  
  
  くわしく！
• ホームページ全体のフォント（書体）や大きさを変更する

  リウムスマイル！のデザインテンプレートにはデザインにあったフォントを設定していますが、

  見出しやサブタイトル、電話番号など、一部のフォントを変更したいという場合もあるかと思います。

   

  そんな時に簡単にフォントの設定を変更することができる機能がありますので、設定方法をご説明いたします。

  • Before

    ---

    

  • After

    ---

    

  くわしく！
• ホームページ全体・パーツごとの背景画像を変更する

  リウムスマイル！ではホームページ全体やパーツごとの背景画像を簡単に変更することができます。

  オリジナルの画像をアップロードして、背景画像を変更することでデザイン性をぐっと高める事が可能です。

  ただし、設定によっては文字の視認性が低下する場合もありますのでご注意ください。

  ---

  操作手順

• ページのタイトルをクリックして内容を表示する

  子パーツを沢山表示するページで、最初は子パーツの内容を閉じておいて、タイトルがクリックされると内容を開くという設定手順をご案内します。

   

  例えば次のような「よくある質問」ページのように、最初に子パーツのタイトル（質問）だけを一覧表示しておき、タイトルがクリックされると、次のように内容（回答）が開くといったような表示設定ができます。

   

  • 

  • 

  くわしく！
• ホームページを任意のカラーに変更する

  リウムスマイル！ではホームページのカラー設定を任意の色にカスタマイズできる機能があります。

  見出しなど一部の色を変更することや、ホームページ全体の色を変更することもできます。

  ※カラーを変更する際は、文字の可読性や視認性、全体のカラーリングなど注意しましょう。

  ※文字の色を変更する場合は、背景と文字の色にコントラストをつけて、文字の読み易さを損なわないように注意しましょう。

   

  • Before

    ---

    

  • After

    ---

    

    ---

    

  くわしく！
• ホームページのパーツ毎に背景を変更する

  ホームページ上に表示する１パーツ毎の背景の設定をカスタマイズすることができます。

  効果的にパーツ毎に背景を変更すると、下図のようなシンプルなページ構成のものに、メリハリを付けることができます。

   

  パーツ背景なし

  ▶

  パーツ背景あり

  くわしく！
• 固定エリア（ホームページの四隅）にパーツを固定表示する

  ホームページの表示レイアウト設定で「固定エリア」に、お問合せフォームなどのパーツを設定し、隅の任意の位置に固定的に（スクロールしても移動しないで）表示し続けることができます。

  
  

  • 

    パソコン版

  • 

    スマホ版

  ホームページをご覧になった方が、次に起こしたくなるアクションへのリンクを固定的に表示しておくと、お客様が一々ホームページをスクロールして頭に戻ったり、末尾に進めたりしなくても、いつでもアクションができるので親切です。

  上記の例のように、リンクバナー画像を固定的に表示設定する手順をご説明します。

  くわしく！
• ちょっとした設定でただの画像を「メニューバナー」に！

  前回「難しい写真加工をせずにメニューバナーのように見せるには？」で自分のお店・サロンで撮った写真を簡単にメニューバナー（リンクバナー）風に見せる方法をお伝えしましたが・・・

  今回は新しく追加された機能「概要」を使ってさらに今時のデザインのバナーに見せる方法をご紹介します！

  
  

  新機能「概要」とは

  ページの内容とは別に、ちょっとした説明を載せたい時に使える機能です。

  内容を表示するには文字数が多すぎる場合や、今回のようにバナー風に見せたいときに活用できます。

  くわしく！
• ホームページのフォントサイズのカスタマイズ

  フォントサイズについてです。

   

  リウムスマイルのデザインスキン（テンプレート）は、一般的に読みやすいサイズに調整されているのですが、まれに本文のフォントサイズをご自身で大き目に変更されている方がいらっしゃいます。

  ご自身の感覚で「もう少し大きい方が良い！」と思われたりなどで変更されてるのかなぁと思うのですが、実際は閲覧される方が見る環境によって状況が変わってくるので、難しいところです。

   

  また、最近の多くのブラウザでは簡単に拡大したりできますので、閲覧される方が丁度良い倍率に設定されている場合、そこからさらに大きい文字となり大きなお世話になってしまう事も無きにしも非ずです。

  
  
  多くのブラウザで[Control]キーを押しながら、[+]や[-]キーを押すと、倍率が変わります。
  
  

  
  ただ、お店のメインのお客様の想定がシニア層とハッキリしている場合などは、そのお客様層に合わせて、ホームページ全体のフォントサイズを変更するのは良いと思います。

   

  リウムスマイル！は、その場合に便利な、全体のフォントサイズ指定が可能です。

  
  
  くわしく！