· 

ワンタップで電話がかかる!Jimdo用スマホ表示のフローティングメニュー

ホームページ制作ツールとして非常に優れた昨日を持つジンドゥーですが、スマホ表示の際に「ワンタップで電話をかける機能」が標準で用意されていません。

 

その欠点を解消する「ジンドゥー用フローティングメニュー」の設置方法をご説明します。

フローティングメニュとは?

フローティングメニューは、スマホ表示の際にホームページの最下部に出てくる部分のことです。

 

この事例では、青い背景にアイコンが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などのアイコンを使用し、タップで移動できるような設定など、様々なカスタマイズが可能です。

 

ジンドゥーカフェでは、フローティングメニューのオーダーメイドカスタマイズも承っておりますので、お気軽にご相談ください。

 



本記事の作成に関しましては、様々な書籍やサイト等を参考にさせていただきました。

ありがとうございました。

群馬県太田市市場町457-3

ZEROTOP DESIGN WORKS内