ブロックエディタ(グーテンベルク)の使い方を紹介するコーナーです。今回は「リストブロック」について説明します。
「リスト」とは箇条書きのことです。何かを列挙するときに使います。
例えば、次のようなものを見たことはありませんか？これが「リスト」です！
「リスト」は早めに覚えるべき基礎的なブロックです。順番的には超必須ブロック３つ(見出し、段落、画像)の次に覚えるべき項目！
「リスト」とは？(初心者向け)
「リスト」の存在を初めて知ったという人に向けて「リスト」の説明をします。
「リスト」は一言でいうと「箇条書き」です。
「リスト」を理解するために もし「リスト」がなかったらかったらどうなるか見てみましょう。段落(P)はすでに勉強しましたね。段落(P)で箇条書きができるか挑戦してみます。
すると下のようになります(左)。それぞれの間が広すぎてなんだかかっこわるいですね。そんな時に使うのが今回紹介する「リスト」です。「リスト」を使うと下のようにスッキリ箇条書きができます！(右)
段落を使うとかっこわるい…
「リスト」を使うと簡単！
リストの使い方１：リストには「順序なし」と「順序付き」の２種類がある
「リスト」には２種類あります。それが「順序なしリスト」と「順序付きリスト」。
違いは何かというと、「並び順」に意味があるか、ないかです。並び順に意味がない場合は「順序なしリスト」を使い、並び順に意味がある場合は「順序付きリスト」を使います。
- 順序なしリスト：並び順に意味がない
- 順序付きリスト：並び順に意味がある
「順序なしリスト」は順番に意味がないときに使う
「順序なしリスト」は並び順に意味がない時に使います。上の例を見てください。順番を入れ替えても意味は通じますよね。このように項目の順番を入れ替えても意味が通じる場合は「順序なしリスト」を用います。
使用例としては「おすすめの◯◯３選」、「こういう人におすすめ！」みたいなもの
「順序なしリスト」は各項目の先頭に・(点)が表示されます。
「順序付きリスト」は順番に意味があるときに使う
一方、並び順に意味がある場合は「順序付きリスト」を使います。上の例を見てください。順番を入れ替えたら意味が成り立たなくなりますよね。このように順番に意味がある場合は「順序付きリスト」を用います。
使用例としては「○○の手順」など何かの手順を説明するときや、「ランキング」みたいなもの。
「順序付きリスト」は各項目の先頭に数字が表示されます。
英語でいうと
英語で考えるとわかりやすいです。「順序なしリスト」は英語で"unordered list(順番がないリスト)"、「順序付きリスト」は"ordered list(順序付きリスト)です。HTMLタグでは頭文字をとってそれぞれ"ul"、"ol"と記されます。
まとめ
| 順序なしリスト | 順序付きリスト | |
|---|---|---|
| 使い分け | 「並び順」に意味がない | 「並び順」に意味がある |
| 先頭 | ・(コンマ) | 1,2,3...(番号) |
| 英語で | unordered list | ordered list |
| HTMLタグ | ul | ol |
ブロックエディタでのリストブロックの使い方手順
それではブロックエディタで実際にリストブロックを使ってみましょう。
リストブロックの使い方を説明します。
リストブロックを呼び出す
まずはリストブロックを呼び出します。
記事の編集画面に移動してください。中央のパネルでリストブロックを出したい場所をクリックします⑴。その状態で左上のブロックインサーターボタンを押します⑵。そしてパネル内にあるリストブロックを選択しましょう⑶。リストブロックは一番上にあります。
- リストブロックを出したい場所をクリック
- 左上のブロックインサーターボタンをクリック
- リストブロックを選択
リストブロックを選択すると中央の編集画面にリストブロックが追加されます。
これでリストブロックの呼び出しが完了しました。
リストの中身を入力する
リストの内容を記入しましょう。
リストの中身を入力してください。１回エンターキーを押せば次の項目に移動します。連続で２回エンターキーを押せばリストの編集は終了します。
練習：「親要素」を選択できるようになる！
リストブロックを初めて操作するときにつまずくポイントがあります。それが「親要素」の選択です。これができないと「順序なし」、「順序付き」の選択やスタイルの変更などできないので できるようになっておきましょう！
リストブロック(親要素)
リスト項目１(子要素)
リスト項目２(子要素)
リスト項目３(子要素)
リストブロックは２層になっており(リスト項目が複数 集まってリストブロックを形成しています)、「順序なし」、「順序付き」の選択やスタイルの変更をしたい場合はリストブロックの親要素を選択しないとできません。ここで問題なのがリストブロックをクリックしても親要素が選択できないということ。必ず各リスト項目(子要素)が選択されてしまいます。
じゃあどうするかというと、面倒ですが２段階で親要素を選択します。まず、リストブロックをクリックしてリスト項目(子要素)を選択します。次に、ツールバーの一番左にある親ブロックを選択：リストをクリックして親ブロックを選択します。
- リストブロックをクリックしてリスト項目(子要素)を選択
- ツールバーの一番左：親ブロックを選択：リストをクリックして親ブロックを選択
「順序なしリスト」か「順序付きリスト」か選択する
「順序なしリスト」か「順序付きリスト」かリストの種類を選びます。
リストブロックの親要素を選択した状態で上のツールバーを見てください。との記号があると思います。左のが「順序なしリスト」。右のが「順序付きリスト」です。使いたい方を選んでください(最初は「順序なし」になっています)。
- リストブロックをクリック
- ツールバーの一番左：親ブロックを選択：リストをクリックして親ブロックを選択
- 順序なしリスト、順序付きリストを選択
スタイルを変える
スタイル(デザイン)を変えます。やり方はこんな感じ↓
- 編集中のリストブロックをクリック
- ツールバーの一番左：親ブロックを選択：リストをクリックして親ブロックを選択
- 右上の 設定ボタンを押す
- パネルをブロックに切り替える
- パネルをスタイル"に切り替える
- 好きなスタイルを選択する
選べるスタイルは利用中のテーマで異なります。
「リストブロック」の基本的な使い方はここまでです。初心者の人はここまでで十分です。