ページヘッダー
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
Zoho LandingPageのヘッダーセクションでは、ランディングページにシンプルで効果的なブランディング要素を追加できます。ロゴとCTAボタンを配置し、すっきりと要点を絞ったデザインにできます。
ヘッダーセクションの有効化
- ランディングページ作成画面の上部バーにある［挿入］ボタンをクリックして、メニューを表示します。
- ［セクション］で、切り替えスイッチを使用してヘッダーを有効にします。
ヘッダーのカスタマイズ
- ヘッダーセクション内の任意の場所をクリックして、［ヘッダー設定］を開きます。
- ここでは、ヘッダーのスタイル、スクロール時の動作、背景テーマを変更できます。
- 各オプションを使用して、罫線や余白も調整できます。
- アニメーションのオプションを使用すると、ページの読み込み時のヘッダーの動作を設定できます。
- ［デバイスで表示］オプションでは、デスクトップ、タブレット、モバイルでヘッダーを表示するか非表示にするかを選択できます。
- カスタムCSSとJavaScriptのオプションを使用すると、独自のコードでさらに詳細にカスタマイズできます。
ヘッダーロゴの設定
- ロゴをクリックして、［ロゴのプロパティ］ツールバーを開きます。
- ロゴ画像、配置、代替テキスト、余白を変更できます。
- ロゴにリンクを設定するには、リンクのオプションをクリックして、目的のURLを入力します。
ヘッダーCTAの設定
- ヘッダー内のボタンをクリックして、［ボタンのプロパティ］パネルを開きます。
- 要件に合わせて、ボタンのテキスト、スタイル、アクションをカスタマイズできます。
ボタンのリンクプロパティ
- ［リンクのプロパティ］タブでは、ボタンにリンクを追加できます。このボタンをクリックした訪問者は、指定したリンク先に移動します。
- ポータル内の任意のランディングページへのリンクを追加できます。表示されたランディングページの一覧から、目的の移動先を選択します。アンカーやツールチップを追加して、リンクの内容をより分かりやすくすることもできます。訪問者がランディングページ内のボタンをクリックすると、指定したランディングページに移動します。
- 任意のWebページへのリンクを追加できます。ユーザーがランディングページ内のボタンをクリックすると、指定したWebページに移動します。
- アンカーオプションを使用すると、ランディングページ内でアンカーを追加した任意のセクションにユーザーを移動できます。ランディングページで作成したアンカーは、［アンカーを選択］の横にあるドロップダウンリストに表示されます。
ボタンとランディングページ内のセクションのリンク設定
訪問者をランディングページ内の特定のセクションに直接移動させるには、アンカーを使用できます。たとえば、ページ下部のフォームに訪問者を移動させる場合は、フォームの上にある見出しや、その付近のテキスト要素にアンカーを追加できます。
アンカーを追加する手順
- アンカーを追加するテキストを選択します。
- フローティングツールバーで、［アンカー］オプションをクリックします。
- アンカーの名前を入力し、［保存］をクリックします。
ボタンとアンカーのリンク設定
- ［ボタン］要素を選択します。
- リンクの種類として［アンカー］を選択します。
- 作成したアンカーを一覧から選択します。
これで、訪問者がボタンをクリックすると、アンカーを設定したセクションに直接移動します。
- ボタンにメールアドレスへのリンクを設定するには、こちらにメールアドレスを入力します。下の項目には、Cc、Bcc、件名、メッセージなどの詳細も追加できます。ユーザーがランディングページ内のボタンをクリックすると、すべての詳細が入力済みの状態で新規メール作成画面が開きます。
- ボタンに電話番号へのリンクを設定する場合は、任意の電話番号を指定できます。ユーザーがランディングページ内のボタンをクリックすると、電話番号が入力済みの状態でスマートフォンのダイヤル画面が開き、すぐに発信できます。
- ボタンにダウンロード可能なファイルへのリンクを設定するには、こちらで任意のファイルをアップロードできます。ユーザーがランディングページ内のボタンをクリックすると、ファイルが自動的にダウンロードされます。