てくてくテック

【Notion】Toggle Listの使い方!

たかぽん
はいどーも!

たかぽんです!

今回はNotionのToggle Listの使い方をみていこうと思います!

これが使えるだけでだいぶんページの整理が楽になるので、これを機に完璧にマスターしましょう!

Toggle Listとは?

さて、いきなりですが、"Toggle"の意味ってご存知ですか...?w

ちなみに僕は知りませんw

ので、調べましたw

トグル、留めくぎ、留木、〔ダッフルコートなどの〕ボタン

英辞郎

ん...うぅん...?

いまいちピンとこないですね...w

to switch a feature on a computer on and off by pressing the same button or key

Cambridge Dictionary

ふむふむ!

簡単に訳すと、”なんらかのボタンやキーを押すことでON, OFFを切り替えること”みたいです。主に計算機系でそう言った意味合いで使われているようですね...!

理解できた気がします...!

ではそれを元にtoggle listの例をみてみます!

トグルリストの例1
トグルリストの例2

さて、二つ例をあげたのですが実はこのトグルリスト、”リストの中身を表示、非表示にすることができるリスト”

なんですね。

つまり、先ほどの英訳的に行くと、表示(ON)と非表示(OFF)を切り替えることができるんです。

ちなみに、その考えから行くと、ここでいう"Toggle"は"左の三角形ボタンで要素の表示非表示を切り替えること"ですね。

三角形のマークが横向きの時は要素非表示(OFF)、下向きの時は要素表示(ON)といった具合です。

こうすることで数がとても多いリストをページに入れたい場合でもスリムに書くことができます。

全て表示時はページを超えてしまうかもしれませんが、やっぱりpageひとつで一目で全ての要素が見れた方が安心します...w(僕だけですかね?w

わざわざページスクロールしたり、別ページに飛んだりなんてのもできるだけ少なくしたいですしね!

そんな感じで使っていけるのがこのトグルリストです!

それでは簡単な使い方をみていきましょう!

Toggle Listの使い方

さて、このToggle Listですが、基本的な要素で使い方もそんなに難しくないです!

といったことを解説していこうと思います!

Toggle Listの追加

まずはリストを追加してみます。

他の要素と同じで、"+"ボタンから探して追加するか、コマンドに"/tog"と入力します。

ちなみに"/to"だとtodo Listと被ってしまうので、コマンドなら"/tog"での検索をオススメします。

+ボタンで追加
"/tog"で検索
"/to"だとTo-do Listが先にヒットしてしまう

あとはEnterなりクリックなりで追加すればOKです!

toggle listが追加された

子要素(中身)を追加する

さて、ではさっき作ったtoggleの入力欄に適当な文字を入れます。

今回はわかりやすいように"親トグル"としておきます

親トグルと名前をつけた

名前をつけたら、左側にある"右三角形"をクリックします。

すると、三角形が下向きになり、"Empty toggle. Click or drop blocks inside"と表示され、クリック、ブロック(要素)追加を促されます。

この中に書いたものが子トグルになります。

今回はそのままクリックして"子トグル"としておきます。

子トグルを追加した

追加できたら、今度は下三角形を押します。

すると...?

子トグルが隠れた

こんな感じに収納できます!

また、子トグルは1つだけでなく、複数追加できます。

複数追加したい時は再度トグルを開いて、子トグルの後ろにカーソルを持っていきます。

子トグルの後ろにカーソルがある

この状態でEnterを押すことで要素を追加することができます。

Enterを押した状態

この際、先ほど(Empty toggle...)とは違い、通常の入力を促す文章(Type...)が表示されますが、ちゃんと子トグルになっているので安心してください。

もしも、子トグルになっとならんぞ!っていう方は、再度子トグルの末尾にカーソルを合わせて要素を作り直せばうまく行くと思います。

子トグルを複数追加できた

もちろん、これも三角形を押すと非表示になります。

他の要素と組み合わせる

さて、さきほど少しかじったんですが、実は他のブロックを子トグルに入れることもできるんです!

例えばこんな感じです。

いろんな要素を入れれる

方法は簡単で、子トグルの追加時に他の要素の追加(大抵、+ボタン、あるいはコマンドで追加)をすればOKです。

一度ある要素を追加するとEnterで子トグルを作るときにその要素になります。

それを変えたい場合は要素の左側の点6つのマークから"turn into ..."で好きな要素にすればOKです。

6つの点のボタンをおしてturn intoを選択

一旦バックスペースで要素を削除して追加し直してもOKです。

どうです?簡単ですよね!

動画解説

https://tektektech.com/wp-content/uploads/2019/09/ss-3.mov

まとめ

今回はトグルリストをみてきました!

要素の表示非表示がとても簡単に導入できましたね。

使うのは簡単なのに組み合わせ次第ではとても多彩にページを組み立てることができるのでオススメの要素です!

ただ、逆に使いすぎるとどのトグルだっけ〜?とか、確認するたびに開かないといけなくなってしまうので、リストの中身が多くなりがちだったり、ここぞ!というときに使いましょう!

用法用量を守って最高のページを作っていきましょう!

それでわ!

モバイルバージョンを終了