Calendly ブロックのオプションの1つを選びます。

Calendly は簡単かつ効率的なスケジュール機能として人気のツールです。サイトの訪問者がカレンダーの特定の時間帯にオンラインまたはオフラインミーティングをサイトから直接予約できるようにする場合に便利です。個人用のカレンダーと連携するため、予定を見逃したり、予定が重複したりすることを防げます。

Calendly には無料版と有料版があり、必要な機能に応じてどちらかをサイトで利用できます。

この機能は、WordPress.com Explorer、Creator、Entrepreneur の各プランおよび従来の Pro プラン をご利用のサイトで使用できます。無料プランと Starter プランのサイトでこの機能を利用するには、プランをアップグレードしてください。

このガイド内

1. はじめに
2. Calendly ブロックを追加する
3. Calendly リンクを埋め込む
4. Calendly ブロックをカスタマイズする
   1. Calendly 埋めこみの種類を変更する
   2. ページ上の Calendly ブロックの位置を調整する
   3. Calendly 埋め込みの外観を変更する

はじめに

Calendly ブロックを利用するには、Calendly アカウントが必要です。まだお持ちでない場合は、こちらから登録できます。

Calendly ブロックを追加する

Calendly ブロックは WordPress.com サイト上の任意のページ、投稿に追加できます。「+」のブロック挿入アイコンをクリックして Calendly を検索します。

または、新しい行に「/calendly」と入力して Enter キーを押します。

Calendly リンクを埋め込む

ブロックを追加すると、Calendly リンクのボックスが表示されます。次の方法でリンクを取得します。

1. Calendly アカウントにログインします。
2. 右上の青いボタンをクリックしてマイアカウントに移動します。
3. 表示されたイベントページで、サイトに埋め込むイベントの左下にある「リンクをコピー」ボタンをクリックします。

4. 上で示されているとおり、サイトに戻り、Calendly ブロックにそのリンクを貼り付けて追加します。

Calendly ブロックをカスタマイズする

Calendly ブロックの各要素は次の2か所からカスタマイズできます。

• Calendly アカウント
• 自分のサイト

重要な注意点として、カスタマイズする要素に応じて、Calendly アカウントまたはサイトのブロック設定のいずれかに変更を加える必要があります。

Calendly 埋めこみの種類を変更する

Calendly は投稿とページにカレンダー、ボタン、ポップアップとして表示できます。

1. インラインカレンダーまたはボタンとして表示

• Calendly アカウントに移動します。
• 青い「リンクをコピー」ボタンをクリックします。
• ページまたはブロク投稿に移動します。
• 先ほど説明した方法で Calendly ブロックを挿入します。
• ブロックにリンクを貼り付けます。
• 「埋め込む」をクリックします。

2つのモード (インラインカレンダーとボタン) は、一番上のブロックコンテキストメニューにある「スタイル」オプションで切り替えられます。

または、右側のパネルで切り替えられます。

2. 浮動ボタンとして表示

本ガイドのこのセクションは WordPress.com Creator、Entrepreneur の各プランおよび従来の Pro プランを利用しているサイトを対象としています。無料プラン、Starter、Explorer プランのサイトでこの機能を利用するには、プランをアップグレードしてください。

1. Calendly アカウントに移動します。
2. 青い「共有」ボタンをクリックします。
3. 「サイトに追加」タブをクリックします。
4. ウィジェットのポップアップを選択して「続行」をクリックします。
5. 「コードをコピー」ボタンをクリックします。
6. 「外観」→「ウィジェット」の順に移動し、任意のウィジェットエリアを選択します。
7. カスタムの「HTML ブロック」を挿入します。
8. ブロックにコードを貼り付け、右上の「更新」をクリックします。

これによりすべてのページに浮動ボタンが表示されます。特定のページにのみ浮動ボタンを表示する場合は、以下の方法でページまたはブログ投稿の下部に追加します。

1. ブログ投稿またはページの右上にある3つのドットをクリックします。
2. 「コードエディター」を選択します。
3. 投稿エリアの一番下までスクロールします。
4. Calendly から取得したスニペットをブログ投稿またはページの終わり、既存のコードの最後の行の後に追加します。
5. 3つのドットに戻り、再度「ビジュアルエディター」を選択します。
6. ページを公開または更新します。

浮動ボタンは画面の左下に表示され、画面をスクロールすると一緒に移動します。

ページ上の Calendly ブロックの位置を調整する

Calendly ブロックをブログ投稿またはページの上下に移動するには、 ブロックの一番上のコンテキストメニューにある矢印を使用します。

Calendly ブロックの位置揃えには、Calendly ブロックをインラインで追加している (ページに埋め込んでいる) 場合は、カレンダーでもボタンでも、ページまたは追加したコンテナに沿って揃えることができます。

注意: 浮動ウィジェットの位置は、設定では変更できません。

Calendly 埋め込みの外観を変更する

インライン、ボタン、ポップアップで表示されている Calendly 埋め込みの外観 (スタイル、色、形、サイズ) を変更するには

1. Calendly アカウントに移動し、編集するカレンダーを選択します。
2. 「共有」をクリックして、「サイトに追加」→「インライン埋め込み」→「続行」の順に選択します。
3. 左側で、背景色、文字色、ボタンとリンクの色を編集できます。
4. コードを再度コピーして先ほど説明した方法で埋め込みます。

また、Calendly ボタンの色は右側のサイドパネルで変更できます。これらを使って以下のことができます。

• スタイル: ボタンを塗りつぶしまたは枠線のどちらで表示するかを選択します。

• 色: ボタンの背景および文字に使う色を選択します。
• ブロックの一番上にあるコンテキストメニューを使って、さらにフォント (太字、斜字) をカスタマイズできます。
• 以下のように、2色を混ぜた色のボタンにするには、「グラデーション」オプションを使用します。

• 形: 角丸半径コントロールを使って、ボタンの形を変更できます。

• サイズ: ボタンのサイズを変更するには、ボタン幅の設定からいずれかのオプションを選択します。