LINE公式アカウントでも「クーポン」機能はある。「有効期限」の設定もできる。

だがしかし！

「ちゃんとクーポンを使ってもらえるようにカウントダウンタイマーの表示をしたい！(´・∀・`)」というそこのあなた！
プロラインなら無料でカウントダウンタイマー付きのクーポンが作れる！ヽ(･∀･)ノ
しかもお好みでカスタマイズもできるよ！

せっかくクーポンを配ってもあまり使ってもらえない(´･ω･`)
・・・ってことない？

「いつでも使える」「有効期限まで時間があるから後で使おう」って思ってると有効期限切れになってるのはあるある。

まずはちゃんと使ってもらえるようにカウントダウンタイマーの表示をしよう！(ﾉ･∀･)ﾉ
ついでに色のカスタマイズもしていくよ！

PCでLINEを使えないと不便だから、もしまだインストールしていない人は入れておくことを推奨。
※『LINEみんなの使い方ガイド』からインストール。

タイマー付きチケットをカスタマイズしよう！【背景色編】

① チケットを作る
② チケットの表示を確認するため【臨時メッセージ】からチケットを送信
- ②-1 【新規メッセージ】を作成
- ②-2 【新規メッセージ】を送信
③ ブラウザでチェック
- ③-1 チケットを表示
- ③-2 デベロッパーツールを表示させる
④ 背景色をCSSで設定
⑤ ブラウザに戻って確認

① チケットを作る

①-1 【新規作成】をクリックして追加

①-2 【カウントダウンタイマー】をクリックして追加

①-3 【その他】をクリックして追加

①-4 【CSS】を選択して［作成する］

①-5 【CSS】をクリックして編集

【挿入箇所】は、お好みで。【Head】でも【Body】でもOK。
いったん保存。

② チケットの表示を確認するため【臨時メッセージ】からチケットを送信

チケット作成画面の【プレビュー】はあくまでもプレビューでしかないから、配信して受け取ったチケットでちゃんとタグを確認するのが目的。

②-1 【新規メッセージ】を作成

まずは【新規メッセージ】をクリック。

【メッセージ01】をクリックして選択。

❶【タイプを選択】で［チケット[画像付]］を選択。
❷【タイマー付きチケット一覧】で①-1で作ったチケットを選択。
※今回のサンプルは名前を決めていなかったので“チケット名を決めてください”のままになってるけど、実際は「いま自分がカスタマイズしようとしているチケット」を選択。
❸の2項目は、カスタマイズ用の送信なのでどちらのチェックも外して大丈夫。

【保存してこのメッセージの送信対象を選択】をクリック。
※【保存してテスト送信】だと、タイマーとかアクセス制限をかけている場合に微妙なタグの違いが発生することがあるので注意！
※テスト送信でも通常送信（【保存してこのメッセージの送信対象を選択】）でも、LINE公式アカウントでは通数としてカウントされるから通数の節約という意味ではどっちで送信しても変わらない。

②-2 【新規メッセージ】を送信

【友だち管理】が表示される。
※登録されているお友だち全員にが入った状態。

❶テスト送信したい人だけに。
※［ｱｶｳﾝﾄ名］のチェックを外す/付けるで、全員選択/非選択ができる。
❷【臨時メッセージを選択】には、②-1で作った【臨時メッセージ】が選択されていることを確認。
※ここでは“メッセージ01”が選択済み。
❸【送信までの待ち時間】を［0］分にすれば即移動される。
❹［メッセージを送信］をクリック。

“臨時メッセージを送信しますか？”→【はい】

“成功”→【はい】

【送信履歴一覧】ページが表示される。
※［工事中］だったのが［送信済み］になっているはず。

③ ブラウザでチェック

③-1 チケットを表示

LINEで届いたチケットをクリックしてチケットを表示。

③-2 デベロッパーツールを表示させる

チケットの色は5色から選べるけど、カウントダウンタイマーの背景色は選べない。（2025.1.26現在）
ここを変更したいと過程して、カウントダウンタイマーの背景色を赤にしてみるよ！

カウントダウンタイマーのあたりを選択して右クリック。

Google Chrome なら［F12］とか、変えたい文字＝“で期限切れとなります”を選択して右クリック［検証］を選択すればデベロッパーツールが表示される。
※このやり方だと選択した箇所がズバリでデベロッパーツール上に表示されるので初心者さんにも安心！

MacでSafariを使っているなら［開発］>［Webインスペクタを表示］。
※表示されなかったらこちらのサイトが参考になるよ(･∀･)b
Mac Safariで開発者ツール（デベロッパーツール）の表示方法

その他のブラウザを使っている場合は「<ブラウザ名>　デベロッパーツール」で検索。

該当の箇所を確認。
※文字を囲っている部分（テキストのひとつ上のdiv）で背景色を指定してある。

<div id="timer" class="timer">
    <div class="timer-left">残りあと</div>
    <div class="timer-center" id="timer-center">8日23時間54分48秒89</div>
    <div class="timer-right">で期限切れとなります</div>
</div>

※この黄緑色の部分を赤にしたい。
cssの指定箇所を見ると、id名とclass名 “timer” に対して指定が入ってることがわかる。

body.preview-page .page-wrapper .container #timer,
body.preview-page .page-wrapper .container .timer

※これの意味は、
class名「preview-page」の「body」タグの下にいる class名「page-wrapper」の下にいる class名「container」の下にいる id名「timer」と、
class名「preview-page」の「body」タグの下にいる class名「page-wrapper」の下にいる class名「container」の下にいる class名「timer」に対して指定するよ、ってこと。

ここで “background:#06C755;” が指定されていることがわかる。

④ 背景色をCSSで設定

CSSに、背景色の指定を追加。
※“background:”の指定より“background-color:”の指定のほうが優先されるから、この場合は“background-color:”を指定すればOK。

body.preview-page .page-wrapper .container #timer,
body.preview-page .page-wrapper .container .timer {
    background-color: #cc0000;
}

忘れずに【保存】！

⑤ ブラウザに戻って確認

ブラウザに戻って読み込み直せばカウントダウンタイマーの背景色が変わってる！

おつかれさまでしたヽ(´∀`)ノ

ここから友だち登録して
このページからプロラインフリーに登録すれば、
私が無料で導入サポートヽ(･∀･)ﾉ
どちらか選んで友だち登録する

暑苦しく応援してほしい！

必要なことだけをビジネスライクに！

プロラインフリーに登録して使ってみる

【完全マニュアル】プロラインのタイマー付きチケットをカスタマイズしたい！（背景色編）