ホームページのスマホ表示をちょこっとカスタマイズ
2019/02/26
リウムスマイル！で作成したホームページは、レスポンシブ対応となっているのでスマホやタブレットで見た時には自動的に最適化されます。
レスポンシブ対応とは
スマホ・タブレットなどのデバイス（ディスプレイサイズ）毎に、ホームページのレイアウトが自動で変更されるシステムです。
同じHTMLファイルを使用するので、一度のページ編集作業でパソコン版とスマホ版の両方に編集が適応されます。
でも、実はさらに細かなカスタマイズもできるんですよ。
提供してるサービスの効果的な見せ方や、ペルソナさん（ターゲットとなるお客さん）の層によって、カスタマイズしてチューンナップすることも可能です。
- 年齢層の高いペルソナさんの為に文字の大きくしたり・・・
- 見やすいようにスマホ版では左右の余白を広くしたり・・・
- ハンバーガーメニュー［三］じゃなくて、パソコン版ホームページのように最初からグローバルナビゲーションメニュー（エリア②）が表示されるようにしたり・・・
なんてことも、リウムスマイル！の機能で簡単にできちゃいます！
スマホ版ホームページでは文字を大きくする
-
Before
-
After
細かいフォントサイズ設定などはできませんが、スマホ表示時にブログの文章の文字サイズを大きくする設定があります。
こちらを設定していただくと、エリア8（メイン部分）の文字のサイズを大きくすることができます。
デメリット
サイズ設定をすると、現在までに装飾を設定されている箇所については、さらに大きな文字になってしまいますので、装飾を削除されることをおすすめいたします。
- リウムスマイル！管理画面を開いて、管理画面左上の［PC版：プレビュー］をクリックします。
プレビュー画面上部黄色エリアにある「編集ボタン表示切替」の［プロ］をクリックします。
プレビュー画面上部黄色エリアに追加表示された「編集」の［高度なデザイン設定］をクリックします。
高度なデザイン設定画面の「共通 - 内挿入コード」欄の下部プリセットコード：［スマホ表示時にエリア８本文文字サイズを大きくする］にチェックを入れます。- 高度なデザイン設定画面の左下［保存］をクリックします。
スマホ版ホームページでは左右の余白を広くする
-
Before
-
After
最近のスマホの画面サイズはどんどん大きくなってきています。
以前は狭い画面で少しでも情報量を多く見せる、というのが主流でしたが、今はより見やすくゆとりを持たせたデザインに変わってきています。
リウムスマイル！では何も調整せずとも、スマホでも見やすくなるように調整されておりますが、さらにご自身で左右余白を広げていただくことも可能です。
デメリット
左右の余白を更に広げるため、文章を表示するエリアは必然的に狭くなりページが長くなります。
- リウムスマイル！管理画面を開いて、管理画面左上の［PC版：プレビュー］をクリックします。
プレビュー画面上部黄色エリアにある「編集ボタン表示切替」の［プロ］をクリックします。
プレビュー画面上部黄色エリアに追加表示された「編集」の［高度なデザイン設定］をクリックします。
高度なデザイン設定画面の「共通 - 内挿入コード」欄の下部プリセットコード：［スマホ表示時に両サイドに余白を設ける］にチェックを入れます。- 高度なデザイン設定画面の左下［保存］をクリックします。
ハンバーガーメニュー［三］ではなく、パソコン版ホームページのように最初からグローバルナビゲーションメニュー（エリア②）を表示する
-
Before
-
ステップ２
ハンバーガーメニューとは、スマホ版ホームページの右上に表示されている［三］ボタンのナビゲーションメニューのことです。
名前の由来はそのままで、三本の線がハンバーガーに見える事からこのような呼び方になったそうです。
このハンバーガーメニューはコンテンツの表示エリアを大きく獲得でき、また、タップすることでメニューが表示・非表示できるのでとても便利です。
ですが、まだスマホに慣れていない方には分かりづらかったりすることも・・・
そんなペルソナさんが多い場合は、グローバルナビゲーションメニューを常に表示しておくこともできます。
デメリット
グローバルナビゲーションメニューを常に表示すると、スマホ版ホームページを開いた時、バーガーメニューを設定している時よりもコンテンツ部分が下に表示されるようになります。
- リウムスマイル！管理画面を開いて、管理画面左上の［PC版：プレビュー］をクリックします。
プレビュー画面上部黄色エリアにある「編集ボタン表示切替」の［プロ］をクリックします。
プレビュー画面上部黄色エリアに追加表示された「編集」の［高度なデザイン設定］をクリックします。
高度なデザイン設定画面上部にある［スマホ］タブをクリックします。
「スマホで上部グローバルナビゲーションメニュー（エリア２）を開閉式にする」で［常に表示］を選択します。- 高度なデザイン設定画面の左下［保存］をクリックします。
また、こちらのグローバルナビゲーションメニューは上部に固定することも出来ます。
下記ページで具体的な設定方法をご紹介しておりますので、併せてご覧いただければと思います。
▼グローバルナビゲーションメニューを固定してホームページの利便性をアップ！
https://riumsmile.jp/contents_4452.html
ご自身のサロン・お店のペルソナさんはどんな人が多いのか、どんなデバイスからホームページを見ているのかを考えて、カスタマイズしてみてくださいね！
