画像を配置する
画像は、「画像（サイズ指定）」ブロックで配置します。基本的には、アスペクト比が16：9（1040px x 585px）の横長の画像を使用してください。縦長や正方形など、その他の比率の画像は、必要に応じて使用してください。
※画像を連続して4枚以上並べる場合は、「スライダー」ブロックを使用してください。
代替テキストとキャプション
【注意事項】
ウェブアクセシビリティの観点から、挿入オプションで「代替テキスト」か「キャプション」を必ず記載してください。
代替テキスト
「代替テキスト」は、ウェブページ上には表示されませんが、alt属性として、ページ読み上げソフトなどで利用されます。
キャプション
「キャプション」は、画像の下部に左揃えで、表示されます。
表示サイズと配置
設定で、画像の表示サイズや配置を変更することができます。
サイズ
「サイズ」オプションで、PC版で表示する画像のサイズを選択できます。表示サイズは、画面の横幅に対して、割合で指定します。
※SP版では、どの指定でも横幅いっぱいのサイズで表示されます。
- 100％
-
画面の横幅いっぱいのサイズで表示します。
- 50%
-
画面の横幅の半分のサイズで表示します。
- 33％
-
画面の横幅の三分の一サイズで表示します。
- 25％
-
画面の横幅の四分の一サイズで表示します。
配置
「配置」オプションで、PC版で表示する画像の位置を選択できます。
- 中央
-
画面の横幅に対して、中央揃えで表示します。
- 左
-
画面の横幅に対して、左寄せで表示します。
- 右
-
画面の横幅に対して、右寄せで表示します。
SP版表示時に両側にスペース
SP版ではどの画像サイズ、配置を選択しても横幅いっぱいの中央揃えで表示されますが、「スペースあり」を選択すると、SP版で画像の両側にスペースが追加されます。
- スペースなし
-
SP版では、横幅いっぱいの中央揃えで表示されます。
- スペースあり
-
SP版では、画像の両側にスペースが追加され、中央揃えで表示されます。
縦長の画像で、画面の表示領域を小さくしたい場合などに使用してください。
各設定による表示の違い
サイズ「100%」配置「中央」SP版表示時に両側にスペース「スペースなし」
サイズ「50%」配置「中央」SP版表示時に両側にスペース「スペースなし」
サイズ「33%」配置「中央」SP版表示時に両側にスペース「スペースなし」
サイズ「25%」配置「中央」SP版表示時に両側にスペース「スペースなし」
サイズ「50%」配置「左」SP版表示時に両側にスペース「スペースなし」
サイズ「50%」配置「左」SP版表示時に両側にスペース「スペースあり」
サイズ「50%」配置「右」SP版表示時に両側にスペース「スペースなし」（縦長画像の場合）
サイズ「50%」配置「右」SP版表示時に両側にスペース「スペースあり」（縦長画像の場合）
一行に複数の画像を並べる（3枚以内の場合）
一行に複数の画像を並べたい場合は、まず「カラム」ブロックを使用して、カラムの中に画像を配置します。
「SP版表示時にカラム維持」オプションで、SP版でもPC版と同じカラムにするか選択できます。初期設定では、「維持しない」になっています。
一行に2枚並べる
「カラム」ブロックで、レイアウト「1:1」を選択して、2カラムを設定し、各カラム内に「画像（サイズ指定）」ブロックを追加します。
一行に3枚並べる
「カラム」ブロックで、レイアウト「1:1:1（3カラムを別指定）」を選択して、「3カラム」を設定し、各カラム内に「画像（サイズ指定）」ブロックを追加します。
※3カラムの指定は、別途カラム変更のラジオボタンを使用します。カラムを変更するボタンは「ブロックを追加」欄の左上あたりを選択すると表示されます。初期状態では隠れているので、注意してください。
一行に2枚並べる（SP版表示時にカラム維持「維持する」）
SP版表示時にカラム維持「維持する」を選択すると、SP版でもPC版と同じカラム配置になります。
「カラム」ブロックの設定方法について
「カラム」ブロックの設定方法について詳しくは、レイアウトを設定するを確認してください。
複数の画像を並べる（4枚以上の場合）
4枚以上の画像を並べる場合は、「スライダー」ブロックを使用してください。
※スライダーに配置する画像には、なるべく同じサイズ比のものを設定してください。横長、縦長が混在すると、スライダーの表示サイズが凸凹します。
スライダー
スライダー（キャプションあり）
-
キャプション -
キャプション -
キャプション -
キャプション
画像にリンクを設定する
画像にリンクを設定する場合は、リンクを設定する画像ブロックの左上をクリックするなどして表示される「リンクボタン」を選択し、「リンク先URL」などを入力してください。「タイトル」と「ターゲット属性」はリンク先の種類に応じて、設定が必要です。
リンクの設定項目の説明
- リンク先URL
-
リンク先のURLを入力します。
- タイトル
-
リンク先がサイト内のページの場合、なにも記載しません。
リンク先が外部サイトやPDFなどの文書ファイルの場合、「別ウィンドウで開きます」と入力します。
- ターゲット属性
-
リンク先がサイト内のページの場合、「なし」を選択します。
リンク先が外部サイトやPDFなどの文書ファイルの場合、「新規ウィンドウ」を選択します。
リンク先が、外部サイトやPDFなどの文書ファイルの場合は、タイトルに「別ウィンドウで開きます」と入力し、ターゲット属性を「新規ウィンドウ」にしてください。
【注意事項】
画像リンクで設定する「タイトル」は、別ウィンドウで開く際に、音声読み上げソフトでの読み上げの際に使用されるので、ウェブアクセシビリティ上必要です。
スクリーンリーダーへの配慮としては、画像の挿入時に設定するalt属性とリンク先の情報が関連付けられることが望ましいです。
例えば、外部ページのgoogleフォームへの誘導バナーを設置する場合は、
「代替テキスト（alt属性）」に、「googleフォームのバナー」と記載し、「タイトル」に「別ウィンドウで開きます」「ターゲット属性」を「新規ウィンドウ」と設定します。
こうすることで、「リンク、イメージ、googleのフォームバナー、別ウィンドウで開きます。」と読み上げられるようになります。
リンクを設定した画像の例
次の画像には、リンクを設定しています。リンクは、スライダー内の画像にも設定できます。
画像を差し替える
配置した画像を差し替える場合は、差し替え対象の画像ブロックの左上をクリックするなどして表示される「編集ボタン」を選択し、差し替える画像を選択します。
代替テキストを変更する場合も「編集ボタン」で行います。