チームメンバーブロックでは、完全にカスタマイズ可能なプロフィールレイアウトで、SeedProdのあらゆるページにチームメンバーを紹介できます。洗練されたプロフェッショナルなカード形式で、各メンバーの写真、名前、役職、説明、ソーシャルメディアリンクを表示します。
このブロックは、会社概要ページやランディングページ、信頼性と信頼構築が重要なあらゆるセクションに最適です。画像の形状、区切り線のスタイル、ソーシャルアイコンの外観、そして各テキスト要素のタイポグラフィスタイルを完全に制御でき、チーム紹介セクションをブランドに合った外観に仕上げられます。
チームメンバーブロックをページに追加する
SeedProdページにチームメンバーブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下で、チームメンバーブロックをページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、チームメンバーブロックをクリックして設定を開きます。コンテンツタブでは、設定が4つのセクションに整理されています。
一般:
- 画像：チームメンバーの写真をアップロードまたは選択します。画像の幅（ピクセルまたはパーセント単位）を設定し、必要に応じて固定の高さを設定します。アクセシビリティのために画像の説明となる代替テキストを入力します。
- 画像の位置:テキストに対する画像の表示位置を選択します — 上、左、または右。
- 名前:チームメンバーの名前を入力してください（デフォルト: 「John Doe」）。表示に使用するHTMLタグ（H1～H6、div、span、またはp）を選択し、テキストの配置を設定し、下マージンを調整してください。
- 職位表示：職務タイトルの表示/非表示を切り替えます（はい/いいえ）。有効にした場合、職位テキストを入力し、配置を設定し、下マージンを調整します。
- 説明の表示:プロフィールまたは説明の表示/非表示を切り替えます（はい/いいえ）。有効にした場合、説明文を入力し、その配置を設定し、下マージンを調整します。
イメージエリア：
- 形状:チームメンバーの写真に適用する形状を選択します — デフォルト、角丸、円形、またはカスタム（個別の角の半径を制御可能）。
- 画像下余白：画像の下に設定する間隔。
区切り記号:
- 区切り線:装飾線の表示/非表示を切り替える (はい/いいえ)。
- 位置：区切り線の表示位置を選択してください — 「名の下」、 「職位の下」、または「説明の下」。
- 幅：区切り線の幅を設定します。
- スタイル：線のスタイルを選択してください — 実線、点線、または破線。
- 線幅：区切り線の線幅をピクセル単位で設定します。
- 色：区切り線の色を選択してください。
- 区切り線の配置:区切り線の水平方向の配置を設定します — 左、中央、または右。
- 区切り線下余白：区切り線の下に設定する余白。
ソーシャルアイコン：
- ソーシャルアイコン：ソーシャルメディアアイコンの表示/非表示を切り替えます（はい/いいえ）。
- アイコンアイテム：個々のソーシャルリンクを追加、並べ替え、設定します。各アイテムでアイコンを選択し、表示タイトルを入力し、リンク先URLを入力します。「新規アイテムを追加」でアイコンを追加するか、アイテムをドラッグして並べ替えを行います。
- アイコンの幅：ソーシャルアイコンのサイズを設定します。
- アイコンのパディング：各アイコンボタン内の間隔を設定します。
- 形状:アイコンコンテナの形状を選択します — デフォルト、角丸、円形、またはカスタム。
- ソーシャルアイコンの位置合わせ：ソーシャルアイコン行の水平方向の位置合わせを設定します — 左、中央、または右。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、チームメンバーブロックにプリセットデザインを適用できます。利用可能なテンプレートは3種類：ストライプ効果、区切り線、背景です。テンプレートを選択すると即座にスタイルが適用され、その後コンテンツタブと詳細設定タブでさらにカスタマイズできます。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、チームメンバーブロックの外観をカスタマイズできます。
スタイル:
- 名前タイポグラフィ：チームメンバーの名前に対して、フォントファミリー、サイズ、ウェイト、スタイル、行間、文字間隔、大文字小文字の設定を行います。
- 職位表記の書式設定：職務タイトルテキストの書式プロパティを設定します。
- 説明 タイポグラフィ:プロフィールや説明文のタイポグラフィプロパティを設定します。
- 名前色:チームメンバーの名前の色を設定します。
- 職位の色:職務タイトルの色を設定します。
- 説明文の色：説明文のテキストの色を設定します。
- テキストシャドウ：プリセットサイズ（なし、ヘアライン、およびより大きなプリセット）を使用してテキストに影を適用します。
スペース:
- 余白：ブロックの周囲の四辺の外側の間隔を設定します。デスクトップ、タブレット、モバイルそれぞれで独立して制御できます。
- パディング：ブロックラッパー内の四辺すべてに内側の間隔を設定し、デバイスごとの制御を行います。
境界線：
- 境界線のスタイル:なし、実線、点線、破線から選択してください。
- 境界線の幅：上、右、下、左の各境界線の幅を個別に設定します。
- 枠線の色：枠線の色を選択してください。
- 角の丸み:各角ごとにブロックの角を個別に丸めるか、同期トグルを使用して均一な丸みを適用します。
背景：
- 背景スタイル：単色、グラデーション（種類、角度、位置、2つのカラーストップ付き）、または画像背景（位置、繰り返し、サイズ、アタッチメントオプション付き）から選択します。
- 背景の暗転：背景画像の上に不透明度を調整可能なオーバーレイを追加し、テキストの可読性を向上させます。
属性：
- カスタムクラス:ブロックラッパーに1つ以上のカスタムCSSクラスを追加し、対象を絞ったスタイル設定を行います。
- CSS ID:SeedProdはこのブロックに対して一意のCSS IDを自動生成します。カスタムCSSやJavaScriptでブロックを参照する際に使用できます。
- カスタム属性:ブロックラッパー要素にカスタムHTML属性を追加します。各属性をキー|値形式で改行して入力してください。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で表示した際にブロックを非表示にするか切り替えます。
- タブレットで非表示:タブレット画面で表示時にブロックを非表示にするか切り替えます。
- モバイルで非表示:モバイル画面で表示される際にこのブロックを非表示にするか切り替えます。
アニメーション効果：
- スクロール効果：ブロックにスクロール連動アニメーションを適用します。垂直スクロールと水平スクロールのオプションを含み、方向、速度、ビューポートオフセットを制御できます。
- マウス効果：ブロックにマウスの動きに基づく視差効果を適用します。
ステップ4: 変更を保存する
チームメンバーブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
チームメンバーブロックをページに追加できました！デザイン性の高いチーム紹介セクションは信頼性を高め、訪問者がブランドを支えるメンバーとつながる手助けとなります。画像の形状、区切り線のスタイル、背景オプションを自由に試して、洗練されたブランドイメージに合ったチーム紹介ページを作成しましょう。