画像ブロックを使用すると、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属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示： デスクトップ画面で画像ブロックを非表示にします。
- タブレットで非表示： タブレットデバイスで画像ブロックを非表示にします。
- モバイルで非表示： モバイルデバイスで画像ブロックを非表示にします。
アニメーション効果:
- 表示アニメーション： バウンス、フェードイン、ズームイン、回転インなど、画像ブロックが表示領域に入ったときに再生されるアニメーション効果を選択します。
ステップ5：変更を保存
画像ブロックの設定が完了し、外観のカスタマイズが終わったら、必ず作業内容を保存してください。
ページに画像ブロックを正常に追加しました！画像はランディングページで最もインパクトのある要素の1つです。トーンを設定し、信頼を構築し、注意を向けさせます。テンプレートタブを使用してクイックスタイリングプリセットを利用するか、高度なタブでボーダー、影、回転を微調整して、必要なルックを正確に作成してください。