Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. CMS にユーザー入力要素を接続
    5. CMS：アップロードボタンを追加・設定する

CMS：アップロードボタンを追加・設定する

読了時間：7分
サイト訪問者が CMS のコレクションに直接ファイルを送信できるアップロードボタンを作成しましょう。ドキュメント、画像、動画、音声など、受け付けるファイルの種類を選択します。アップロードされたファイルはコレクションに安全に格納され、管理できるようになります。
始める前に：
訪問者から情報を収集するのに最適な方法であるカスタムフォームについて慣れておくことをおすすめします。
アップロードボタンと送信ボタンを含むカスタムフォームのスクリーンショット。

ステップ 1 | アップロードボタンを追加・接続する

まず、「アップロード」ボタンとして使用するボタンを追加します。これは、訪問者がアップロードするファイルを選択するためにクリックするボタンです。

また、アップロードされたファイルを保存するコレクションに接続するデータセットにボタンを接続する必要があります。選択したコレクションに適切な権限があることを確認してください。誰でもコンテンツを追加できるように、権限・プライバシー設定で「フォームの送信」を選択することをおすすめします。
新しいデータセット
Wix Studio では、データセットを右側の要素設定パネルに移動させ、より使いやすくしました。Wix Studio の新しいデータセットについてはこちら

アップロードボタンを追加・接続する方法：

  1. 追加パネルに移動します：
    • Wix エディタ：エディタ左側で「パーツを追加」 をクリックします。
    • Editor X：Editor X の上部で「要素を追加」 をクリックします。
  2. 「入力欄」をクリックし、「アップロードボタン」をクリックします。
  3. ボタンを選択し、サイトにドラッグします。
  4. ページ上でボタンをクリックします。
  5. 「CMS に接続」アイコン （Editor X の場合  ）をクリックします。
  6. 「データセットを作成」をクリックします。
  7. 「コレクションを選択」ドロップダウンをクリックし、訪問者がファイルをアップロードするコレクションを選択します。
    ヒント：「コレクションを選択」ドロップダウンをクリックし、「コレクションを作成」を選択して、訪問者がファイルをアップロードする新しいコレクションを作成します。
  8. （オプション）「データセット名」にデータセットの名前を入力します。
  9. 「次へ」をクリックします。
  10. 「ファイルの接続先」ドロップダウンをクリックし、アップロードボタンを接続するフィールドを選択します。
    ヒント：アップロードボタンをコレクションの新しいフィールドに接続する場合は、「新しいフィールドを追加」をクリックします。次に、「フィールド名」を入力し、「フィールドタイプ」を選択して、「追加」をクリックします。
「アップロードボタンを接続」パネルが表示されたアップロードボタンのスクリーンショット。

ステップ 2 | アップロードボタンを設定・デザインする

次に、訪問者にアップロードしてもらいたいファイルの種類と、ボタン設定のその他のオプションを選択します。ボタンのレイアウトやデザインを好きなようにカスタマイズすることができます。

アップロードボタンを設定・デザインする方法：

  1. ページ上でアップロードボタンをクリックします。
  2. 「設定」アイコン  をクリックし、次のオプションから選択します：
    • アップロード設定：訪問者がアップロードできるファイルの種類を選択し、アップロードできるファイルの最大数を設定し、項目を必須項目に設定します（オプション）。
    • 表示オプション：以下のオプションをカスタマイズします：
      • 項目タイトル：（推奨）ボタンテキストの上に表示されるタイトルを入力します。
      • ボタンのテキスト：ボタンに表示されるテキストを編集します。
      • ボタンの下のテキスト：ボタンの下に表示する内容を選択します：
        • ファイル情報のみ表示：訪問者がアップロードしたファイルの名前を表示します。
        • カスタムテキストのみを表示：ファイルサイズなど、ボタンの下に表示するカスタムテキストを入力します。ファイルがアップロードされると、このテキストはファイル名に変わります。
    • 訪問者のファイルの管理：「アップロード済ファイル表示」をクリックして、メディアマネージャーの「訪問者のアップロード」フォルダに移動します。
アップロードボタン設定のスクリーンショット。
  1. 「レイアウト」アイコン  をクリックして、テキストとアイコンの位置、テキスト配置、または項目と項目タイトルの間隔を変更します。
  2. 「デザイン」アイコン  をクリックし、プリセットボタンを選択します。「デザインをカスタマイズ」をクリックして、ボタンのデザインをさらにカスタマイズします。
「ボタンデザイン」パネルが表示されたアップロードボタンのスクリーンショット。

ステップ 3 | 送信ボタンを追加・設定する

訪問者がファイルの送信を完了するためにクリックする「送信」ボタンが必要になります。別のボタンを追加して送信ボタンにします。次に、送信ボタンをアップロードボタンと同じデータセットに接続して設定します。

送信ボタンを追加・設定する方法：

  1. 追加パネルに移動します：
    • Wix エディタ：エディタ左側で「パーツを追加」 をクリックします。
    • Editor X：Editor X の上部で「要素を追加」 をクリックします。
  2. 「ボタン」をクリックします。
  3. ボタンを選択し、ページ上にドラッグします。
  4. 「テキスト・アイコンの変更」をクリックし、「テキスト」欄に「送信」と入力します。
    ヒント：送信ボタンにテキストを表示したくない場合を除き、「表示する内容を選択」ドロップダウンは「テキストのみ」または「テキストとアイコン」に設定されていることを確認してください。
送信ボタン設定のスクリーンショット。
  1. 「CMS に接続」アイコン （Editor X の場合  ）をクリックします。
  2. 「データセットを接続」ドロップダウンが、ステップ 1 で接続したデータセットに設定されていることを確認します。
  3. 「クリック時の動作を選択」ドロップダウンをクリックして「送信」を選択します。
  4. （オプション）訪問者が書類のアップロードを完了したときに表示される完了メッセージを追加します：
    1. 「＋完了メッセージを追加」をクリックします。
    2. エディタで完了メッセージを選択し、メッセージを編集します。
    3. 完了メッセージをクリックし、表示したい場所にドラッグします。
  5. （オプション）文書のアップロードに失敗した場合に表示されるメッセージを追加します：
    1. 送信ボタンを選択し、「CMS に接続」アイコン （Editor X の場合  ）をクリックします。
    2. 「＋失敗メッセージを追加」をクリックします。
    3. エディタで失敗メッセージを選択し、メッセージを編集します。
    4. 失敗メッセージをクリックし、表示したい場所にドラッグします。成功メッセージは同時に表示されないため、成功メッセージと重ねて配置することもできます。
  6. 「完了時の移動先」ドロップダウンをクリックして、オプションを選択します：
    • キャンセル：訪問者はフォームを送信した後もページにとどまります。
    • リンク：訪問者は、フォームを送信した後に別のページにリダイレクトされます。「リンクを選択」下で「選択」をクリックし、リンクを設定します。
訪問者にファイルのダウンロードを許可したい場合：
ボタンなどの入力要素を追加して、訪問者がコレクション内のファイルをダウンロードできるように設定することができます。その場合、「CMS に接続」アイコン  （Editor X の場合は  ）を利用して、ファイルが保存されているコレクション内のフィールドにボタンを接続します。設定が完了すると、訪問者がボタンをクリックすると即座にファイルがダウンロードされます。

お役に立ちましたか？

|

この記事では下記を説明します：

  • ステップ 1 | アップロードボタンを追加・接続する
  • ステップ 2 | アップロードボタンを設定・デザインする
  • ステップ 3 | 送信ボタンを追加・設定する