ヒーローセクションは、イベントWebサイトのランディングページ最上部のエリアです。本ガイドでは、ヒーローセクションをカスタマイズし、イベント訪問者に強い第一印象を与える方法について説明します。

スライドの管理

スライドの追加

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

スライドの並べ替え

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

スライドの編集

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

セクションの背景

1. 「Section Background」をクリックします。
   
2. 「Color」、「画像」、または「Video」を選択します。
   
3. モバイルページの編集を行う場合は、モバイルタブに移動します。モバイルインターフェース用のWebサイト背景設定が無効である必要があります。そうすることで、モバイル背景用に個別編集が可能です。
   
   
   
4. 「Color」、「画像」、「Video」の中から選択します。
   
1. Color オプション:
   
1. 「Background」「Color」を選択し、「Background」「Opacity」を調整します。カラーは定額カラーまたはグラデーションを選べます。
   
2. 画像 オプション:
   
1. 「画像」「Opacity」を調整し、「画像」「Overlay」を切り替えます。
   
2. 「画像 Fit 設定」から「Cover」「Full 画像」「Tile」を選択します。
   
3. 「画像」「Positions」ツールで画像の配置を設定します。
   
4. 「画像」「Overlay」が有効な場合、「Overlay Color」および「Overlay Capacity」を選択します。
   
5. 画像を変更するには、「変更する」をクリックし、ライブラリから選択するか新規画像をアップロードします。
   
6. 画像をクリップ、切り取り、反転、または回転できます。
   
7. 画像を削除する場合は「削除」をクリックします。
   
3. Videoオプション:
   
1. YouTube動画のサムネイルを入力します。
   
2. 「Video」「Overlay」が有効な場合、「Overlay Color」および「Overlay Capacity」を選択します。
   
3. 必要に応じて「Loop Video」を有効にします。
   
5. 初期設定に戻したい場合は、「リセットする to 初期設定」をクリックします。
   
6. イベントが下書きステータスの場合は「公開」、イベントが有効または実行中の場合は「Republish」をクリックします。

スライドセクション

1. セクションレイアウト：Media Left、Media Right、Media Top、または Media Bottom を選択します。
2. 横位置揃え：left、right、または justified を選択します。
3. 縦位置揃え：必要に応じて調整します。
4. メディアサイズ：Tiny、Small、中、Large、または Extra Large を選択します。

要素の追加／削除

1. Dock の Design > Webサイト Design に移動します。
2. 編集 Webサイト をクリックします。Webサイト Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、該当する設定アイコンをクリックします。Slider 設定パネルが表示されます。
   
4. スライドに関連付けられた 編集アイコンをクリックします。Slide 設定パネルが表示されます。
   
5. 要素セクションの カスタマイズするタブに移動します。
   
6. 利用可能な設定には以下が含まれます：
   
1. Event 名前
   
2. Event 短 説明
   
3. ラベル
   
4. Button グループ
   
5. Event Countdown
   
6. Social Handles
   
7. Secondary Media
   
8. Primary Media
   
9. 日付/時間
   
10. Venue
    

要素の並べ替え

1. Slide 設定パネルで、管理 商品タブに移動します。
   
2. 要素をドラッグ＆ドロップして縦方向の順序を調整します。
   

スライダーコントロールのカスタマイズ

1. Dock の Design > Webサイト Design に移動します。
2. 編集 Webサイト をクリックします。Webサイト Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、該当する設定アイコンをクリックします。Slider 設定パネルが表示されます。
   
4. カスタマイズするタブに移動します。

矢印の設定

• 必要に応じてArrowsを有効にします。
• 矢印のデザインを選択します：
  
  • 円形カバー付きストロークのみ
  • 塗りつぶし
  • シンプル折れ線グラフのストロークのみの矢印
  • 箱入り塗りつぶしのシンプル折れ線グラフ矢印
• Arrow ColorとBackground Colorを選択します（必要に応じて不透明度を調整）。

ナビゲーター設定

• 必要に応じてSlide Navigatorを有効にします。
• デザインを選択します：Dots または Dashes。
• ドットの配置を選択します。
• Navigator Colorを選択します（必要に応じて不透明度を調整）。

