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>