Imageエレメントの追加.
カラムいっぱいに表示され、画面サイズに合わせて拡大縮小する写真やイラストを追加します。
画像の追加
ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
- カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Imageをクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
- 画像の指定はImageでSelect Imageをクリックします。Media browserで必要に応じて名前で絞り込み、写真にチェックを付けてInsert selectedをクリックします。
- 見出しSEOをクリックして展開します。Alt attributeのテキストを、写真の短い説明に書き換えます。
- ダイアログのSaveをクリックします。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。
表示内容
初期値のImage widthは100%です。スクリーンリーダーはaltテキストを読み上げます。拡大縮小の確認には、View modeをPreviewにしてブラウザーウィンドウを狭めます。保存して公開すると、訪問者に変更内容が表示されます。
画像の設定
エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。
- Image: サイトのメディアまたはファイルブラウザーから画像を選ぶか、ファイルをアップロードするか、外部URLを貼り付けます。
- Image width:
100%や300pxのようなCSS幅。初期値は100%です。 - Image height:
400pxのような固定の高さ。写真の縦横比を保つには空にします。 - Image link: 画像をクリック可能にします。URLを入力するか、ページを選びます。
- Image link target: Same windowまたはNew window。リンクを追加すると表示されます。
- Alt attribute: SEOセクションにある、スクリーンリーダーと検索エンジン向けの説明。
- Title attribute: SEOセクションにある、カーソルを合わせるとツールチップで表示される補足情報。
画像の読み込みとページ速度
DXPR Builderは新しい画像の読み込みを自動で管理し、ページを高速に保つとともにコンテンツのずれを防ぎます。ページ上部やタブ、カルーセル、マーキー内の画像はすぐ表示できる状態に保たれます。下の方の画像は、訪問者のスクロールに合わせて読み込めます。
画像はメディアライブラリー、アップロードファイル、外部URLから使えます。DXPR Builderが適切な表示領域を確保できるよう、エディターで画像の読み込みが終わってから保存します。画像を差し替えても、選んだ表示サイズは変わらず、寸法だけが更新されます。
サイトにすでにある画像は自動では更新されません。ページ速度は画像ファイルのサイズや他のコンテンツにも左右されます。公開ページを狭い画面と広い画面の両方で確認します。
表示されない場合
- ContentタブにImageがない。 ユーザープロファイルで非表示になっています。管理者にUser Profilesでの有効化を依頼してください。
- 再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
- 画像エレメントが空になっている。 Imageフィールドに画像が設定されていません。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開いてSelect Imageをクリックします。
- 画像なしアイコンが表示される。 メディアライブラリーでファイルが削除または移動されています。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開き、選択を外して新しい画像を選びます。
- 画像が引き伸ばされたりつぶれたりしている。 Image widthとImage heightに、写真と合わない固定値が入っています。Image heightを空にして縦横比を戻します。
次のステップ
Styleタブで画像の間隔や背景を変更します。