本日は、ホームページ作成サービス「BiNDup」の基本でもありますブロックエディタの中でもレイアウトを司る『ブロックレイアウト』について解説したいと思います。
BiNDupの表現力の要であるブロックレイアウトを理解して自由にデザインしてみましょう。
この記事はエディタモードを前提に記述しております。
ちなみにスマートモードではブロックレイアウトの変更は出来ませんのでご注意ください。
ブロックレイアウトの基本
BiNDupはブロックの組み合わせでページを構成しています。
そのブロックの編集画面をブロックエディタと呼び、そこではテキストや画像などのコンテンツの編集とレイアウトや動きなどを設定しています。
分割パーツと段の関係
一部例外はありますが、ブロックレイアウトは横のカラム分割数を設定するのが主な目的になります。
基本的には分割パーツとオプション（段数）の組み合わせでレイアウトします。
例えば、横に3つ並べたいとしたら以下の様な設定にします。
そうすると以下の様に出力されます。
ちなみにオプション分割数以上の分割パーツが設定されている場合は段落ちして繰り返します。
ブロックレイアウトの種類に関しては後述しますが、先ずはこの基本を押さえておきましょう。
カラム間の間隔
ここではカラム間の余白設定が出来ます。
BiNDupはレスポンシブデザインなので余白を固定値ではなく割合（％）で設定します。
ゼロにすると要素同士が隙間なくくっつきます。
ブロックアニメーション
ブロック毎にスクロールした際の動きを設定出来ます。
注意を引きたい要素などに設定すると効果的ですが、設定し過ぎるとページが重くなるので多用は禁物です。
ブロックアニメーションは専用の記事がありますのでそちらでご確認下さい。
スマホ設定
BiNDupでは、ブロックレイアウトを含めた幾つかの箇所で、PCとスマホそれぞれの設定を行う事が出来ます。
PCは横長、スマホは縦長で見る事が多いので、例えばPCでは3段、スマホでは1段などを使い分ける事が出来ます。
ここは各デバイスで見易くデザインする為にとても大事なポイントなので必ず覚えて下さい。
チェックボックスの設定
チェックボックスの設定をそれぞれ説明します。
スクロール時ブラウザ上部に吸着
スクロールすると本来は画面の外に消えていく処を、固定して表示させる事が出来ます。
初期表示はメニューを下に表示させつつ、スクロールしたら画面上部に固定するなどに使用出来ます。
また、アイディア次第で様々な使い方が出来そうですね。
ちなみに複数設定した場合は、一番上に設定されているブロックのみ適用されます。
このブロックを直前のブロックに重ねる
ここにチェックを入れると該当ブロックの直前のブロックに重ねる事が出来ます。
用途としてはスライドショーのブロックに固定のテキストを配置したい場合などですね。
ただ、PCとスマホで表示調整がシビアになるので、レスポンシブデザインでの使用はあまりオススメしません。
PCではこのブロックを非表示にする
デバイスによってブロックを非表示にする事が出来ます。
例えばスマホだけで見せたい情報がある場合などに有効ですね。
ただ、注意が必要なのはこの機能を用いてPCとスマホそれぞれの専用ブロックを量産してしまうと無駄にページが重くなってしまいます。
あとSEOの評価リスクも高まってしまうので設定箇所は最小限に留めましょう。
各ブロックレイアウトの解説
さて、基本部分の解説が出来たところで今度は各レイアウトの解説に入りたいと思います。
アルバムブロックまでは先ほどの基本に則られていますが、タブ以降は更に固有の設定が入ってきます。
プレーン
最も基本のレイアウトになります。
注意点としては、カラムが段落ちすると表示が崩れてしまうので、段落ちさせたい場合は後述する『目次』を使用しましょう。
左右違い
通常はカラム数を均等幅でレイアウトしますが、『左右違い』は指定した方のカラム幅を広めにレイアウトします。
ここでのオプションは段数ではなく、『右広め』か『左広め』になります。
こちらも段落ちさせると表示崩れします。
使用する場合は、1ブロック内に2カラム分を固定で使いましょう。
このレイアウトを繰り返したい場合は、ブロックを分けてレイアウトしましょう。
ちなみにデフォルトの左右比率は1:2となっています。
この比率自体を調整するにはDressでの設定が必要です。
目次
『目次』と『プレーン』は殆ど同じなのですが、違いは何かと云うと段落ちしてもレイアウトが崩れない点です。
なので、はっきり云ってしまうと基本的に『目次』を使った方が無難です（笑
アルバム
『アルバム』は文字通り写真を並べるのに適しています。
『プレーン』と『目次』は最大段数は5段ですが、『アルバム』は8段（スマホは3段）になります。
その他の特色として、画像のコメントに入力したテキストがロールオーバー時に表示されます。
タブ
タブはメニューをクリックするとコンテンツエリアが切り替わるレイアウトです。
ここから少しルールが変わってきます。
タブの構造は、『段落のスタイル』でタイトルを割り当てた要素がタブメニューに置き換わり、タブメニューの間の要素がコンテンツエリアの内容になります。
オプションでメニュー表示の形式を変更出来ます。
注意点としてはコンテンツエリアで分割パーツが仕様出来ない事です。
アコーディオン
アコーディオンはタブと同様にメニューをクリックする事でコンテンツエリアが開閉するレイアウトです。
設定はタブと同様になります。
フロート
ニュースサイトなどでよく見かけるタイル状にカラムを組み合わせていくレイアウトですね。
基本的には『プレーン』などのレイアウト設定と同様ですが、少しクセがあります。
まず、エリアの横幅の設定に関わらず画面100%に領域が広がります。
オプションは段数設定の他に固定値の設定が可能になります。
領域を限定したい場合は、同じくブロックエディタの『設定』タブ内になる『ブロック内コンテンツの横幅』で制御しましょう。
メガメニュー
最後は更に特殊なメガメニューになります。
メニューのプルダウン内に様々な要素を組み込める機能ですね。
設定方法としては、『タブ』や『アコーディオン』と同じ構造となります。
唯一違うのは、エリア内を分割出来る点です。
分割パーツの数分自動で均等分割されます。
そう考えると『タブ』や『アコーディオン』も同様の仕様になると表現の幅が広がりそうですね。
検討します。
Dressでのブロックレイアウト指定方法
さて、ここからは番外編の上級者向け。
取り敢えず基本を抑えれば大丈夫なので、ここからはDressが分かる方向けの解説です。
Dressの設定時にパーツ選択内に『ブロックスタイル』の項目があるのですが、ブロックレイアウトと連携する事で固有の指定が可能になります。
通常、段落スタイルの『タイトル』のデザイン指定をするとサイト全体の『タイトル』に反映されますが、ブロックレイアウトを含める事によって『目次ブロック』の『タイトル』に指定が出来る様になります。
場合によって『タイトル』のデザインを変えたい時に、『プレーンブロック＞タイトル』と『目次ブロック＞タイトル』で別々の指定が出来るのですね。
少し高度な技術ですが、覚えておくと良いでしょう。
如何でしたか？
BiNDupの基本であるブロックレイアウトを改めておさらいしてみました。
最初は少しとっつきづらいかもしれませんが、覚えるとレイアウトを自由に扱える様になりますので是非マスターしてみて下さい。
POINT
- BiNDupはブロックレイアウトで横の分割レイアウトを制御している
- 分割数はPCとスマホでそれぞれ指定を変えられる
- タブやアコーディオンは指定が異なる事を把握する