メディアとテキスト＆カラムを使用してグリッドレイアウトを作成

水平垂直を意識したレイアウトを作成します。SPでは同じレイアウトになるように作成します。メディアとテキストはPCで左右上下で画像、テキストを入れ替えてもSPで見やすいように画像が上、テキストが下になります。これを利用して、PCで単調にならないようなデザインを作成し、画面の小さいSPでは、見やすいレイアウトにします。今回は画面全体広く利用してレイアウトを作成しました。商品は、上段、中段、下段とブロックを3つに分けて作成しています。まず、上段はメディアとテキストを横で利用しています。左にテキスト、右に画像をレイアウトしています。左の茶葉の写真は、20%40%20%の3カラムを作成し真ん中のカラムに写真を入れます。横長の写真の場合、正方形に切り抜きます。写真をクリックし、上のバーから切り抜きマークを選択。「縦横比」をクリックし、「正方形」を選択し、トリミングします。必要に応じて「ズーム」を利用して画像を拡大します。右サイドバーのブロック＞スタイルから「角丸」を選択すると画像が正円になります。詳細ページボタンは左のサイドバーからブロック＞デザイン＞ボタンをクリックし、文字を入力します。今回詳細ページを作成していないので、リンクも指定していません。