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