システムの更新情報をみる

ご利用中のSquare サービスに影響を及ぼす可能性のある問題が発生しています。詳細については、弊社のステータスページに随時更新いたします。

ホーム>サイトデザインおよびコンテンツ

Square オンラインビジネスで埋め込みコードを使い外部コンテンツおよびウィジェットを追加する

注: 弊社のヘルプセンターでは、第三者の HTML/CSS 埋め込みコードの使用から発生する問題について、詳細なトラブルシューティングを提供することはできません。コード自体のサポートについては、コードの専門家にご相談ください。

Square オンラインビジネスのサイトの編集 の[埋め込みコード] のセクションでは、さまざまな追加機能を使ってウェブサイトを改善することができます。カスタムの連絡先フォームを作成できるほか、イベントの登録や予約サービスを追加したりGoogleカレンダーを表示することもできます。

本記事では、ウェブサイトで表示されるコード(イベントカレンダーまたは予約ウィジェットなど)とは対照的に、表示を目的とせず、ウェブサイトのヘッダーに挿入する必要があるコード(GoogleアナリティクスまたはFacebookピクセルなど)の埋め込み方法を説明します。ヘッダーコードの使用方法の詳細については、ウェブサイトのヘッダーにコードを追加をご覧ください。

埋め込みコードを追加する

sos-embed-code-section-jp

ウェブサイトに埋め込みコードを追加するには、以下の一般的なガイドラインに従ってください。

  1. 外部サイトから、埋め込み可能なコードを取得のうえ、クリップボードまたはプレーンテキストファイルにコピーします。

  2. Square オンラインビジネスのサイトの編集のウェブサイトの任意のページに埋め込みコードのセクションを追加します。詳細についてはSquare オンラインビジネスにセクションを追加するをご覧ください。

  3. 外部サイトのコードを[埋め込みコード]セクションに貼り付け、外観を好みに合わせてカスタマイズします。

  4. ウェブサイトを [公開] して変更をライブにします。

sos-embed-code-section-added-new-JP

埋め込みコードセクションをカスタマイズする

Square オンラインビジネスのサイトの編集 メニューの設定を使って、他社のコードを追加したり、セクションの外観をカスタマイズしたりすることができます。

[コンテンツ]では以下のオプションが利用可能です。

  • タイトル - タイトルテキストのフォント、サイズ、色を変更することができます。また、切り替えスイッチでタイトルをオフにして、セクションに表示させないようにすることもできます。

  • 概要 - タイトルの下に表示される概要欄のフォント、サイズ、色を変更します。必要のない場合はオフに切り替えることができます。

  • 埋め込みコード - ここに他社のコードを貼り付けて、ページのセクションに追加します。

[カスタマイズ]では以下のオプションが利用可能です。

  • レイアウト - 埋め込みコードのレイアウトは、埋め込みに必要とするスペースに応じて、いくつかの種類が用意されています。

  • セクションのスタイル - セクションの配置を変更したり、背景色や画像を設定できます。

埋め込みコードの使用例

ep-embed-code-iframe

ここでは、[埋め込みコード]セクションを使用して、ページに Googleカレンダーの追加を表示する例を示します。Googleでは、カレンダーを直接リンクで表示するために、iframeと呼ばれる埋め込み可能なコードを自動的に生成します。これは、外部のコードをウェブサイトに埋め込む際に使用する一般的な方法ですが、他のほとんどの方法も大体同じように機能します。 必要な作業は外部のサイトからコードをコピーして、[埋め込みコード] に貼り付けるだけです。

インスピレーションを求めている方のために、[埋め込みコード]セクションの使い方をお教えします。

  • 顧客に事前に予約をしてもらう必要がある場合は、次のプロバイダー OpenTableから予約ウィジェットを追加することで、さらに多くの選択肢が増えます。

  • 埋め込み型の Googleマップを使って、お客さまにあなたのビジネスへのアクセス方法をお知らせします。

このように、強力で柔軟な機能を持つツールの利用方法は多岐にわたります。多くのウェブサービスが、ツールをコードで埋め込む方法を提供していますので、どのようなニーズにも対応できます。インターネットで「ニュースレター登録フォームの埋め込み」、「オーディオプレーヤーの埋め込みコード」などを検索してみてください。

重要:無効なコードや不完全なコードを貼り付けると、ウェブサイトに問題が発生するおそれがあります。レンダリングされたコードが表示されない場合や、何か問題が見受けられる場合は、埋め込みコードフィールドに完全なコードがすべて含まれていることを再度ご確認ください。ウェブサイトを公開して、追加したコードが想定どおりに機能するかどうかも併せてご確認ください。たとえば、コード全体を貼り付けなかったり、誤って余分な文字を挿入したりすると、予期しない結果が発生する可能性があります。それでも原因がわからない場合は、ページから埋め込みコードセクションを削除して、もう一度公開してみてください。セクションを削除すると問題が解決する場合は、コードプロバイダーにお問い合わせの上、セクションの正しい使用方法をご確認ください。

お探しの答えが見当たりませんか?