記事の詳細
スマホ画面で曜日ごとに表示されている内容を変える!【コピペだけで実装可能】
おはようございます!
今日は透き通る青空に気持ちのいい風で
洗濯物もよく乾きそうですね(*’▽’)気分も晴れやかです♪
以前にスマホの画面に固定位置に電話番号を常に表示する記事を書きましたが、
今回はその追記をしたいと思います。
お問い合わせ件数を増やす、という導線づくりを考えたものです。
写真は固定表示させる電話番号を埋め込んだ焼肉八起のHPです。(焼肉八起のHPはこちら)
お問合せ件数が増えた!というお客様の声も続々届いており、とても嬉しいです!
さらに件数アップのためにいろんな検証をし続けるのがインクループでもあります(*’▽’)
そこで!スマホ固定位置に電話番号を常に表示する応用編で、これあったらいいんじゃない?
と思いついたものを今回ご紹介いたします。
今回のブログの見出しはコチラです!
曜日ごとに変えられる固定表示
例えば、歯医者などのクリニックの場合、木曜が定休日の場合が多いですよね。
ですので、定休日のときに表示をちょっと変えるのです。
こうすれば定休日がすぐに認識でき、電話予約できないことがユーザーに伝わるので、
”定休日なのに電話が鳴り響く”ということがなくなります。
定休日と営業日ごとに分けて表示ができるから便利
営業日のときは通常表示させます。これならいつでも電話をかけれる状態になります。
曜日ごとに変えられるタグの実装はこちら!
コピペだけでOK!のそのまま使えるタグを紹介します。
木曜日が定休日に合わせて作成してあります。
曜日代え、文字変え、デザインなどのカスタマイズ変更も臨機応変に可能ですよ♪
曜日ごとに固定表示を変えるタグの位置はこちら
入れる場所はこちらの赤枠をご参考にしてください。(例はfooter.php)
XXX-XXXXの箇所にはお電話番号を入力してくださいね(*’▽’)
曜日ごとに固定表示を変えるタグの埋め込みはこちら
タグはこちらのタグをコピペするだけでOKです!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php //現在の曜日番号(日:0 月:1 火:2 水:3 木:4 金:5 土:6)を取得 $weekno = date('w'); if($weekno == 4) { //サンプルは木曜日が定休日の場合で作成 echo '<div class="footer_area"> <div class="footer_area_inner"> <p class="teikyuubi">木曜日は定休日です</p> </div> </div>'; } else{ echo '<div class="footer_area"> <div class="footer_area_inner"> <a class="inquiry_btn" href="tel:XXX-XXXX">電話をかける<br> ☎XXX-XXXX</a> </div> </div>'; } ?> |
曜日ごとに固定表示を変えるCSSの埋め込みはこちら
こちらのCSSをコピペするだけでOKです!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/*641px~PC PC上では見えないようにする*/ @media screen and (min-width:641px){ .footer_area{ display: none; } } /*スマホ~641pxの幅サイズまで*/ @media screen and (max-width:640px){ .footer_area { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba( 0, 0, 0, 0.6 ); z-index: 10000; } .footer_area .footer_area_inner { position: relative; width: 80%; margin: 0px auto; padding: 10px 0; margin-right: 0px; } .footer_area .footer_area_inner .footer_area_inner_btn { width: 85%; padding: 11px 0; font-size: 20px; font-weight: bold; margin-left: 15px; line-height: 1.3; } .inquiry_btn { background-color: #068BF1; -webkit-border-radius: 3px; display: inline-block; text-align: center; text-decoration: none; width: 80%; padding: 5px 0; font-size: 18px; font-weight: bold; } .inquiry_btn:link, .inquiry_btn:visited { color: #FFFFFF !important; } .footer_area_inner span{ color: #fff; } #siteBottom{ margin-bottom: 85px; } } |
以上です!おつかれさまでした!
今日は金曜日…みなさまよい週末を(*’▽’)
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。