ホームページのスマホ表示をちょこっとカスタマイズ

スマホ版ホームページでは文字を大きくする

• 

  Before

• 

  After

細かいフォントサイズ設定などはできませんが、スマホ表示時にブログの文章の文字サイズを大きくする設定があります。

こちらを設定していただくと、エリア8（メイン部分）の文字のサイズを大きくすることができます。

1. リウムスマイル！管理画面を開いて、管理画面左上の［PC版：プレビュー］をクリックします。
2. 
   プレビュー画面上部黄色エリアにある「編集ボタン表示切替」の［プロ］をクリックします。
3. 
   プレビュー画面上部黄色エリアに追加表示された「編集」の［高度なデザイン設定］をクリックします。
4. 
   高度なデザイン設定画面の「共通 - 内挿入コード」欄の下部プリセットコード：［スマホ表示時にエリア８本文文字サイズを大きくする］にチェックを入れます。
5. 高度なデザイン設定画面の左下［保存］をクリックします。

スマホ版ホームページでは左右の余白を広くする

• 

  Before

• 

  After

最近のスマホの画面サイズはどんどん大きくなってきています。

以前は狭い画面で少しでも情報量を多く見せる、というのが主流でしたが、今はより見やすくゆとりを持たせたデザインに変わってきています。

リウムスマイル！では何も調整せずとも、スマホでも見やすくなるように調整されておりますが、さらにご自身で左右余白を広げていただくことも可能です。

1. リウムスマイル！管理画面を開いて、管理画面左上の［PC版：プレビュー］をクリックします。
2. 
   プレビュー画面上部黄色エリアにある「編集ボタン表示切替」の［プロ］をクリックします。
3. 
   プレビュー画面上部黄色エリアに追加表示された「編集」の［高度なデザイン設定］をクリックします。
4. 
   高度なデザイン設定画面の「共通 - 内挿入コード」欄の下部プリセットコード：［スマホ表示時に両サイドに余白を設ける］にチェックを入れます。
5. 高度なデザイン設定画面の左下［保存］をクリックします。

ハンバーガーメニュー［三］ではなく、パソコン版ホームページのように最初からグローバルナビゲーションメニュー（エリア②）を表示する

• 

  Before

• 

  ステップ２

ハンバーガーメニューとは、スマホ版ホームページの右上に表示されている［三］ボタンのナビゲーションメニューのことです。

名前の由来はそのままで、三本の線がハンバーガーに見える事からこのような呼び方になったそうです。

このハンバーガーメニューはコンテンツの表示エリアを大きく獲得でき、また、タップすることでメニューが表示・非表示できるのでとても便利です。

ですが、まだスマホに慣れていない方には分かりづらかったりすることも・・・

そんなペルソナさんが多い場合は、グローバルナビゲーションメニューを常に表示しておくこともできます。

1. リウムスマイル！管理画面を開いて、管理画面左上の［PC版：プレビュー］をクリックします。
2. 
   プレビュー画面上部黄色エリアにある「編集ボタン表示切替」の［プロ］をクリックします。
3. 
   プレビュー画面上部黄色エリアに追加表示された「編集」の［高度なデザイン設定］をクリックします。
4. 
   高度なデザイン設定画面上部にある［スマホ］タブをクリックします。
   「スマホで上部グローバルナビゲーションメニュー（エリア２）を開閉式にする」で［常に表示］を選択します。
5. 高度なデザイン設定画面の左下［保存］をクリックします。

また、こちらのグローバルナビゲーションメニューは上部に固定することも出来ます。

下記ページで具体的な設定方法をご紹介しておりますので、併せてご覧いただければと思います。

▼グローバルナビゲーションメニューを固定してホームページの利便性をアップ！

https://riumsmile.jp/contents_4452.html

ご自身のサロン・お店のペルソナさんはどんな人が多いのか、どんなデバイスからホームページを見ているのかを考えて、カスタマイズしてみてくださいね！