スライドの動作

• Auto Slideを有効にし、必要に応じて遅延時間（秒）を設定します。
• 必要であれば、一時停止 slide オン hoverを有効にします。
• スライド間のTransitionとしてFadeまたはSlideを選択します。
• 必要に応じて、Equal height for すべて slidesを有効にします。
• 必要であれば、Fit slider to screenを有効にします。

スライドの削除

1. DockのDesign > Webサイト Designへ移動します。
2. 編集 Webサイトをクリックします。Webサイトデザイナーが開きます。
3. ヒーローセクションにマウスを合わせ、設定アイコンをクリックします。Slider 設定パネルが表示されます。
4. 該当するスライドのメニューを開き、削除をクリックします。
5. ダイアログボックスで削除を確定します。

要素のカスタマイズ

Event 名前

1. DockのDesign > Webサイト Designへ移動します。
2. 編集 Webサイトをクリックします。Webサイトデザイナーが開きます。
3. ヒーローセクションにマウスを合わせ、設定アイコンをクリックします（Event 名前に関連）。
4. 以下から選択します：
   
   • テキストを更新し、「Event 名前」項目とWebサイトやその他のプロモーションで使用中の内容と同期する
   • Event 名前の編集と書式設定：テキストを更新し、Webサイト上のみ書式スタイルをカスタマイズ
5. テキストを編集するには：
   編集したいテキストを選択し、以下の書式設定を使用します：
   
   
   
   
1. Bold：テキストを太字にします。
   
2. Italic：テキストに斜体スタイルを適用します。
   
3. Underline：テキストに下線を引きます。
   
4. Strikethrough：テキストに取り消し線を追加します。
   
5. Alignment：選択したテキストを整列します（例：左寄せ、中央揃え、右寄せ）。
   
6. 注文済みリスト：番号付きリストを作成します。
   
7. 箇条書き リスト: 箇条書きリストを作成します。
   
8. テキスト カラー: テキストの色や透明度を変更します。
   
9. テキスト 背景: テキスト自体（ブロックではなく）に背景色を追加します。
   
10. 折れ線グラフ 高さ: テキストの行間隔を調整します。
    
11. 文字 間隔: 文字の間隔を修正します。
    
12. テキスト 変換: テキストの大文字・小文字を変更します（例：大文字、小文字）。
    
13. リンク: テキストにハイパーリンクを追加します。
    
14. 横 ルーラー: テキストセクション間に横方向の折れ線グラフを挿入します。
    
15. クリーン: テキストブロックのプロパティに影響を与えずにテキストの書式設定をすべてクリアします。

場所/日付/時間

1. Design > Webサイト DesignにDockから移動します。
2. 編集 Webサイトをクリックします。Webサイト Designerが開きます。
3. ヒーローセクションにカーソルを合わせ、設定アイコンをクリックして、場所／日付／時間を設定します。
4. 日付、時間、会場パネルで、イベント会場の会場トグルを有効にします。
   
5. イベントの日付と時間を表示するには、日付と時間のトグルを有効にしてください。
6. ウィジェットのサイズを選択します：小、中、大、特大
7. 形式種類を更新する場合:
   • 変更するをクリックして、カスタマイザーの形式パネルを開きます。
   • 会場の形式セクションで、種類を選択します。
   • タグに関してヘルプが必要な場合は、タグをクリックします。
   • 値下げをクリックして、会場形式エディタに適用します。
   • 操作がうまくいかない場合は、リセットするをクリックして初期設定に戻してください。
8. 必要に応じてアイコンを有効にします:
   
   • アイコンデザインをクリックして、アイコンデザインパネルを開きます。
     
     
     
     
   • カレンダーアイコン変更する、時間アイコン変更する、会場アイコン変更するをクリックします。
   • アイコンライブラリをクリックして、Zoho Backstageライブラリからアイコンを選択するか、ご自身のアイコンをアップロードします。
     
     
     
     
   • 操作がうまくいかない場合は、リセットするをクリックして初期設定に戻してください。
9. 必要に応じて、会場テキストカラーを変更します（必要に応じて不透明度も調整可能）。

ボタン

設定

