· 

フロート画像をクリックすると電話がかけられる!

1、ナビゲーションの編集で「画像」のページを目隠しで作り、フロートさせたい画像をアップロード、わかりやすい名前を付けておく。

・プレビューで画像のWEBサイトを表示させ、「ページのソースを表示」

・先程わかりやすいつけた名前を探し、下記の赤い部分に入力する。

 

 

 

 

2、コンテンツの追加のウイジット/HTMLを開き、下記を入力します。

クリックしたときかけたい電話番号を入力します

 

<div id="floating-menu">

    <a href="tel:0123456789"><img src=

    "https://image.jimcdn.com/app/cms/image/transf/none/path/s48a1cb01ba7a2d29/image/i7de11f7a53ccd3dd/version/1506123609/%E3%83%95%E3%83%AD%E3%83%BC%E3%83%88%E5%8D%98%E8%89%B2.png" width="100%"

    height="90%" title="代替テキスト" alt="" /></a>

</div>

 

 

 

3、「基本設定」→「ヘッダー編集」に下記を入力します。

 

<style type="text/css">

/*<![CDATA[*/

div#floating-menu {

    position: fixed;

    top: 300px; "フロート画像の上からの位置"

    left: 1200px;   "フロート画像の左からの位置"

    right: 0px;

    background-color: #FFFFFF; "フロート画像の背景カラー"

       z-index: 9999;

}

/*]]>*/

</style>

 

 

<style type="text/css">

/*<![CDATA[*/

a:hover img

{

    filter:alpha(opacity=70);  /* IE7以下用 */

    -ms-filter: "alpha(opacity=70)"; /* IE8用 */

    -moz-opacity:0.7; /* Firefox 1.5未満, Netscape用 */

    -khtml-opacity: 0.7;  /* Safari 1.x, 他khtmlに対応したブラウザ用  */

    opacity: 0.7; /* Firefox 1.5以上, Opera, Safari用 */

    }

 

/*]]>*/

</style>