アラートブロックを使用すると、SeedProdページに目を引くカラフルなアラートボックスを追加できます。このブロックは、訪問者に対して重要なメッセージ、お知らせ、警告、または成功通知を視覚的に目立つ方法で伝えるのに役立ちます。
アラートボックスは、特別なプロモーション、重要な更新、システム通知、時間制限のあるお知らせなど、直ちに対応が必要な重要な情報を強調するのに最適です。カスタマイズ可能なスタイルと色により、メッセージを目立たせ、訪問者の注意を確実に引きつけられます。
ページへのアラートブロックの追加
SeedProdページにアラートブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロックで、アラートブロックをページの任意のセクションにドラッグ＆ドロップします。
アラートブロックは「デザイン」＞「詳細設定」の下にあり、ページの任意のセクションにドラッグできます。
ステップ2: コンテンツ設定の構成
追加後、アラートブロックをクリックして設定を開きます。「コンテンツ」タブでは、アラートメッセージと外観をカスタマイズできます。
警告：
- タイプ:事前定義されたアラートスタイルから選択 – 情報（青、一般的な情報用）、成功（緑、肯定的な確認用）、警告（黄/橙、注意喚起用）、危険（赤、重大なアラート用）。各タイプには適切なメッセージのトーンを伝えるための色が付いています。
- 閉じるボタン:訪問者がアラートを閉じるための閉じるボタンを表示または非表示にする切り替えです。ユーザーが非表示にしたい可能性のある重要でないメッセージに対して有効にしてください。
- タイトル：アラートメッセージのメイン見出しを入力してください。簡潔で注目を集める内容にしてください。
- 説明:アラートメッセージを説明する詳細なテキストを追加します。これにより、タイトル以外の文脈や追加情報が提供されます。
- タイトルの配置:アラートのタイトルの水平方向の配置を設定します（左、中央、または右）
- 説明の配置:アラートの説明テキストの水平方向の配置を設定します
- タイトルのフォントサイズ：タイトルテキストのサイズを調整し、目立ちやすく読みやすいようにします
- 説明のフォントサイズ：最適な読みやすさのために説明テキストのサイズを調整します
- タイトルタグ:タイトルに使うHTML見出しタグを選択してください（h1、h2、h3、h4、h5、またはh6）。これはSEOと視覚的な階層構造の両方に影響します。
- アイコンを表示：アラートメッセージの横にアイコンを表示または非表示にする切り替えです。アイコンはアラートの種類を素早く視覚的に示す役割を果たします
- アイコン：アラートに表示するカスタムアイコンを選択してください。メッセージの目的に合ったアイコンを選んでください
[コンテンツ] タブでは、アラートの種類、メッセージの内容、配置、アイコンの設定を構成できます。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、あらかじめデザインされたアラートスタイルから選択することで、アラートボックスの全体的な外観を素早く変更できます。
- 4種類の異なるテンプレートデザインから選択できます。それぞれが独自のレイアウトと視覚的処理を備えています。各スタイルをプレビューして、ページデザインに最適なものを見つけてください。
テンプレートタブでは、アラートの外観を素早くカスタマイズできる4つの事前設計済みスタイルを提供します。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、アラートブロックの外観をカスタマイズできます：
スタイル:
- タイポグラフィ：アラートタイトルのフォントプロパティ（フォントファミリー、太さ、スタイルなど）を制御します
- テキストの組版：アラート説明テキストのフォントプロパティをカスタマイズする
- 色:アラートタイトルテキストの色を設定します
- 説明文の色：アラート説明文のテキストの色を選択してください
- 閉じるボタン（×アイコン）の色を設定します。
- タイトル背景:アラートのタイトル領域専用の背景色を追加します
- 背景色：アラートボックス全体の背景色を設定します
- テキストシャドウ：アラートテキストに影効果を追加し、立体感と可読性を向上させます。「なし」「ヘアライン」「小」「中」「大」「特大」「2倍特大」「カスタム」から選択可能
スペース:
- マージン：アラートブロックの周囲の余白（上、右、下、左）を制御します。これにより、アラートと周囲の要素の間に表示されるスペースが決まります。
- パディング：アラートボックス内の内側の余白（上、右、下、左）を調整します。これにより、コンテンツとアラートの境界線との間に余裕が生まれます。
属性：
- CSS ID:アラートブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス:テーマまたはカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します
- カスタム属性:アラートラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: role|alert)
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面でアラートブロックを非表示にする
- タブレットで非表示:タブレット端末でアラートブロックを非表示にする
- モバイルで非表示:モバイル端末でアラートブロックを非表示にする
アニメーション効果：
- エントランスアニメーション：アラートが表示される際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されています。これにより重要なメッセージに即座に注目を集めます
詳細タブでは、タイポグラフィ、色、間隔、アニメーション効果など、幅広いスタイル設定オプションを提供します。
ステップ4: 変更を保存する
アラートブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにアラートブロックを追加できました！この強力なブロックは、重要な情報を効果的に伝え、目を引く色分けされたメッセージで訪問者の注意を引くのに役立ちます。さまざまなアラートタイプ、テンプレートスタイル、カスタムカラーを試して、ブランドに合ったアラートを作成し、メッセージを明確に伝えましょう。