1. デザイン > Webサイトに移動します。
2. Webサイトを編集をクリックします。
3. ヒーローセクションにカーソルを合わせ、ボタングループの設定アイコンをクリックします。Button グループ設定パネルが表示されます。
4. 編集したいボタンの横にある編集アイコンをクリックします。
   
5. 新しいボタンを追加する場合は、新しく追加する Buttonをクリックします。
   
6. ボタンを設定するには、ボタンの横にある編集アイコンをクリックします。Button 設定パネルが表示されます。
   
7. 設定タブに移動します。
8. ドロップダウンからButton種類を選択します。
   
   • 今すぐ登録する:参加者を登録ページへ直接誘導します。
     
     • ボタンのテキストを設定
     • 代替登録リンクを設定（任意）
   • 取得する in Touch:訪問者が簡単に連絡できるようにします。
     
     • ボタンのテキストを設定
   • 追加する to Calendar:イベント日付を個人カレンダーに保存可能にします。
     
     • ボタンのテキストを設定
   • 印刷する Agenda:訪問者がイベントスケジュールをダウンロード・印刷できるようにします。
     
     • ボタンのテキストを設定
   • 取得する Directions:インタラクティブマップ付きでイベント会場情報を提供します。
     
     • ボタンのテキストを設定
   • カスタム:複数のリンク設定が可能です。
     
     • ページの場合：ドロップダウンから選択
     • 外部URLの場合：URLを入力し、新しいタブで開くか選択
     • スピーカーの場合：すべての設定済みスピーカーから選択
     • セッションの場合：すべてのスケジュール済みセッションから選択
     • スポンサーの場合：すべての確定済みスポンサーから選択
     • イベントリスティングの場合：イベント関連情報を表示
     • チケットの場合：購入者向けにチケットクラスを選択
   • Become a Sponsor:パートナーシップや資金提供を募集します
     
     • ボタンのテキストを設定
   • リンク a カスタム Form:お問い合わせやフィードバック用
     
     • カスタムフォームを選択
     • ボタンのテキストを設定
   • Become an Exhibitor:商品の展示用
     
     • ボタンのテキストを設定
   • サインインする:ユーザーがログインできるようにします
     
     • ボタンのテキストを設定
9. 保存をクリックします。
10. イベントが下書き状態の場合は、公開をクリックして公開します。すでに有効な場合は、再公開してください。

デザイン

1. デザイン > WebサイトにDockから移動します。
2. Webサイトを編集をクリックします。
3. ヒーローセクションにカーソルを合わせ、ボタングループに関連付けられた設定アイコンをクリックします。ボタングループ設定パネルが表示されます。
4. 編集したいボタンの横にある編集アイコンをクリックします。ボタン設定パネルが表示されます。
   
5. デザインタブに移動します。
6. ボタンをカスタマイズします：
   
   • ボタンサイズ：Tiny、Small、または中
   • ボタンのスタイル：Filled、Ghost、またはリンク
   • ボタンカラー：
     
     • Filledスタイル：テキストカラーと背景色をカスタマイズできます。
       • ボーダーオプションを切り替え（有効時に太さや色を調整可能）。
     • Ghostスタイル：テキストカラーをカスタマイズ。
       • ボーダーオプションを切り替え（有効時に太さや色を調整可能）。
     • リンクスタイル：テキスト カラーのみカスタマイズ可能。
7. 必要に応じて初期設定にリセットをクリックします。
8. イベントが下書き状態の場合は、公開をクリックしてイベントを公開します。すでに有効な場合は再公開してください。

カウントダウン

