ソーシャルプロフィールブロックを使用すると、SeedProdの任意のページにリンクされたソーシャルメディアアイコンの行を表示できます。各アイコンは、サポートされているプラットフォーム上のあなたのプロフィールに直接リンクしており、訪問者がウェブ全体であなたをフォローしたり接続したりするための簡単な方法を提供します。このブロックには、12個の既製のスタイルテンプレートが付属しており、Facebook、X（Twitter）、Instagram、LinkedIn、YouTube、TikTok、Pinterest、Discord、WhatsAppなど、20以上のプラットフォームをサポートしています。
既製のテンプレート以外にも、アイコンのスタイル、サイズ、色、間隔、角丸を完全に制御できます。各ソーシャルプロフィールのエントリは、ドラッグアンドドロップで並べ替えたり、複製したり、個別に削除したりできるため、強調したいプラットフォームを正確に維持するのが簡単です。カスタムオプションを使用すると、SeedProdのアイコンライブラリから任意のアイコンを追加し、組み込みリストにないプラットフォーム用に独自のカスタム色とURLを設定することもできます。
ソーシャルプロフィールブロックをページに追加する
以下の手順に従って、SeedProdページにソーシャルプロフィールブロックを追加してください：
ステップ1：ブロックを追加する
デザイン > ブロックの下で、ソーシャルプロフィールブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、ソーシャルプロフィールブロックをクリックして設定を開きます。コンテンツタブのアイコンセクションで、ソーシャルプロフィールのリストを管理し、表示オプションを設定できます。
ソーシャルプロフィールの管理：
- プロフィールタイプ：各エントリの横にあるドロップダウンを使用して、ソーシャルプラットフォームを選択します。サポートされているプラットフォームには、Discord、Email、Facebook、Facebook Messenger、GitHub、IMDb、Instagram、LinkedIn、Medium、Phone、Pinterest、RSS、Slack、Snapchat、SoundCloud、Telegram、TikTok、X（Twitter）、Vimeo、Weibo、WhatsApp、WordPress、YouTube、Customが含まれます。
- URL：エントリのいずれかにある設定の歯車アイコンをクリックして、URLフィールドを展開します。プロフィールページの完全なリンクを入力します（
https://を含めてください）。メールエントリの場合は、メールアドレスを入力します。カスタムエントリの場合は、アイコンライブラリから任意のアイコンを選択し、カスタム色を設定することもできます。 - 並べ替え：ドラッグハンドル（矢印アイコン）を使用してエントリを上下にドラッグし、アイコンの表示順序を変更します。
- 複製 / 削除: いずれかエントリにカーソルを合わせると、クイック管理用の複製および削除ボタンが表示されます。
- 新規共有を追加：リストの下部にある+ 新規共有を追加ボタンをクリックして、別のソーシャルプロフィールエントリを追加します。
表示オプション:
- スタイル：デフォルト（アイコンのみ、背景なし）とスタック（色付きの背景の正方形にアイコン）から選択します。
- サイズ：アイコン全体のサイズを設定します — 小、中、または大。
- 配置：アイコン行の水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルのデバイスごとの配置をサポートします。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、あらかじめ用意されたアイコンスタイルをソーシャルプロファイルブロックにワンクリックで適用できます。フラットな四角いアイコンから、丸みを帯びたピル型、ダークテーマのバリエーションまで、12種類のスタイルテンプレートが用意されています。テンプレートを選択すると、ブロックのアイコンスタイル、サイズ、角丸、カラー設定が選択したデザインに合わせて即座に更新されます。
ステップ3：デザインをカスタマイズする
詳細タブでは、ソーシャルプロファイルブロックの視覚的な外観を微調整できます。
スタイル:
- スタイル：デフォルトとスタックのアイコンスタイルを切り替えます（コンテンツタブの設定と同じ）。
- アイコンカラー：ブロック内のすべてのアイコンに適用される単一の色を設定し、各プラットフォームのデフォルトのブランドカラーを上書きします。
- アイコンサイズ：スライダー（0〜100px）を使用して、アイコンサイズをピクセル単位で微調整します。
- 角丸：スタックスタイルを使用する場合、アイコンの背景の角の半径を調整して、四角形、丸みを帯びた形状、または完全な円形を作成します（0〜100px）。
- アイコンの余白：スタックスタイルを使用する場合、アイコンと背景コンテナの端との間の間隔を制御します（0〜100px）。
- 間隔：行内の各アイコン間の水平方向の間隔を設定します（0〜100px）。
- 影：アイコン要素に影の効果を追加します。プリセットサイズ（なし、細線、小、中、大、特大、超特大）から選択します。
間隔：
- マージン：ソーシャルプロファイルブロックの外側の間隔を制御します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
- パディング：ソーシャルプロファイルブロックの内側の間隔を調整します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID：ソーシャルプロファイルブロックの自動生成された一意の識別子を表示します。このIDはSeedProdによって自動的に作成され、カスタムスタイリングやJavaScriptのターゲット指定に使用できます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性：ブロックのラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例：data-section|social）。
デバイス表示:
- デスクトップで非表示：デスクトップ画面でソーシャルプロファイルブロックを非表示にします。
- タブレットで非表示：タブレットデバイスでソーシャルプロファイルブロックを非表示にします。
- モバイルで非表示：モバイルデバイスでソーシャルプロファイルブロックを非表示にします。
アニメーション効果:
- 表示アニメーション：ソーシャルプロファイルブロックが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、回転インなどがあります。
ステップ4：変更を保存
ソーシャルプロファイルブロックの設定と外観のカスタマイズが完了したら、作業内容を保存してください。
ソーシャルプロフィールブロックをページに正常に追加しました！ 20以上のプラットフォーム、12の既製スタイルテンプレートのサポート、アイコンのサイズ、色、間隔、境界線の半径を完全に制御できるため、このブロックを使用すると、あらゆるデザインに適合するプロフェッショナルなソーシャルメディアストリップを簡単に作成できます。デフォルトスタイルとスタックスタイルを試したり、テンプレートプリセットを探索したり、ドラッグアンドドロップで並べ替えたりして、プロフィールを希望どおりに正確に配置してください。