アイコンブロックを使用すると、SeedProdの任意のページに単一の拡大縮小可能なアイコンを追加できます。数千種類のFont Awesomeアイコンを利用できるため、ソーシャルメディアアイコン、方向を示す矢印、機能インジケーター、装飾的なアクセントなど、コンテンツをサポートする視覚的シンボルを素早く配置できます。
各アイコンはサイズ変更、色変更、配置調整が可能で、任意のURLへのリンク設定も選択できます。これにより、ボタン、機能一覧、行動喚起など、多様な用途に対応できる汎用性の高い構成要素となります。
ページにアイコンブロックを追加する
SeedProdページにアイコンブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下にあるアイコンブロックを、ページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、アイコンブロックをクリックして設定を開きます。「コンテンツ」タブで、アイコンの外観とリンクを設定します。
アイコン:
- アイコン：アイコンピッカーをクリックして、数千種類ある利用可能なFont Awesomeアイコンから閲覧・選択してください。キーワードで検索すれば、必要なアイコンを素早く見つけることができます。
- 配置:アイコンのセクション内での水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとに異なる値をサポートします。
- 色:カラーピッカーを使用してアイコンの色を設定します。
- サイズ:スライダーを使用して、アイコンのサイズを10～150ピクセルで設定します。
- リンク:アイコンをクリック可能なリンクにする場合は、任意でURLを入力してください。リンクフィールドの横にある設定アイコンをクリックすると、追加のリンクオプションが表示されます。
- 新しいウィンドウで開く:このオプションを選択すると、リンク先のURLが新しいブラウザタブで開かれます。
- ノーフォロー: このオプションをチェックすると、
rel="nofollow"リンクに属性を付与し、検索エンジンにリンクの価値をリンク先へ渡さないよう指示する。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、アイコンブロックの影のスタイルと間隔をカスタマイズできます。
スタイル:
- テキストシャドウ：アイコンに影効果を追加します。アイコンに奥行きと視覚的な強調を与えるため、なし、ヘアライン、小、中、大、特大、2倍大から選択してください。
スペース:
- マージン:アイコンブロックの周囲の外側スペース（上、右、下、左）を制御します。デスクトップ、タブレット、モバイルごとにデバイス単位の値をサポートします。
- パディング：アイコンブロック内の内側余白（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルごとに異なる値を設定できます。
属性：
- CSS ID:アイコンブロックの自動生成された一意の識別子を表示します。SeedProdによって自動的に作成され、カスタムスタイリングやJavaScriptのターゲット指定に使用されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。
デバイスの可視性:
- デスクトップに非表示:デスクトップ画面上のアイコンブロックを非表示にします。
- タブレットで非表示:タブレット端末でアイコンブロックを非表示にします。
- モバイルで非表示:モバイル端末ではアイコンブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：アイコンブロックが表示される際に再生されるアニメーション効果を選択します。バウンス、フェードイン、ズームイン、回転インなど、多数の効果が用意されています。
ステップ4: 変更を保存する
アイコンブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにアイコンブロックを追加できました！アイコンはシンプルでありながら強力な手段で、コンテンツに視覚的な明瞭さを加えます。視線を誘導し、意味を強化し、ページをより洗練された印象にします。さまざまなアイコン、サイズ、色を試して、デザインに最適な組み合わせを見つけてください。