ブロックレイアウトのフロートを使う

ブロックレイアウトのフロートを使用すると、ブラウザのサイズが変更された場合に、そのブロック内に設置した画像の配置が自動的に調節されます。ここでは、ブロック内に複数の写真を配置する場合の設定方法について説明します。

ブロックレイアウトのフロートはレスポンシブ形式のサイトでのみ使用できます。

画像を選択する

サイトエディタの〈ページを編集する〉をクリックします。
ブロックレイアウトのフロートを使う

編集したいブロックの〈編集〉をクリックします。

ブロックレイアウトのフロートを使う

ブロックエディタで〈画像を選択〉をクリックします。

ブロックレイアウトのフロートを使う

〈写真〉をクリックし[1]、挿入する写真を選択して〈選択〉をクリックします[2]。
ここでは、写真を4点挿入します。

ブロックレイアウトのフロートを使う

段落を分割する

画像の間にカーソルを設定し[1]、〈分割〉アイコンをクリックします[2]。

ブロックレイアウトのフロートを使う

画像の段落が分割されたことを確認します。

ブロックレイアウトのフロートを使う

フロートの設定を行う

〈設定〉をクリックし[1]、「ブロックレイアウト」で〈フロート〉を選択して[2]、〈適用〉をクリックします[3]。

ブロックレイアウトのフロートを使う

プレビューで確認する

サイトエディタで〈プレビュー〉をクリックします。

ブロックレイアウトのフロートを使う
プレビューを表示するのは、サイト内の全ページか、表示中のページのみかを選択しますので、ここでは、〈はい〉をクリックします。
ブロックレイアウトのフロートを使う

全画面を表示して写真の配置を確認します。

ブロックレイアウトのフロートを使う

縮小した画面で写真の配置を確認します。

ブロックレイアウトのフロートを使う