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

だがしかし！

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

【完全解説】プロラインフリーとは？ 公式LINE運用ツールおすすめ！ 無料プランでも機能充実！

LINE公式アカウントを運用するなら必須のツール、【プロラインフリー】について完全解説！

proline.yanamaru.jp

2025.06.25

LINE公式アカウントの構築代行、はっじめっるよ〜！

LINE公式アカウント構築代行！回数券・予約連携・リッチメニューまで一括サポート！

proline.yanamaru.jp

2025.06.24

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

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

テキストのカスタマイズの仕方は2パターン！

【パターンA】タイマーの後ろのテキストだけ変えたいなら超簡単！
【パターンB】タイマーの後ろのテキストじゃない場所にも使える手法だから知っておくと便利！

① チケットを作る

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

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

①-3（パターンBなら）【その他】をクリック

【パターンA】で作るなら無くてOK。
②へGO！

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

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

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

②（パターンAなら）【JavaScript】で表示テキストをカスタマイズ

【パターンB】なら③へGO！

②-1【その他】をクリック

②-2【JavaScript】を選択して［作成する］

②-3【JavaScript】をクリックして編集

【挿入箇所】は【Body】を選択。
※【Head】にしちゃうと効かないから注意！

$('.timer-right').html('で、チケット配布終了！')

と入力して保存する。
※「で、チケット配布終了！」の部分をお好みで変える。

ここまでできたら⑥へGO！

③（パターンBなら）【臨時メッセージ】からチケットを送信

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

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

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

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

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

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

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

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

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

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

“成功”→【はい】

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

④ ブラウザでCSSの指定をチェック

④-1 チケットを表示

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

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

たとえば“で期限切れとなります”の文言はプロライン上では変更できない。（2025.1.26現在）
ここを変更したいと過程して、“で期限切れとなります”を隠して“で、キャンペーン終了！”と表示されるようにしてみるよ！

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

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

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

該当の箇所を確認。
※これを非表示にしたい。

<div class="timer-right">で期限切れとなります</div>

cssの指定箇所を見ると、class名 “timer-right” に対して指定が入ってることがわかる。

.page-wrapper .container #timer .timer-right,
.page-wrapper .container .timer .timer-right

※赤枠内の白い文字のところが今回「効いている」指定。
これの意味は、
class名「page-wrapper」の下にいる class名「container」の下にいる id名「timer」の下にいる class名「timer-right」と、
class名「page-wrapper」の下にいる class名「container」の下にいる class名「timer」の下にいる class名「timer-right」に対して指定するよ、ってこと。

この場合は “display:inline-block” しか指定されていないことがわかる。

⑤ チケットのCSSで設定

まずは①-5で作ったCSSに、「“で期限切れとなります”は表示しないよ」って指定を追加。
※“display:none;”で消しちゃうと表示したい文字も消えちゃうから“font-size: 0;”で隠す。

.page-wrapper .container #timer .timer-right,
.page-wrapper .container .timer .timer-right {
    font-size: 0;
}

さらに、代わりに表示させたい文字「“で、キャンペーン終了！”を表示させてね」って指定を追加。

.page-wrapper .container #timer .timer-right:before,
.page-wrapper .container .timer .timer-right:before {
    font-size: 16px;
    content: "で、キャンペーン終了！";
}

忘れずに【保存】！

⑥ ブラウザに戻って確認

ブラウザに戻って読み込み直せばテキストが変わってる！

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

【完全解説】プロラインフリーとは？ 公式LINE運用ツールおすすめ！ 無料プランでも機能充実！

LINE公式アカウントを運用するなら必須のツール、【プロラインフリー】について完全解説！

proline.yanamaru.jp

2025.06.25

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

LINE公式にない“カウントダウン付きクーポン”を、プロラインで色までカスタマイズ！

proline.yanamaru.jp

2025.06.24