サポートに戻る コンテンツとメディア ブロック テキストブロック リストブロック

リストブロック

リストブロックを使用すると、番号付きリストや箇条書きリストでコンテンツを整理することができます。

リストブロックを追加する

リストブロックを追加するには、「+」ブロック挿入アイコンをクリックして「リスト」を検索します。それをクリックして、投稿またはページにブロックを追加します。

💡

キーボードを使用して新しい行に「/list」と入力して Enter キーを押すことで、新しいリストブロックを簡単に追加することもできます。

「/list」を入力するオプション。ブロックセレクターのドロップダウンが表示され、メニューからリストを選択できる。
この GIF をリストに置き換えてみましょう。中央揃えを忘れずに !

ブロックを追加する手順についてはこちらを参照してください。

ブロックツールバー

ブロックをクリックすると、ブロック上にオプションのツールバーが表示されます。

リストブロック上に表示されたツールバー。
リストブロックのツールバー

リストブロックのツールバーには次のオプションがあります。

ブロック設定

ブロックをクリックすると、右のサイドバーに追加のブロック設定が表示されます。サイドバーが表示されない場合、右上の ⚙️ (ギア / 歯車) アイコンをクリックして設定を表示させます。

ブロック設定は右のサイドバーに表示される。
⚙️ アイコンをクリックするとブロック設定が開く

「色」オプションでは、リストブロックで使用するテキスト、背景、リンクの色を定義できます。

変更するセクションの横にある円形をクリックすると、テーマの色またはデフォルトの色から選択するオプションが表示されます。

カスタムカラーを選択するには、これらのオプションの上にあるセクションをクリックして、色見本上でマウスをドラッグするか、Hex、RGB、HSL の色コードを入力します。

テキスト色オプションを選択。色見本と16進コードの選択肢が開いている。
クリックして拡大
リンクブロックのサイドバーの色オプション。
色見本。リンクサイドバーのそれぞれの色オプションで選択可能。
タイポグラフィ

以下の設定で、ブロックのテキストの外観を調整します。

設定が表示されていない場合は、「タイポグラフィ」の右側にある3つの点をクリックします (右図)。 その後、以下のアクセスするオプションを選択できます。

  • フォントサイズ
  • フォントファミリー
  • 外観
  • 行の高さ
  • 装飾
  • 大文字/小文字
  • 文字間隔
タイポグラフィのドロップダウンメニュー
追加オプションが展開されたブロック設定のサイドバーのタイポグラフィ。

「フォントサイズ」ではテキストのサイズを調整できます。S サイズ、M サイズ、L サイズなど、プリセットされたサイズから選択できます。

また、以下のスクリーンショットで「1」と表示されているデフォルトの選択項目の真上にあるスライダーアイコンをクリックすると、具体的な値を設定できます。以下のスクリーンショットの「2」をクリックすると、単位を変更することができます。選択肢はemまたはremのピクセルです。

タイポグラフィのフォントサイズ設定

フォントファミリーは、使用するフォントスタイルを変更するオプションです。ドロップダウンメニューでフォントの一覧から選択します。

「外観」では、通常とイタリックの間、細字から極太の範囲で文字のスタイルを変更できます。

「行の高さ」では、テキストの上下の間隔を設定します。0を選択する場合は、モバイル端末でサイトを確認してください。

「装飾」には、下線と打ち消し線のオプションがあります。

「大文字小文字」ではすべて大文字、先頭文字のみ大文字、すべて小文字のいずれかにテキストを設定できます。

「文字間隔」では、テキストの文字間隔を設定します。単位は、デフォルト (ピクセル) から、パーセント、emremvwvhに変更できます。相対単位の詳細についてはこちらをご覧ください。

番号付きリスト設定

番号付きリストを選択すると、ブロック設定サイドバーに追加のオプションが表示されます。

番号付きリスト。ブロック設定サイドバーの番号付きリスト設定を指す矢印が表示されている。
番号付きリスト設定。

リストの「初期値」を選択できます。このオプションは、リストにリスト以外のコンテンツ (画像など) を挿入し、その下に数値リストを続ける場合に便利です。

「リストの数字を逆順にする」を使用すると、リストの順番を反転させることができます。たとえば、10で始まるカウントダウンリストを作成する場合に、「リストの数字を逆順にする」オプションを使用します。

高度な設定

高度な設定のタブでブロックに CSS クラスを追加することで、カスタム CSS を記述してブロックを好きなようにスタイリングできます。

高度な設定のセクションでブロックに CSS クラスを追加できます。
高度な設定のセクションでブロックに CSS クラスを追加できます。

テキストをリストに変換する

任意のテキストブロックをリストブロックに変更するには、ブロックを選択し、ブロックツールバーの左端のボタンをクリックして、「変換」メニューから「リスト」を選択します。複数のテキストブロックを同時にハイライトして「リスト」を選択すると、それぞれテキストブロックが1つのリスト項目に変換されます。

複数の段落に対して「変換」オプションを使用し、コンテンツをリストに変換。

字下げしたリスト

ツールバーのインデントアイコンを使用してリストをインデントしたり、キーボードのスペースバーを使用して項目をインデントしたりできます。

強調表示されたインデントアイコン。
インデントアイコンでリストをインデントする。

💡

インデントしたリスト項目は、インデントアイコンの左側にあるアイコン、またはキーボードのバックスペースキーでインデントを戻すことができます。

混合リスト

番号付きリストに番号なしリストを続けるなど、リストを組み合わせて使用することもできます。

リストを組み合わせることもできます。

リストの速記

ハイフンに続けてリスト項目を入力してから Enter キーまたは Return キーを1回押すと、リストを追加できます。同様に、1、ピリオド (.) の順に入力してからリスト項目を入力し、Enter キーまたは Return キーを1回押すと番号付きリストを追加できます。

ハイフンか番号を使うとリストを速記できる。
ハイフンか番号を使うとリストを速記できる。
Copied to clipboard!