★.wrap('<a href="tel:0188684129"></a>');
ここの電話番号にかける相手の番号をいれる！

★$(".tel"). がクラスclass名になる!


【Javascript】
$(function(){
	var device = navigator.userAgent;
	if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
	$(".tel").wrap('<a href="tel:0188684129"></a>');
	}
});


【CSS】
★電話番号が画像の時！
<p><img class="tel" src="<?php echo get_template_directory_uri(); ?>/img/telbtm.png" alt="03-6715-7113" /></p>

★電話番号がＰＣ版ではテキストの時
<p>03-6715-7113<img class="nonphon tel" src="<?php echo get_template_directory_uri(); ?>/img/telbtm.png" alt="03-6715-7113" /></p>


.nonphon{display:none;}
ＰＣ版では表示されないように消す

JavaScript　使わない単純な設定


<a href="tel:0123-456-7890">0123-456-7890</a>


<meta name="format-detection" content="telephone=no">
▲このページのTOPに戻る▲

tableを使って左右に分ける

画像2つ白地透過データ 


【 HTML 】
<div id="form">
	<table>
	<tr>
		<th><a href="tel:080-8113-1202"><img src="img/icon02.png" alt="image" />電話をかける</a></th>
		<td><a href="https://form.os7.biz/f/7877c3b2/" target="_blank"><img src="img/icon03.png" alt="image" />メールで予約する</a></td>
	</tr>
</table>
</div>


【 CSS 】
/*--------------------------------------------------------
footerボタン
--------------------------------------------------------*/
#form{
	position:fixed;
	bottom:0px;
	width:100%;
	height:45px;
}
#form a{
	display:block;
	text-decoration:none;
	padding-top:10px;
}
#form p{text-align:center;}
#form img{display:inline!important; width:8%;}
#form a:link{color:#FFFFFF;}
#form a:visited{color:#FFFFFF;}
#form a:hover{color:#FFFFFF;}
#form a:active{color:#FFFFFF;}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*タップして電話をかける*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#form table{
	width:100%;
	border-collapse:collapse;
	empty-cells:show;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}
#form table th{
	width:50%;
	vertical-align:top;
	background:linear-gradient(#ff3333,#cc0000);
	background:-moz-linear-gradient(top,#ff3333,#cc0000);
	background:-webkit-gradient(linear,left top,left bottom,from(#ff3333),to(#cc0000));
}
#form table td{
	vertical-align:top;
	background:linear-gradient(#339966,#006633);
	background:-moz-linear-gradient(top,#339966,#006633);
	background:-webkit-gradient(linear,left top,left bottom,from(#339966),to(#006633));
}
#form table th, #form table td{padding-left:30px; padding-bottom:50px;}
▲このページのTOPに戻る▲


/*--------------------------------------------------------
ページトップ
--------------------------------------------------------*/

#page-top{
	right: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	 z-index:5;
}

#page-top a{
	display: block;
	border: 0;
	border-top: 1px solid #fff;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
.page-top:not(\*|*){ position: static; }/* Opera9以下 */
▲このページのTOPに戻る▲