ヒーローセクション

ヒーローセクション

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

概要

ヒーローセクションは、イベントのWebサイトのランディングページ上部に表示される領域です。このガイドでは、イベントの訪問者に強い第一印象を与えるために、ヒーローセクションをカスタマイズする方法を説明します。


Info
複数のスライドを含むスライダーは、サブスクリプションのプランに応じて利用できる有料機能です。

スライドの管理

スライドの追加
  1. ドックから［デザイン］→［Webサイトのデザイン］に移動します。
  2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
  3. ヒーローセクションにカーソルを合わせ、関連付けられている［設定］アイコンをクリックします。［スライダー設定］パネルが表示されます。
  4. ［スライドを追加する］をクリックします。
  5. スライドが正常に追加されます。必要に応じてカスタマイズします。
  6. イベントが下書きの場合は、［公開する］をクリックしてイベントを公開してください。すでに公開中の場合は、［再公開する］をクリックします。

スライドの並べ替え
  1. ドックから［デザイン］→［Webサイトのデザイン］に移動します。
  2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
  3. ヒーローセクションにカーソルを合わせ、関連付けられている［設定］アイコンをクリックします。［スライダー設定］パネルが表示されます。
  4. スライドの左側にある［並べ替え］アイコンをクリックします。
  5. 目的の位置までドラッグして配置します。
  6. イベントが下書きの場合は、［公開する］をクリックしてイベントを公開してください。すでに公開中の場合は、［再公開する］をクリックします。

