STORES 予約 をご利用中のお客さまの中で「予約する」ボタンを自由にカスタマイズしたい！という方もいらっしゃるのではないでしょうか。
実は、好きな画像でオリジナルの「予約する」ボタンを作成することができるんです！
今回は、好きな画像でオリジナルの「予約する」ボタンの作成方法をご紹介したいと思います。
STORES 予約 について
予約システム STORES 予約 をご利用いただいている場合は改めてになりますが、STORES 予約 は180以上の業種・業態に対応した予約システムです。
誰でも簡単に設定・運用ができ本格的な予約システムを導入することができること、また無料でも利用できるところが特徴です。
予約システムについは、無料で簡単に作れる予約システム 、無料あり！予約システム比較15選 の記事が参考になります。また、STORES 予約 についてはSTORES 予約のメリット・デメリット、予約システム「STORES 予約」で予約システムを運用するときにかかる料金・費用まとめ にまとめていますのでこちらもご覧ください。
STORES 予約 の「予約する」ボタンとは？
STORES 予約では、HPやブログなどへ簡単に「予約する」ボタンを設置することが可能です。予約するボタンを設置することで、予約への導線が増え予約数アップに繋がります。
標準の「予約をする」ボタンは以下の 4 種の中からお好きなものを選択し、ご自身の HP に HTML コードを記載することで埋め込むことが可能です。
基本的な設定方法
１）下記URLを管理画面にログインした状態でクリック
https://coubic.com/biz/features/booking_button
２）HTML コードをコピー
ページに記載の流れに沿って、デザインや対象となる予約ページを選択して、生成される HTML コードをコピーします。
3）ホームページやブログに貼り付ける
コピーした HTML コードを、予約ボタンを設置したいホームページやブログの編集画面に貼り付けます。
4）完成
「予約する」ボタンがきちんと表示されているか確認してください。
なお設置方法についは、【無料で簡単に！】予約ボタンをHPやブログ、Facebookページに設置する方法 の記事にも詳しくまとめていますのでこちらを参考にしてください。
オリジナルの「予約する」ボタンの設定方法
標準の「予約をする」ボタン以外の画像で、オリジナルの予約するボタンをご利用されたい場合は、ご自身で画像を用意することで対応が可能です。
今回は、Canva というツールを使って、無料でオリジナルの画像を作成してみたいと思います！
ラベルで今回作成してみました。
例えば、こんな感じの予約ボタンが作成できます。
色も形もフォントも自由に作成ができます。
さて、画像が準備できたところで、いよいよ設定の準備をしていきたいと思います。
画像をクラウドサーバーなどに保存し、URL を発行する
Google Driveや、Wix、Jimdoなどの HP 作成サービスなどに画像をアップロードしてください
以下HTMLのタグをボタンを設置したい場所に入力する
<a href=”リンク先のURL”><img src=”保存場所のURLを入力” alt=”画像の説明文” width=”160″ height=”40″></a>
↑こちらの HTML タグをボタンを設置したい場所に入力してください。
※ リンク先の URL ： クリックした後に表示させたい STORES 予約 の予約 ページの URL を入力
※ 保存場所の URL ： アップロードした画像の URL を入力
※ 画像の説明文 ： クービックから予約する、など画像の説明文を入力
※ width / height ： 表示させたい幅/高さのサイズを指定
アメブロやワードプレスへの設定方法
Ameba ブログ (アメブロ) に導入する場合
ブログ投稿画面で、ボタンのコードをそのまま貼り付けるだけです。
ただし、新エディタの場合は 「HTML表示」タブに切り替える必要があります。
モバイルアプリでブログを書く場合は、エディターの右下にある「タグ編集」を押してタグ編集モードに切り替えてから HTML コードを貼り付けてください。
WordPress (ワードプレス) に導入する場合
ブログのダッシュボードから新規投稿を選び、「テキスト」タブからタグ入力モードに切り替えて、ボタンのコードを貼り付けます。
Jimdo (ジンドゥー) に導入する場合
「HTML」ボタンで HTML 直接編集モードに切り替えて、ボタンのコードを貼り付けます。
WIX (ウィックス) に導入する場合
メニューから「+」(追加)ボタン > 「Apps」 > HTML > モードを「HTMLコード」に切り替えて、ボタンのコードを貼り付けます。
JUGEM に導入する場合
「ブログを書く」 > 「記事の投稿」 > 「記事の内容」より右側にございます「モード」を選択 > ボタンのHTMLコードを貼り付け > 「記事を投稿する」を選択。
まとめ
STORES 予約 の予約するボタンは、設置も簡単ですが、カスタマイズも簡単です！HPやブログのテイストにあった予約するボタンをカスタマイズしたいという方は、ぜひ、参考にしてみてくださいね。
予約システム「STORES 予約」についてはお電話でのお問合せも受け付けています！
TEL：03-6705-8497
