イメージブロックを使用すると、SeedProdのどのページにも画像を追加できます。このブロックでは、メディアライブラリからの画像アップロード、直接URLの入力、AI生成画像の使用をサポートしており、ページ用のビジュアル素材を柔軟に調達できます。
画像を表示するだけでなく、このブロックにはリンクオプション、画像サイズ調整機能、枠線のスタイル設定、影効果、回転機能が含まれており、あらゆるレイアウトに対応する完全な機能を備えた画像要素となっています。
ページへの画像ブロックの追加
SeedProdページに画像ブロックを追加するには、次の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下にある画像ブロックを、ページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、画像ブロックをクリックして設定を開きます。コンテンツタブで、画像のソース、サイズ、配置、リンクを設定します。
画像：
- 画像：WordPressメディアライブラリから画像をアップロードまたは選択します。このブロックには、OpenAIを利用してエディターから直接画像を生成するAI画像生成オプションも含まれています。
- 画像ソース:画像の直接URLを手動で入力するか、動的タグコントロールを使用してカスタムフィールド値などの動的メディアソースを取得します。
- 代替テキスト：アクセシビリティとSEOを向上させるため、画像の説明的な代替テキストを入力してください。
- 画像サイズ：画像の幅と高さをピクセル（px）またはパーセント（%）で設定します。どちらかのフィールドを空白のままにすると、画像の自然な縦横比が維持されます。
- 配置:画像をセクション内で水平方向に配置します — 左、中央、または右。デスクトップ、タブレット、モバイル向けにデバイスごとの値をサポートします。
- リンクタイプ：画像をクリックした際の動作を選択します —カスタムリンクは指定したURLを開き、メディア – ライトボックスはオーバーレイ形式のライトボックスでフルサイズ画像を開きます。
- リンク：画像リンクの宛先URLを入力してください（カスタムリンクを選択時に表示）。設定アイコンをクリックすると追加のリンクオプションが表示されます。
- 新しいウィンドウで開く:このオプションを選択すると、リンク先のURLが新しいブラウザタブで開かれます。
- ノーフォロー: このオプションをチェックすると、
rel="nofollow"リンクに属性を付与し、検索エンジンにリンクの価値をリンク先へ渡さないよう指示する。
ステップ3: テンプレートを選択する（任意）
テンプレートタブでは、あらかじめデザインされた画像スタイルのプリセットを選択できます。テンプレートのサムネイルをクリックするだけで、画像に枠線、影、スタイル設定の組み合わせを即座に適用できます。これにより、各スタイルオプションを手動で設定することなく、画像に洗練された統一感のある見た目を素早く与えることが可能です。
ステップ4: デザインのカスタマイズ
[詳細設定]タブでは、画像ブロックの外観や間隔をカスタマイズできます。
スタイル:
- オブジェクトのフィット:高さが指定された際に画像がコンテナをどのように埋めるかを選択します — 埋め込み、なし、カバー、または収める。このオプションは高さ値が設定されている場合にのみ表示されます。
- 影：画像の背後にドロップシャドウを追加します。「なし」「ヘアライン」「小」「中」「大」「特大」「超特大」から選択してください。
- 画像の回転:スライダーを使用して画像を0度から360度まで回転させます。
- 画像枠線：画像の周囲に枠線を追加します。枠線のスタイル（実線、点線、破線）、枠線の色、枠線の幅（上、右、下、左を個別に設定）、角を丸めるための枠線の角丸半径を設定します。単位はpxまたは%から選択可能です。
スペース:
- マージン:画像ブロックの周囲の外側スペース（上、右、下、左）を制御します。デスクトップ、タブレット、モバイル向けにデバイスごとの値をサポートします。
- パディング：画像ブロック内の内側の間隔（上、右、下、左）を調整します。デスクトップ、タブレット、モバイル向けにデバイスごとの値をサポートします。
属性：
- CSS ID:イメージブロック用にSeedProdが自動生成した一意の識別子を表示します。カスタムスタイリングやJavaScriptのターゲット指定に使用されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で画像ブロックを非表示にします。
- タブレットで非表示:タブレット端末で画像ブロックを非表示にします。
- モバイルで非表示:モバイル端末で画像ブロックを非表示にします。
アニメーション効果：
- 表示アニメーション:画像ブロックが表示領域にスクロールインする際に再生するアニメーション効果を選択します。バウンス、フェードイン、ズームイン、回転インなど、多数の効果が用意されています。
ステップ5: 変更を保存する
イメージブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページに画像ブロックを追加できました！画像はランディングページで最も効果的な要素の一つです。トーンを設定し、信頼を築き、注目を集めます。テンプレートタブで素早くスタイルを適用するか、詳細設定タブで枠線、影、回転を微調整し、理想の見た目を実現しましょう。