Coubic クービック編集部

クービックで「予約する」ボタンを自由にカスタマイズしたい！設定方法をご紹介

クービックをご利用中のお客様の中で「予約する」ボタンを自由にカスタマイズしたい！という方もいらっしゃるのではないでしょうか。
実は、好きな画像でオリジナルの「予約する」ボタンを作成することができるんです！

今回は、好きな画像でオリジナルの「予約する」ボタンの作成方法をご紹介したいと思います。

クービックの「予約する」ボタンとは？

標準の「予約をする」ボタンは以下の 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コードを貼り付け > 「記事を投稿する」を選択。

予約するボタンをカスタマイズしたい！という場合は、ぜひ、参考にしてみてくださいね。

この記事の後によく読まれています！