スマホ固定フッターメニューを設定する

スマホ固定フッターメニューを設定する

スマホ固定フッターメニューについて

 

本機能は、サイトをスマートフォン(スマホ)で閲覧した際に、画面下部に各種メニューを表示させる事ができる機能です。
たとえば、スマホからのお問い合わせを増やしたいといったケースや、スマホでサイトを閲覧した際のユーザビリティを向上させたい場合に役立ちます。

 

本機能の特徴としては、定型で6つのメニューをご用意している他、ご自身でリンクを追加することが可能です。
また背景色やアイコンの色なども自由に変更することができますので、設置するサイトに応じて適宜カスタマイズしてください。

 

 

テンプレートの初期化について

本機能はSIRIUS2 Ver1.010で追加された機能です。
それ以前のバージョンを利用されている場合は、テンプレート初期化、及び再適用が必要となります。
詳しくは下記のページをご参照ください。

 

スマホ固定フッターメニューの設定方法について

デザインタブ内にある「スマホ固定メニュー」ボタンをクリックする

固定メニューを設定する場合、「デザイン」タブ内にある【スマホ固定メニュー】を選択します。

 

 

フッター固定メニューの表示をオンにする

下図のような設定画面が表示されます。こちらの画面で、固定フッターメニューを設定します。
左上部に「フッター固定メニューの表示」という項目がありますので、こちらをオンの状態にしてください。

 

 

左側の画面で、固定メニュー内に表示する項目の「表示列」にチェックを入れる

右側のプレビュー上に固定フッターメニューのプレビューが表示されますので、そちらを見ながら、表示する項目を選択してください。

 

 

各項目の説明
ホーム トップページに戻ります
メニュー トップメニューを表示させます
検索

サイト内検索を表示させます
(ただし、サイト内検索が有効になっていない場合は設定する事はできません)

電話

スマホから直接電話をかける事ができます。
例えばお店の電話番号を設定すれば、電話でのお問い合わせがスムーズになります。

問い合わせ

スマホから問い合わせを受けたい場合に設定を行います。
メールアドレスを設定すれば直接メール画面が起動します。
(リンク先のURLを指定すれば、フォームなどに移動させる事もできます)

トップへ戻る ページの上部に戻るボタンを表示します。(この設定が行われている場合、テンプレート内に設置されているデフォルトの「トップへ戻る」ボタンは表示されません)

 

なお、「電話」及び「問い合わせ」の表示項目をオンにした場合、下図のような設定画面が表示されます。

 

 

電話の項目を表示させる場合は電話番号を、
問い合わせの項目を表示させる場合はメールアドレスまたはリンク先のURLを設定してください。
※空欄にする事はできませんのでご注意ください。

リンクを設定する

定型の項目以外で、メニュー内に表示させたいリンクがある場合、上部ツールバー上にある「追加」ボタンから設定を行います。

 

 

すると下図のような設定画面が表示されますので、こちらでリンク先の設定を行って下さい。

 

 

テキスト メニュー内に表示させるテキストを指定します
リンク先 リンク先のURLを指定します。右側にあるアイコンを選択すると、サイト内のページを選択する事ができます。
アイコン

メニュー内に表示させるアイコン画像を表示させます。
下部の注意書きにも記載しているように、100kb以下の透過Pngファイルを指定ください。(スタイルシート側で処理を行うため、画像自体の色は一切反映されませんのでご注意ください。)

表示 このリンクを表示させるかを指定します。通常はオンの状態にしてください。

 

上記の設定が完了したら、画面下部のOKボタンをクリックします。すると右側のプレビュー画面が更新され、リンクが追加されます。

 

 

なお本機能では、最大6件までのアイテムを表示させることができますので、ご自身のサイトに応じてリンクの設定・編集を行って下さい。

デザインを変更する

デフォルトでは、黒色の背景色となっていますが、背景色やアイコンの色、透過設定を自由に変更することができます。
これらの設定を変更したい場合、左側の画面の「デザイン設定」タブを開いてください。

 

 

デザイン設定
メニュー背景色

メニューの背景色を指定します。
デフォルトではブラックとなっていますが、サイトに応じて適宜変更してください。

アイコン色

アイコンの色を指定します。
デフォルトでは白となっていますが、アイコンの色を変更したい場合はこちらで変更してください。
なお「テキスト色」が空欄の場合、テキスト色も同時に変更されます。

テキスト色

アイコンの下に表示されるテキストの色を指定します。
アイコンとは別の文字色にしたい場合、こちらで変更してください。

透明度

メニューの透明度を指定します。
不透明にしたい場合は1.0に、より透過させたい場合は0.1に近づけてください。

 

表示設定
常に表示 デフォルトの設定では、スクロールされた場合のみフッターメニューが表示されますが、常に表示させたい場合はこちらの項目をオンの状態にしてください。
テキストの表示 アイコンの下に表示されるテキストを表示するかどうかの指定を行います。

 

 

以上でリンクの設定は完了です。
なお各メニューの表示順を変更したい場合、ツールバー上にある「上に移動」「下に移動」を選択することで自由に変更することができます。

【新サービス】サイト制作代行サービスをリリースしました!