Tap Call Image

Jimdoでは、画像にリンクは張れますが（JIMDOはヨーロッパの企業ということで、おそらく、コンプライアンスの問題などがあるのだと思いますが）今のところ電話番号を設定することができません。

それではJimdoでは出来ないのか？というと、Jimdoでも可能です。
ただ、コピーだけで実現しようと思っても・・・無理。
なので、出来るだけわかりやすく解説しました。

まず画像にTAPCALLを付けたい箇所に普通のリンクを張ります。

上の文字をクリックするとトップページに移動します。
で、こいつを、HTMLの編集で、以下のように書き換えます。

[tel] + [:] +[電話番号]として書き換えたものが下です。
クリックしないでねｗｗ。

これがコンプライアンスの問題ですね。
以下をスマホでタップすると、電話が掛けられてしまいます。（たぶん、私が出ます）
もし、ここにかわいい女の子の画像か何か張って合って、私とコンタクトしたければ、ここをクリックしてね？
それなら、まだいいかぁ・・・、あたかも動画が再生されるかのような画像が張り付けられていたら・・・。

あたかもリンクや、他のコンテンツが再生されるかのように見せかけて電話番号を取得しようとする人がいると言うことです。明らかに電話番号とわかる画像であれば問題はないのですけどねぇ。

03-5728-9888

<a href="tel:03XXXXXXXX" title="Top">03-5728-9888</a>
ここにさらに、classを追加します。
どんな名前でもいいのですが、tapcallにしておきます。

<a href="tel:03XXXXXXXX" class="tapcall" title="Top">03-5728-9888</a>

そして、毎度のことながら、管理メニュー＞基本設定＞ヘッダー編集をひらいて、とりあえず、以下のスタイルシートを書き込みます。（下準備です。）

.tapcall{

display:block;
width:200px;
height:50px;
border:1px solid #000;
}

これを書いて以下のような形になったら、第一段階クリア！！

03-5728-9888

ここに背景画像をあててあげれば良いのですが、この場合事前に画像のサイズを200px × 50pxのものを用意します。

今回は、こんな画像を用意してみました。
これを、管理メニュー＞デザイン＞独自レイアウトの＞ファイルにアップロードします。
画像がアップロードされたのを確認したら、リンクを右クリックして、画像を表示させ、さらに画像を右クリックしてURLをコピーします。コピーしたURLを先ほど、書いたスタイルシートに、以下のように追加します。

.tapcall{

display:block;
width:200px;
height:50px;
border:1px solid #000;
background:url(https://u.jimcdn.com/←コピーした画像のリンク→/img/telno.png?t=1637303861);
}

以下のように、画像つきのTAPCALLが出来上がりました。
あと一歩です！
最後の仕上げに文字を消します。

03-5728-9888

上記で書いたスタイルシートに、
font-size:0;を追加してみてください。完成したのが、以下のような形になります。

03-5728-9888

これを実現する方法は、他にもあるのですが、わかりやすい方法にしました。
Jimdoで普通に画像をアップしてJavascriptで、hrefを書き換えるという方法もありますが、JIMDOで、scriptを書くことは、JIMDO研究所は推薦しておりませんので、この方法の解説にとどめさせていただきました。

成功を祈ります。　Good Luck!