要素の設定
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Component builderはコンポーネント内の要素をカスタマイズできます。特定の要素ごとにさまざまなオプションが用意されています。
レイアウトとアライメントの調整
レイアウトのカスタマイズは、セクション、カード、コンテナなどの要素の右側パネルにあります。編集しているコンポーネントバージョンに適用されますが、そのコンポーネント内の複数の要素に広がることもあります。例えば、コンテナ要素はスペースやレイアウト設定をそのコンテナ内のすべての子要素に適用することができます。
レイアウトのカスタマイズは以下の設定で行えます:
-
Layouts and alignment - CSS Flexible Box Layoutが提供するすべてのコンテンツの整合ツールを提供します。例えば、Number of columns Auto設定では、子要素を並べて配置するために必要な列数を自動的に決定でき、子要素がスペースを超えて子要素がコンテナに溢れないようにラップを用いて管理します。レイアウト設定は子要素を保持する親要素に適用されます。
-
Dimensions - ピクセル数、パーセンテージ、EMS、REM数で設定可能です。例えば、要素の高さを設定することでコンポーネント内でスクロール可能な領域を作成できます。
-
Spacing - スタイルライブラリであらかじめ定義されたパディング値を適用する。値はいつでも上書き可能であり、タイポグラフィの例と同様に、変更はスタイルライブラリに戻されません。 Sidesは垂直および水平のパディングに同じ数値を素早く適用するショートカットです。 Syncは左、上、下、右のパディングに同じ数値値を素早く適用するショートカットです。
-
Grid sizing - 列数や行数を調整したり、行の高さを変えたりして、セクション内のグリッドの構成を変更する。
画像のサイズと配置の調整
画像のサイズや配置のカスタマイズが可能です。
この設定では、画像に対して以下のプロパティから選択できます:
-
画像WidthとHeightを定義するか、定義された幅に対して高さを計算する方法を示します。
-
以下のサイズ設定方法が利用可能です:
-
Cover背景画像のサイズを調整して容器全体を覆うようにしてください。たとえ画像を伸ばしたり、端の一部を少し切り取ったりしても構いません。
-
Contain背景画像のサイズを調整し、画像が完全に見えるようにし、元のアスペクト比に戻します。
-
Stretch画像のアスペクト比を変えることで、エッジを切ることなくコンテナ全体を覆うように背景画像のサイズを調整します。
-
Crop背景画像のサイズを調整し、元の画像要素のアスペクト比を維持しつつ、コンテナ全体を覆うようにします。
-
-
もしすべてが見える場合、利用可能な空間内で画像を再配置するAlignmentを指定します。
画像をアクセシブルにする
画像にオルトテキストを設定することで、視覚障害のある訪問者がスクリーンリーダーを通じてサイトをよりアクセスしやすくなります。オルトテキストはサイトのSEOを改善することもできます。
代替テキストを設定するには:
-
画像要素を選択します。
-
右側のペインのセクションContentで、Image alternative textをクリックしてください。
-
もしオルトテキストが静的テキストなら、StaticをクリックしてText欄にテキストを入力するか貼り付けてください。
データソースの代替テキストをマッピングするには、Mappedをクリックして、ドロップダウンリストでデータソースを選択し、データパスツリーで該当するプロパティをクリックしてください。