google-siteで電話番号のリンクを入れる

 簡単なコードですが、自動変換してくれないから、案外書けないから困る。

 <div>TEL: <a href="tel:電話番号"> ＜－ クリックしたら電話につながるテキスト

</a></div>  

TEL: 03-1234-5678

<div>TEL: <a href="0312345678"> ０３－１２３４－５６７８

アメブロのHTML編集でも入りましたね。

Pick Item

家庭用の紅茶マシーン心ととのう。体よろこぶ抹茶で楽しむ暮らし

  テキストをデザインするのに必要なcss

　text-align:center;　 テキストをセンターに配置する。

　font-weight: bold;　テキスト文字を太くする

　color:red;　 テキストの色を変える。divとa要素両方

　letter-spacing:.2px;　 文字間の調整

　font-size:1em;　 フォントの大きさ

　text-decoration:none;　 a要素の下線を消す。

 div:hover { background-color:#ee9999;} マウスがのったら背景色をee9999に変化させる

記入例です。

 

 <div>ご予約・お問い合わせは<br>

        TEL : <a href="tel:電話番号">電話番号</a></div>

        </div>

 <style>

        div{

        text-align:center;

        font-weight: bold;

        height:3em;

         transition: background-color 0.3s;

        cursor: pointer;

        color:red;

        letter-spacing:.2px;

        font-size:1em;

        border-radius: 20px 30px ;

        }

          div:hover {

                    background-color:#ee9999;

                }

        a{

        font-weight:bold;

        text-decoration:none;

        color:red;

        }

        </style>

・・・・・・・・・・・・・・・・

ご予約・お問い合わせは
        TEL : 電話番号 

・・・・・・・・・・・・・・・・

アメブロに反映されたのはこんな形でした。

a

cssが効いていませんね・・　

でも・google-siteでは、きっちり効いているので、

ここでは、深堀しません。

座るだけでコアを鍛える

 

ーーーーーーーーーーーーーーーー

ちょっとわかりずらいかもしれませんが、

googleサイトでよく使う埋め込みコード

https://sites.google.com/view/merao-textboook01?usp=sharing

こちらをノート代わりにして使ええるcodeをメモしています。

以上、googleサイトに電話番号を入れる説明でした。

-------------------------------------

この記事が「よかった」又「ためになった」

と思って頂けたら是非「いいね！」して行って下さい。

https://sites.google.com/view/merao-design/home

MeraoDesingでは、google-siteを使ったwebサイト、webコンテンツ

の制作をしています。ご興味があれば覗いてくださいね。

google-siteで作った機能が充実したサイトとは｜谷口　かおる｜coconalaブログ

どんなサイト？お家でサロンのサンプルで解説します｜谷口　かおる｜coconalaブログ

From by Merao