スライドの編集
  1. ドックから［デザイン］→［Webサイトのデザイン］に移動します。
  2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
  3. ヒーローセクションにカーソルを合わせ、関連付けられている［設定］アイコンをクリックします。［スライダー設定］パネルが表示されます。
  4. スライドに関連付けられている［編集する］アイコンをクリックします。［スライド設定］パネルが表示されます。
  5. 必要に応じてスライダーをカスタマイズします。

    セクションの背景
    1. ［セクションの背景］をクリックします。
    2. ［色］、［画像］、または［動画］を選択してください。
    3. モバイルページを編集するには、［モバイル］タブに移動します。モバイルの背景を個別に編集するには、モバイル操作画面用のWebサイトの背景設定を無効にする必要があります。


    4. ［色］、［画像］、［動画］の中から選択してください。
      1. ［色］の選択肢。
        1. ［背景色］を選択し、［背景の透明度］を調整します。色には、［単色］または［グラデーション］を指定できます。
      2. ［画像］の選択肢。
        1. ［画像］の［透明度］を調整し、［画像のオーバーレイ］を切り替えます。
        2. ［画像の調整設定］で［カバー］、［全体画像］、または［タイル］を選択してください。
        3. ［画像の位置］ツールを使用して、画像の配置を設定します。
        4. ［画像のオーバーレイ］が有効な場合は、［オーバーレイの色］と［オーバーレイの不透明度］を選択します。
        5. 画像を変更するには、［変更する］をクリックしてライブラリーから選択するか、新しい画像をアップロードします。
        6. 必要に応じて、画像のクリッピング、切り取り、反転、回転を行います。
        7. 画像を削除するには、［削除］をクリックします。
      3. ［動画］の選択肢。
        1. YouTube動画のサムネイルを入力します。
        2. ［動画のオーバーレイ］が有効な場合は、［オーバーレイの色］と［オーバーレイの不透明度］を選択します。
        3. 必要に応じて、［ループ動画］を有効にします。
    5. 初期設定に戻す場合は、［初期設定に戻す］をクリックします。
    6. イベントが下書きの場合は［公開する］を、公開中または開催中の場合は［再公開する］をクリックします。

    スライドのセクション
    1. ［セクションのレイアウト］。［メディア（左）］、［メディア（右）］、［メディア（上）］、または［メディア（下）］から選択してください。
    2. ［横方向の配置］。左、右、または両端揃えを選択してください。
    3. ［縦方向の配置］。必要に応じて調整します。
    4. ［メディアのサイズ］。［極小］、［小］、［中］、［大］、または［特大］から選択してください。

    要素/Removingの追加
    1. ドックから［デザイン］→［Webサイトのデザイン］に移動します。
    2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
    3. ヒーローセクションにカーソルを合わせ、関連付けられている［設定］アイコンをクリックします。［スライダー設定］パネルが表示されます。
    4. スライドに関連付けられている［編集する］アイコンをクリックします。［スライド設定］パネルが表示されます。
    5. ［カスタマイズ］タブの［要素］セクションに移動します。
    6. 利用可能な選択肢は次のとおりです。
      1. イベント名
      2. イベントの簡易説明
      3. ラベル
      4. ボタングループ
      5. イベントのカウントダウン
      6. ソーシャルメディアのユーザー名
      7. サブのメディア
      8. メインのメディア
      9. 日付/Time
      10. 会場

    要素の並べ替え

    1. ［スライド設定］パネルで、［項目の管理］タブに移動します。
    2. 要素をドラッグ＆ドロップして、縦方向に並べ替えます。

    スライダーの操作設定のカスタマイズ

    1. ドックから［デザイン］→［Webサイトのデザイン］に移動します。
    2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
    3. ヒーローセクションにカーソルを合わせ、関連付けられている［設定］アイコンをクリックします。［スライダー設定］パネルが表示されます。
    4. ［カスタマイズ］タブに移動します。

    矢印の設定


    • 必要に応じて、［矢印］を有効にします。
    • 矢印の［デザイン］を選択してください。
      • 円形カバー付きの線のみ
      • 塗りつぶし
      • 線のみのシンプルな矢印
      • 塗りつぶされたボックス付きのシンプルな矢印
    • ［矢印の色］と［背景色］を選択してください（必要に応じて透明度を調整します）。

    • 必要に応じて、［スライドナビゲーター］を有効にします。
    • ［デザイン］として、［ドット］または［破線］を選択してください。
    • ドットの［配置］を選択してください。
    • ［ナビゲーターの色］を選択してください（必要に応じて透明度を調整します）。

    スライドの動作


    • 必要に応じて［自動スライド］を有効にし、遅延時間を秒単位で設定します。
    • 必要に応じて、［カーソルを合わせたときにスライドを一時停止する］を有効にします。
    • スライド間の［切り替え効果］として、［フェード］または［スライド］を選択してください。
    • 必要に応じて、［すべてのスライドを同じ高さにする］を有効にします。
    • 必要に応じて、［スライダーを画面に合わせて調整する］を有効にします。

    スライドの削除
    1. ドックから［デザイン］→［Webサイトのデザイン］に移動します。
    2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
    3. ヒーローセクションにカーソルを合わせ、関連付けられている［設定］アイコンをクリックします。［スライダー設定］パネルが表示されます。
    4. スライドに関連付けられているメニューを開き、［削除］をクリックします。
    5. ダイアログボックスで削除を確認します。

    要素のカスタマイズ

    イベント名
    1. ドックから［デザイン→Webサイトのデザイン］に移動します。
    2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
    3. ヒーローセクションにカーソルを合わせ、イベント名に関連付けられた［設定］アイコンをクリックします。
    4. 次のいずれかを選択してください。
      • ［テキストを更新し、Webサイトやその他のプロモーションで使用される「イベント名」項目と同期する］
      • ［イベント名を編集して書式を設定する：Webサイト上のテキストのみを更新し、書式スタイルをカスタマイズする］
    5. テキストを編集するには。
      編集するテキストを選択し、次の書式設定を使用します。



      1. ［太字］：テキストを太字にします。
      2. ［斜体］：テキストを斜体にします。
      3. ［下線］：テキストに下線を引きます。
      4. ［取り消し線］：テキストに取り消し線を追加します。
      5. ［配置］：選択したテキストを配置します（例：左、中央、右）。
      6. ［番号付きリスト］：番号付きリストを作成します。
      7. ［箇条書き］：箇条書きを作成します。
      8. ［テキストの色］：テキストの色と透明度を変更します。
      9. ［テキストの背景］：ブロックではなく、テキスト自体に背景色を追加します。
      10. ［行間］：テキストの行間を調整します。
      11. ［文字間隔］：文字間隔を変更します。
      12. ［テキストの変換］：テキストの大文字と小文字を変更します（例：大文字、小文字）。
      13. ［リンク］：テキストにハイパーリンクを追加します。
      14. ［水平線］：テキストのセクション間に水平線を挿入します。
      15. ［クリーン］：テキストブロックのプロパティに影響を与えずに、テキストの書式設定をすべてクリアします。

    場所/Date/Time


    1. ドックから［デザイン→Webサイトのデザイン］に移動します。
    2. ［Webサイトを編集する］をクリックします。Webサイトデザイナーが開きます。
    3. ヒーローセクションにカーソルを合わせ、場所/date/time.に関連付けられた［設定］アイコンをクリックします。
    4. ［日時と会場］パネルで、イベントの場所を表示するための［会場］切り替えボタンを有効にします。
    5. イベントの日時を表示するには、［日付］と［時刻］の切り替えボタンを有効にします。
    6. ［ウィジェットのサイズ］を選択します：小、中、大、特大
    7. ［形式の種類］を更新するには。
      • ［カスタマイザー］の［形式］パネルを開くには、［変更する］をクリックします。
      • ［会場の形式］で、形式を入力します。
      • タグに関するヘルプが必要な場合は、［タグ］をクリックします。
      • 会場の形式の編集画面に適用する［マークダウン］をクリックします。
      • 問題が発生した場合は、［初期設定に戻す］をクリックします。
    8. 必要に応じてアイコンを有効にします。
      • ［アイコン］の［デザイン］パネルを開くには、［アイコンのデザイン］をクリックします。



      • ［カレンダーのアイコンを変更］、［時間のアイコンを変更］、または［会場のアイコンを変更］をクリックします。
      • Zoho Backstageのライブラリーからアイコンを選択するか、独自のアイコンをアップロードするには、［アイコンライブラリー］をクリックします。



      • 問題が発生した場合は、［初期設定に戻す］をクリックします。
    9. 必要に応じて、場所の［テキストの色］を変更します（必要に応じて透明度も調整します）。

    ボタン

    設定

    1. ドックから［デザイン→Webサイト］に移動します。
    2. ［Webサイトを編集する］をクリックします。
    3. ヒーローセクションにカーソルを合わせ、ボタングループに関連付けられた［設定］アイコンをクリックします。［ボタングループの設定］パネルが表示されます。
    4. 編集するボタンの横にある［編集する］アイコンをクリックします。
    5. 新しいボタンを追加するには、［新しいボタンを追加する］をクリックします。
    6. ボタンを設定するには、そのボタンに関連付けられた［編集する］アイコンをクリックします。［ボタンの設定］パネルが表示されます。
    7. ［設定］タブに移動します。
    8. ドロップダウンから［ボタンの種類］を選択してください。
      • ［今すぐ登録する］：参加者を登録ページに移動させます。
        • ボタンのテキストを設定する
        • 代替の登録リンクを設定する（任意）
      • ［お問い合わせ］：訪問者が簡単に問い合わせできるようにします。
        • ボタンのテキストを設定する
      • ［カレンダーに追加］：イベントの日付を個人のカレンダーに保存できるようにします。
        • ボタンのテキストを設定する
      • ［日程を印刷する］：訪問者がイベントの日程をダウンロード/printできるようにします。
        • ボタンのテキストを設定する
      • ［行き方を調べる］：イベントの場所をインタラクティブな地図で表示します。
        • ボタンのテキストを設定する
      • ［カスタム］：複数のリンク設定を利用できます。
        • ［ページ］の場合：ドロップダウンから選択します。
        • ［外部URL］の場合：URLを入力し、新しいタブで開くかどうかを選択します。
        • 対象：［登壇者］：設定済みのすべての登壇者から選択します。
        • 対象：［セッション］：予定されているすべてのセッションから選択します。
        • 対象：［スポンサー］：確定済みのすべてのスポンサーから選択します。
        • 対象：［イベントリスト］：イベント関連の情報を表示します。
        • 対象：［チケット］：購入者向けのチケットの種類を選択します。
      • ［スポンサーになる］：提携を呼びかけます/funding
        • ［ボタンのテキスト］を設定する
      • ［カスタムフォームの関連付け］：問い合わせやフィードバックに使用します。
        • ［カスタムフォーム］を選択する
        • ［ボタンのテキスト］を設定する
      • ［出展者になる］：製品の紹介に使用します。
        • ボタンのテキストを設定する
      • ［要旨を提出する］：ユーザーがイベントの要旨を提出できるようにします。
        • ［ボタンのテキスト］を設定する
      • ［サインインする］：ユーザーがログインできるようにします。
        • ［ボタンのテキスト］を設定する
    9. ［保存する］をクリックします。
    10. イベントが下書きの場合は、［公開する］をクリックしてイベントを公開してください。すでに公開中の場合は、［再公開する］をクリックします。

    デザイン
    1. ドックから［デザイン→Webサイト］に移動します。
    2. ［Webサイトを編集する］をクリックします。
    3. ヒーローセクションにカーソルを合わせ、ボタングループに関連付けられた［設定］アイコンをクリックします。［ボタングループの設定］パネルが表示されます。
    4. 編集するボタンの横にある［編集する］アイコンをクリックします。［ボタンの設定］パネルが表示されます。
    5. ［デザイン］タブに移動します。
    6. ボタンをカスタマイズします。
      • ［ボタンのサイズ］：極小、小、または中
      • ［ボタンのスタイル］：塗りつぶし、ゴースト（透過）、またはリンク
      • ［ボタンの色］：
        • 塗りつぶしスタイル：［テキストの色］と［背景］をカスタマイズします。
          • ［枠線］のオプションを切り替えます（有効にした場合は、太さと色を調整します）。
        • ゴースト（透過）スタイル：［テキストの色］をカスタマイズします。
          • ［枠線］のオプションを切り替えます（有効にした場合は、太さと色を調整します）。
        • リンクスタイル：［テキストの色］のみをカスタマイズします。
    7. 必要に応じて、［初期設定に戻す］をクリックします。
    8. イベントが下書きの場合は、［公開する］をクリックしてイベントを公開してください。すでに公開中の場合は、［再公開する］をクリックします。

    Idea
    ボタンの色は、塗りつぶしまたはグラデーションとしてカスタマイズできます。色を選択するには、［カラーピッカー］をクリックして選択肢から選びます。
    Info
    1. ボタングループ全体をカスタマイズするには、ボタングループの設定パネルの［デザイン］タブに移動します。
    2. ボタングループのセクションにカーソルを合わせ、ボタンの横にある［編集］アイコンをクリックして、個別の設定パネルを開くこともできます。

    カウントダウン
    1. Dockから［デザイン］→［Webサイト］に移動します。
    2. ［Webサイトを編集する］をクリックします。
    3. ヒーローセクションにカーソルを合わせ、カウントダウン要素に関連付けられている［設定］アイコンをクリックします。
    4. カウントダウンの設定パネルで、次の操作を行います。
      • ［カウントダウンのレイアウト］を設定します（5種類のスタイルを利用できます）。
      • ［タイマーの色］と［タイマーのサイズ］を調整します。

      • 必要に応じて［カウントダウンのタイトル］を有効にします。テキストを編集するには、次の操作を行います。
        • 編集するテキストを選択し、次の書式設定を使用します。
          • ［サイズ］：フォントサイズを調整します。
          • ［太字］：テキストを太字にします。
          • ［斜体］：テキストを斜体にします。
          • ［下線］：テキストに下線を付けます。
          • ［取り消し線］：テキストに取り消し線を付けます。
          • ［配置］：選択したテキストを配置します（左、中央、右など）。
          • ［番号付きリスト］：番号付きリストを作成します。
          • ［箇条書きリスト］：箇条書きを作成します。
          • ［テキストの色］：テキストの色と透明度を変更します。
          • ［テキストの背景］：ブロックではなく、テキスト自体に背景色を追加します。
          • ［行の高さ］：テキストの行間を調整します。
          • ［文字の間隔］：文字間隔を変更します。
          • ［テキストの変換］：テキストの大文字と小文字を変更します（大文字、小文字など）。
          • ［リンク］：テキストにハイパーリンクを追加します。
          • ［水平区切り線］：テキストセクションの間に水平線を挿入します。
          • ［クリーン］：テキストブロックのプロパティに影響を与えず、テキストの書式設定をすべてクリアします。
      • ［タイマーの表示設定］を設定します。
        • ［タイマーを表示する］
        • ［メッセージを表示する］
        • ［タイマーとメッセージを表示する］
      • カウントダウンの対象を設定します。
        • ［イベントの開始日］
        • ［指定の日付］（日時を設定）
        • ［チケット販売の開始日］（チケットの種類を選択）
        • ［チケット販売の終了日］（チケットの種類を選択）
    5. イベントが下書きの場合は、［公開する］をクリックしてイベントを公開してください。すでに公開中の場合は、［再公開］します。

    ソーシャルメディアのリンク
    1. Dockから［デザイン］→［Webサイト］に移動します。
    2. ［Webサイトを編集する］をクリックします。
    3. ヒーローセクションにカーソルを合わせ、ソーシャルメディアのリンク要素に関連付けられている［設定］アイコンをクリックします。
    4. 利用可能なプラットフォーム。
      • ［X］
      • ［Facebook］
      • ［LinkedIn］
      • ［YouTube］
      • ［Instagram］
      • ［Telegram］
      • ［Medium］
      • ［Webサイト］
    5. リンクを入力してEnter／リターンキーを押すと、リンクが取得されて適用されます。
    6. イベントが下書きの場合は、［公開する］をクリックしてイベントを公開してください。すでに公開中の場合は、［再公開］します。

    メディアの追加
    1. Dockから［デザイン］→［Webサイト］に移動します。
    2. ［Webサイトを編集する］をクリックします。
    3. ヒーローセクションにカーソルを合わせ、要素の［メディアを追加する／変更する］をクリックします。メディアを編集するパネルが表示されます。
    4. ［画像］、［動画］、［埋め込み］から選択してください。
      • ［画像］： 
        • 画像をアップロードするか、デザインライブラリーから選択してください。
        • 編集するには、［元の画像を使用する］の選択を解除します（切り取り/flip/rotate).
      • ［動画］： 
        • 項目に動画のURLを貼り付けます。
        • 不要な場合は、［削除］をクリックして確認します。
      • ［埋め込み］： 
        • iframeコードを貼り付けます。
    5. 画像にリンクを設定するには。
      • ［画像］タブで、画像の下にある［リンク］アイコンをクリックします。
      • 利用可能な選択肢から選択してください。



        • ［ページ］：ドロップダウンからページを選択します。
        • ［外部URL］：URLを入力し、新しいタブで開くかどうかを選択してください。
        • ［登壇者］：リスト内の登壇者にリンクします。
        • ［セッション］：予定されているセッションにリンクします。
        • ［スポンサー］：確認済みのスポンサーにリンクします。
        • ［イベント一覧］：イベントの詳細にリンクします。
        • ［チケット］：特定のチケットの種類にリンクします。
    6. イベントが下書きの場合は、［公開する］をクリックしてイベントを公開してください。すでに公開中の場合は、［再公開］します。
    Info
    1. ［メインのメディア］の切り替えを有効にすると、ヒーローセクションで中心として表示するメディアを追加できます。ヒーローセクション内の要素の順番を変更しても、メインのメディアには影響しません。
    2. ［サブのメディア］の切り替えを使用すると、小さなメディアを追加できます。このメディアは、ヒーローセクション内の他の要素とグループ化され、ヒーローセクション内の要素の順番を変更するときに移動できます。

    表示設定の管理

    スライドの非表示と再表示

    1. Dockから［デザイン］→［Webサイトのデザイン］に移動します。
    2. Webサイトデザイナーを開くには、［Webサイトを編集する］をクリックします。
    3. ヒーローセクションにカーソルを合わせ、関連付けられている［設定］アイコンをクリックします。
    4. スライダーの設定パネルで、非表示にするスライドを見つけます。
    5. スライドの横にある［目］アイコンをクリックします。
      • 青色の目アイコン：スライドは非表示です（クリックすると表示されます）
      • 黒色の目アイコン：スライドは表示されています（クリックすると非表示になります）

    要素の非表示と再表示

    1. Dockから［デザイン］→［Webサイトのデザイン］に移動します。
    2. ［Webサイトを編集する］をクリックします。
    3. ヒーローセクションにカーソルを合わせ、要素に関連付けられている［目］アイコンをクリックして非表示にします。
    4. 再表示するには、もう一度クリックします。
    ご不明な点がございましたら、support@zohobacsktage.comまでお問い合わせください。