今回はNotionを使ってブロックを横に並べる方法を解説します！
実は...僕結構悩みました...これ...w
同じく悩んでいる人も多いのでは...?
っというわけで、やっていきましょう！
やりたいこと
今回は自分でページを作っていく上でいい感じに左と右に、複数並列に並べて表示します。
こんな感じです。
ここにはTechNews、BusinessNews(typo許してｗ)、GoodItemsと三つ並んでいます。
こんな感じで画面中のブロックを横に並べます。（ダークモードなんで黒くなってます！
また、それぞれにpage(クリックすると別ページが開くもの）だけでなく、他のブロックを入れて使うこともできます。
こんな感じです。
内容は超適当ですが...w
こんな感じで色々カスタマイズできるようになります！
見栄えが悪いですが、こんなこともできます。
Headingブロックを作る
まずはNotionのHeadingブロックを複数作ります。
個人的なオススメはHeading 2ブロックなのでこれを並べます。
(用途によって適宜ブロックの種類を変えてください。)
追加の方法としては入力待機画面で"/he"と選んで上下キーで選択、あるいは"/he2"でいっぱつで選択できます。
マウスで選択するなら適当な箇所でクリックをして入力待機状態で入力箇所の左側に出る"+"ボタンから探して追加します。
ではこれを二つ追加します。
こんな感じです。
作ったブロックを動かす
さて、それでは早速並べましょう！
つくったブロックにカーソルを合わせると左の方へ"六つの点が並んだマーク"が出てきます。
そこをドラッグ（クリックしたまま動かす）することでうごかすことができます。
さて、ここから結構つまづいてしまったのですが...w（筆者はしばらくの間さっぱりわかりませんでしたｗ
移す場所なんですが、並べたい元のやつ（つくったやつ１）の右側に持ってくるだけではだめなのです。
なぜか青い帯が作ったやつ1の下に配置されるように判定されているのがわかります...
これは、つくったやつ１のブロックはページ横幅いっぱいに取られているからこうなってしまうんですね。
なので、横幅いっぱいの右端にドラッグして持っていきます。
すると、ちっちゃいですが、右端に縦の帯が見えますね。
これで右に判定されるようになりました。
そして配置すると...
いい感じに二分されて配置されました！
下線をつける
さて、次に下線をつけます。
これは別になくてもいいんですが、あったほうがいい感じにはなりますので！
やりかたは簡単です。
先ほど分けたつくったやつ１のすぐ下に新しくDividerブロックを作ります。
つくったやつ１にカーソルを合わせ、+ボタンを押します。
するとつくったやつ１のすぐ下に入力欄が追加されます。
そしてその入力欄に"/div"と入力するか、+ボタンでDividerを選択します。
すると、いい感じに追加されます。
おなじくつくったやつ２の下にもつけるとさらにいい感じになります。
もしも下線が区切りなく全体に着いてしまう場合...
場合によってはこうなってしまう人がいるかもしれないです...
これは下にあるブロックが分割できていないためにこうなってしまっています。
なので、ちゃんとつくったやつ１と同じように分割します。
んー・・・正確には分割というより、つくったやつ１と同じ大きさに縮小するって感じでしょう。
全体に広がってしまっているdividerをドラッグして、つくったやつ1の下に配置されるようにドラッグします。
すると長さが半分になりつくったやつ１の下だけに下線がつくはずです。
あとはつくったやつ２に複製してくっつけてあげればOKです。
複製したらすぐ下に同じdivideができるので、先ほどと同様にドラッグして、こんどはつくったやつ2の下へ持っていきましょう。
まとめ
さて、今回はブロックを横に並べる方法をみてきました。
これだけで大分カスタマイズ性UPする気がしますね...!
解説では見出し部分のみですが、同様に様々な要素を下線の＋ボタンから追加していけば中身の部分も作れるはずです。
是非皆さんもいい感じにカスタマイズして自分だけのページ、作っていきましょう！
それでわ！