ホームページ制作ツールとして非常に優れた昨日を持つジンドゥーですが、スマホ表示の際に「ワンタップで電話をかける機能」が標準で用意されていません。
その欠点を解消する「ジンドゥー用フローティングメニュー」の設置方法をご説明します。
フローティングメニュとは?
フローティングメニューは、スマホ表示の際にホームページの最下部に出てくる部分のことです。
この事例では、青い背景にアイコンが4つ並んでいるところですね。
それぞれのアイコンはタップすることが可能で、左から「トップページ、電話をかける、お問い合わせページに移動、ページ上部に移動」という機能が割り振られています。
もちろんアイコンやそのリンク先などを変更することで、様々な役割を持つボタンを付けることができます。
フローティングメニュー設置に必要なソースコード
フローティングメニューを実現するためには、以下の2つのソースコードをホームページの適切な位置に設置し、内容を少々カスタマイズする必要があります。
①ジンドゥー用フローティングメニューHTML
<div id="footerFloatingMenu">
<a href="トップページのURL" class="home">
</a> <a href="tel:000000000" class="tel"></a>
<a href="お問い合わせページのURL" class="mail"></a>
<a href="#top" class="top"></a>
</div>
②ジンドゥー用フローティングメニューCSS
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style type="text/css">
/*<![CDATA[*/
/* =======================================
全体用スタイル
======================================= */
/* =======================================
PC用スタイル
======================================= */
@media screen and (min-width: 768px) {
/*ここにPC用スタイルを記述*/
}
/* =======================================
タブレット用スタイル
======================================= */
@media screen and (min-width:768px) and ( max-width:1000px) {
/*ここにタブレット用スタイルを記述*/
#footerFloatingMenu {
display: none !important; /*非表示*/
}
}
/* =======================================
モバイル用スタイル
======================================= */
@media screen and (max-width: 767px) {
/*ここにスマホ用スタイルを記述*/
/*------ フローティングメニュー ------*/
#footerFloatingMenu {
display: block;
width: 100%;
height: 90px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
padding: 0 auto;
background-color: #6495ED;/*-背景の色-*/
font-size: 3em;
}
#footerFloatingMenu a {
text-decoration: none !important;
}
a.home,a.tel,a.mail,a.top{
position: relative;
padding: 15px 10px;
}
/*------ 1.home ------*/
a.home:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f015";
color: #ffffff;/*-アイコンの色-*/
}
a.home:after {
content: "HOME";
font-size: .2em;
color: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: 0;
text-align: center;
}
/*------ 2.tel ------*/
a.tel:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f095";
color: #ffffff;/*-アイコンの色-*/
}
a.tel:after {
content: "TEL";
font-size: .2em;
color: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: 0;
text-align: center;
}
/*------ 3.mail ------*/
a.mail:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f0e0";
color: #ffffff;/*-アイコンの色-*/
}
a.mail:after {
content: "MAIL";
font-size: .2em;
color: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: 0;
text-align: center;
}
/*------ 4.top ------*/
a.top:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f102";
color: #ffffff;/*-アイコンの色-*/
}
a.top:after {
content: "TOP";
font-size: .2em;
color: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: 0;
text-align: center;
}
}
/*]]>*/
</style>
できるだけわかりやすくシンプルな構成になっており、上記の2種類のプログラムをそのままホームページに設置すれば、基本のフローティングメニューが再現できるようになっております。
ただ、すでにお使いのホームページのヘッダー部分に他の記述やプログラムが記載されている場合は、現状に合わせて、フローティングメニュー用の記述を追加するようにしてください。
「必要な記述を消してしまった」「元のデザインがおかしくなってしまった」など、ホームページの内容を改変したことにより生じた不具合に関しては、当方では一切の責任を負いかねますので、予めご了承ください。
①フッター、もしくはサイドバーにHTMLを埋め込む
まず、「①ジンドゥー用フローティングメニュー」のHTMLをジンドゥーホームページの「フッター」、または「サイドバー」の一番下に埋め込みます。
利用するのは、「ウィジェット/HTML」です。
ホームページの中に「コンテンツの追加」から「ウィジェット/HTML」を挿入し、その中にテキストをコピー&ペーストしてください。
その際、以下の部分を皆さんのホームページ用にカスタマイズしてください。
- 「トップページのURL」をお使いのJimdoホームページのURLに変更
- TEL:000000000の部分を問い合わせを受けたい電話番号に変更(ハイフンなどなし)
- 「お問い合わせページのURL」をお使いのJimdoホームページの問い合わせフォームがあるページのURLに変更
②「ヘッダー編集」の中にCSSを書き込む
「管理メニュー」→「基本設定」→「ヘッダー編集」を選び、「②ジンドゥー用フローティングメニューCSS」の内容をコピーします。
Googleアナリティクスのタグなど、他の要素がすでに書き込まれている場合は、不具合が出ないように調整してください。
上書きなどしてしまうと、元に戻すことはできませんので、必ずバックアップをとってから行いましょう。
うまく行かずに元に戻らなくなっても、一切の責任は負いかねますのでご了承ください。
背景の色を変えたい場合のやり方
背景の色とアイコンの色は、お使いのJimdoホームページに合わせて変更することが可能です。
「color: #ffffff;/*-アイコンの色-*/」の部分で6桁の英数字を使って色が指定してあります。
ホームページで使える色がまとめてあるWEBサイトがありますので、そちらから選ぶのが簡単でしょう。
設置がうまくいけば、指定した色で背景と4つのアイコンが表示されます。
しっかりと動作するか、タップして試してみましょう。
ぜひ、ご活用ください。
アイコンやリンク先はカスタマイズ可能
こちらはジンドゥーカフェ太田のホームページで利用しているフローティングメニューですが、インスタグラムやLINEなどのアイコンを使用し、タップで移動できるような設定など、様々なカスタマイズが可能です。
ジンドゥーカフェでは、フローティングメニューのオーダーメイドカスタマイズも承っておりますので、お気軽にご相談ください。
本記事の作成に関しましては、様々な書籍やサイト等を参考にさせていただきました。
ありがとうございました。