1. デザイン > WebサイトをDockから開きます。
2. Webサイトを編集をクリックします。
3. ヒーローセクションにカーソルを合わせ、カウントダウン要素に関連付けられた設定アイコンをクリックします。
4. カウントダウン設定パネルで:
   
   • カウントダウンレイアウトを設定します（5つのスタイルから選択可能）。
   • タイマーのカラーやタイマーサイズを調整します。
     
     
   • 必要に応じてカウントダウン件名を有効にします。テキストを編集する場合：
   • 編集したいテキストを選択し、以下の書式設定を使用します。
     
   • サイズ：フォントサイズを調整します。
   • 太字：テキストを太字にします。
   • イタリック：テキストに斜体スタイルを適用します。
   • 下線：テキストに下線を付けます。
   • 打消し線：テキストに打消し線を追加します。
   • 配置：選択したテキストの配置（例：左寄せ、中央、右寄せ）を調整します。
   • 番号付きリスト：番号付きリストを作成します。
   • 箇条書きリスト：箇条書きリストを作成します。
   • テキストカラー：テキストの色や透明度を変更します。
   • テキスト背景：テキスト自体に背景色を追加します（ブロック全体ではありません）。
   • 行間：テキスト行間のスペースを調整します。
   • 文字間隔：文字同士の間隔を変更します。
   • テキスト変換：大文字・小文字の切り替えを行います（例：全て大文字、全て小文字）。
   • リンク：テキストにハイパーリンクを追加します。
   • 横罫線：テキストセクション間に横罫線を挿入します。
   • クリーン：テキストブロックのプロパティには影響せず、すべてのテキスト書式設定をクリアします。
   • タイマー表示設定を選択します：
     • タイマーを表示する
     • メッセージを表示
     • タイマーとメッセージを表示する
   • カウントダウンの対象を設定：
     • イベント開始日
     • 独自の日付（日付と時刻を設定）
     • チケット販売開始日（チケットクラスを選択）
     • チケット販売終了日（チケットクラスを選択）
5. イベントが下書き状態の場合は、公開をクリックしてイベントを公開します。すでに有効な場合は、再公開してください。

ソーシャルハンドル

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

メディアの追加

1. Design > WebサイトをDockから開きます。
2. 編集 Webサイトをクリックします。
3. ヒーローセクションにカーソルを合わせ、要素上の追加するまたはMedia / 変更するをクリックします。編集 Mediaパネルが表示されます。
4. 画像、Video、Embedのいずれかを選択します:
   • 画像: 
     • 画像をアップロードするか、デザインライブラリから選択します。
     • 使用する 元の内容 画像のチェックを外すと、編集（切り取り/反転/回転）が可能です。
   • Video: 
     • 項目に動画のURLを貼り付けます。
     • 削除するをクリックし、不要な場合は確定してください。
   • Embed: 
     • iframeコードを貼り付けます。
5. 画像にリンクを設定する場合:
   • 画像タブ内の画像下にあるリンクアイコンをクリックします。
   • 利用可能な設定から選択:
     
     
     
     
     • Page: ドロップダウンからページを選択します。
     • External URL: URLを入力し、新規タブで開くかを選択します。
     • Speakers: 登録済みスピーカーへのリンク。
     • Sessions: 予定されているセッションへのリンク。
     • Sponsors: 承認済みスポンサーへのリンク。
     • Event Listing: イベント詳細へのリンク。
     • チケット: 特定のチケットクラスへのリンク。
6. イベントが下書き状態の場合、公開をクリックして公開します。すでに有効な場合は、Republishで再公開してください。
   

1. Primary Mediaトグルを使うと、ヒーローセクションの中心となるメディアを追加できます。ヒーローセクション内の要素の順番を変更しても、Primary Mediaには影響しません。
2. Secondary Mediaトグルでは、より小さなメディアを追加できます。このメディアはヒーローセクション内の他の要素とグループ化され、要素の並び替え時に一緒に移動します。

---

表示設定コントロール

スライドの表示・非表示

1. Design > Webサイト DesignをDockから開きます。
2. 編集 WebサイトをクリックしてWebサイトデザイナーを開きます。
3. ヒーローセクションにカーソルを合わせ、設定アイコンをクリックします。
4. Slider 設定パネルで、非表示にしたいスライドを探します。
5. スライド横の目アイコンをクリックします:
   • 青い目アイコン: スライドは非表示（クリックで表示）
   • 黒い目アイコン: スライドは表示中（クリックで非表示）

要素の表示・非表示

1. Design > Webサイト DesignをDockから開きます。
2. 編集 Webサイトをクリックします。
3. ヒーローセクションにカーソルを合わせ、要素横の目アイコンをクリックして非表示にします。
4. 再度クリックすると、表示に戻ります。
   

---