· 

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

jimdo フローティングメニュー

Jimdoの便利なテクニックをご紹介。

 

スマホ表示の時に、ページの下部に固定されて表示される「フローティングメニュー」の作り方。トップページ、電話、お問い合わせフォーム、ページ上部へワンタップで移動できる機能です。

 

特に、「スマホでJimdoホームページを見て、そのまま電話をかけたい!」という場合にとっても便利。そのままワンタップで電話がかけられるので、利便性と問い合わせアップにも効果的です。

 

必要なのは、ウィジェット機能を利用したHTML要素のホームページへの埋め込みと、ヘッダー編集機能を使ったスマホ用CSSの書き込みです。

 

ちょっと難しいですが、ぜひチャレンジしてみてください。

また、この方法は「Jimdoの新レイアウト」を利用しているJimdoホームページ用の方法になります。

独自レイアウトなど、他のレイアウトを利用している方の場合、うまくいかないこともありますのでご了承ください。

 


フッター、もしくはサイドバーにHTMLを埋め込む

まず、右側のHTML要素をJimdoホームページの「フッター」、または「サイドバー」の一番下に埋め込みます。

 

利用するのは、「ウィジェット機能」です。

ホームページの中に「コンテンツの追加」から「ウィジェット機能」を挿入し、その中に右のテキストをコピー&ペーストしてください。

 

その際、変更する部分は以下の通りです。

 

  • 「トップページのURL」をお使いのJimdoホームページのURLに変更
  • TEL:000000000の部分を問い合わせを受けたい電話番号に変更(ハイフンなどなし)
  • 「お問い合わせページのURL」をお使いのJimdoホームページの問い合わせフォームがあるページのURLに変更 

Jimdoフローティングメニュー用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を書き込む

「管理メニュー」→「基本設定」→「ヘッダー編集」を選び、見本のCSSを書き込みます。

Googleアナリティクスのタグなど、他の要素がすでに書き込まれている場合は、不具合が出ないように調整してください。

 

上書きなどしてしまうと、元に戻すことはできませんので、必ずバックアップをとってから行いましょう。

うまく行かずに元に戻らなくなっても責任はとりかねますので、ご了承を。

 

色を変えたい場合のやり方

jimdo フローティングメニュー

背景の色とアイコンの色は、お使いのJimdoホームページに合わせて変更することが可能です。

 

それぞれ#のあとに6桁の英数字で色が指定してあります。

ホームページで使える色がまとめてあるWEBサイトがありますので、そちらから選ぶのが簡単でしょう。

設置がうまくいけば、指定した色で背景と4つのアイコンが表示されます。

しっかりと動作するか、タップして試してみましょう。

 

ぜひ、ご活用ください。

Jimdoフローティングメニュー用CSS見本

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>

 

<script>

jQuery(function() {

    var topBtn = jQuery('#footerFloatingMenu');

    topBtn.hide();

    jQuery(window).scroll(function () {

        if (jQuery(this).scrollTop() > 240) { // 表示される位置

            topBtn.fadeIn();

        } else {

            topBtn.fadeOut();

        }

    });

});

</script>

 

<style type="text/css">

/*<![CDATA[*/

 

/* =======================================

  モバイル用スタイル

======================================= */

@media screen and (max-width: 599px) {

 

 

 

/*------ フローティングメニュー ------*/

#footerFloatingMenu {

    display: block;

    width: 100%;

    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: 5px 10px;

}

 

a.home:before {

    font-family: FontAwesome;

    content: "\f015";

    color: #ffffff;/*-アイコンの色-*/

}

 

a.tel:before {

    font-family: FontAwesome;

    content: "\f095";

    color: #ffffff;/*-アイコンの色-*/

}

 

 

a.mail:before {

    font-family: FontAwesome;

    content: "\f0e0";

    color: #ffffff;/*-アイコンの色-*/

}

 

a.top:before {

    font-family: FontAwesome;

    content: "\f102";

    color: #ffffff;/*-アイコンの色-*/

}

 

 

}

/*]]>*/

</style>

 


アイコンの下に文字を入れたい場合

こちらの画像のように、アイコンの下に説明用の文字を入れたい場合のやり方です。

それぞれのアイコンに対して、赤字になっている部分を追加します。

 

content: "HOME";

という項目が記載される文字です。

「HOME」の部分を入れたい文字に直してください。

このソースをアイコンの数だけ用意して、記載します。

/* =======================================

  モバイル用スタイル

======================================= */

@media screen and (max-width: 599px) {

 

 

/*------ フローティングメニュー ------*/

 

#footerFloatingMenu {

    display: block;

    width: 100%;

    position: fixed;

    left: 0px;

    bottom: 0px;

    text-align: center;

    margin: 0 auto;

    padding: 0 0 5px 0;

    background-color: #6495ed;

    color: #ffffff;

    font-size: 3em;

    color: #ffffff;

}

 

#footerFloatingMenu a {

    text-decoration: none !important; 

}

 

a.home,a.tel,a.mail,a.top{

    position: relative;

    padding: 5px 10px;

}

 

a.home:before {

    font-family: FontAwesome;

    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;

}

 

a.tel:before {

    font-family: FontAwesome;

    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;

}

 

a.mail:before {

    font-family: FontAwesome;

    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;

}

 

a.top:before {

    font-family: FontAwesome;

    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>


アイコンの種類を変えたい

アイコンは「FontAwssome」というサービスを利用しています。

このサイトの中から、表示したいアイコンを探すのですが、日本語で検索できる以下のサイトが便利です。

 

例えば、キーワード入力欄に「インスタグラム」と入力すると、関連したアイコンが表示されます。

各アイコンごとに決められた4桁の英数字をコピーしましょう。


a.home:before {

    font-family: FontAwesome;

    content: "\f015";/*-アイコンの種類-*/

    color: #ffffff;/*-アイコンの色-*/

}


例えば上記の「HOME」アイコンをインスタグラムのアイコンに変えたい場合は、「アイコンの種類」の部分に記載されている「\f015」を「\f16d」に書き換えればOKです。

アイコンの種類によっては、他のアイコンと大きさがそろわないような場合があります。

実際にスマホ画面で確認しながら、試してみてください。


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

ZEROTOP DESGIN WORKS内

TEL.070-4202-6925

JimdoCafe 太田公式LINE@でお友達登録していただければ、LINEを使って気軽に質問やお問い合わせメッセージを送れます。

登録は以下のボタンからどうぞ!

友だち追加