スマホ表示の調整も簡単。テキストと画像が左右交互になる入れ子レイアウト

ホームページ作成サービスBiNDupの編集画面「ブロックエディタ」の使い勝手が向上しました。
今回は、左右交互にコンテンツをレイアウトできる入れ子のデザインを紹介したいと思います。スマホの表示順入れ替え機能を利用した使い方も解説します。

入れ子レイアウトとは

Webのデザインレイアウトの中ではメジャーな手法ですが、写真とテキストの2カラム構成のレイアウトを交互に配置するものです。
同じレイアウトが続くと単調になるのですが、写真が交互に配置されるのでリズム感が生まれますね。

レスポンシブ化による弊害

レスポンシブ化によってPCとスマホでの表示カラム数を変更できる様になりましたが、入れ子レイアウトを行うとスマホでの表示順に不備が出てしまうことがありました。
通常PCでは左から右に向かって情報を構成し、それがスマホで1カラムに変換されると上から下に構成される訳ですが、従来は、入れ子にする事によってスマホでの表示順がばらついてしまいます。

スマホで写真→テキスト→写真→テキストを繰り返し表示するには、CSSを使ったDressでの設定になるので難しくなってしまい、段々と入れ子レイアウトは選択肢から外れていってしまいました。

アップデートにより入れ子レイアウトが設定可能に

それを、BiNDupのブロックエディタが新しくなったことで解消出来る様になりました。
今までスマホ表示は有無を云わさず左から順に表示させておりましたが、新たにどちらのカラムを先に配置するかが指定出来る様になったのです。
それでは設定方法を見て行きましょう。

1. 入れ子レイアウトを設定する

先ずは通常通りPC表示での入れ子レイアウトを行いましょう。

ここで大事なのはブロックレイアウトを「左右違いブロック」に指定すると云う事です。
今回の設定は「左右違いブロック」のみで行えると云う事を忘れない様にしましょう。

2. カラム幅を調整

左右違いブロックなのでデフォルトだと左右のレイアウト比率が違っています。
スライダーをセンターにして等分にしましょう。

3. スマホ設定でどちらのカラムを先に表示するか指定

スマホタブをクリックすると右側に『表示順』のプルダウンが表示されますので、どちらのカラムを先に表示するかを指定します。
スマホで1カラムにした時にはテキスト→写真の順序が見易いと思うので下記の様に設定します。
1段目ブロック：偶数カラムを上段に
2段目ブロック：奇数カラムを上段に
3段目ブロック：偶数カラムを上段に

以上で設定完了です。

これでPCで入れ子レイアウトを表現しつつスマホでも情報の順序を正しく配置する事が出来ました。

まとめ

如何でしたか？
構造の理解が出来ればそんなに難しくは無いですね。
今まではスマホの表示順に悩まされましたが、今回のアップデートで入れ子レイアウトが可能になりました。
スマホでの表示順を制御出来るので他にも面白いアイディアが出てくるかもしれませんね。
是非色々試してみて下さい。

無料でBiNDupを使ってみるBiNDの制作事例を見る