スポンサーリンク

ブロックエディタ(Gutenberg) | リストブロックの使い方

WordPress

前回記事を書いたときブロックエディタの「リストブロック」を使ったのですが…使い方をよくわかっていなかったので備忘録として記事に書いておきます。

スポンサーリンク

リストブロックって?

HTMLのul li、ol liタグを使ったリスト(箇条書きリスト)のブロックです。リストブロックを使うと簡単に記事に箇条書きリストを設置することができます。

ulは文章の前に「黒ポチ(・)」が表示され、olは文章の前に数字が表示されます。

きらり
きらり

リストって色んなところで使うよね。

結耶
結耶

そう!だからリストブロックの使い方を忘れないように書いておくね。

リストブロックの使い方

まずは左上の「+」ボタンをクリックして一覧から「リスト」ブロック探し記事に挿入します。(リストブロックは[デザイン]の中にあります。)

デフォルトはこのような黒ポチ(ul)のリストになります。

  • ゴーヤ
  • とうがらし
  • ピーマン
  • 春菊

数字リスト(ol)に切り替える

左上の数字リストボタンをクリックすれば数字リスト(ol)に切り替えることができます。

  1. ゴーヤ
  2. とうがらし
  3. ピーマン
  4. 春菊
結耶
結耶

このように数字が付いたリストに切り替わります。黒ポチのulに戻すには左隣りのボタンをクリックすれば戻ります。

入れ子(階層)にする

先程の数字リストボタンの右隣りに「階層を上げる」「階層を下げる」ボタンがあるのでクリックすると入れ子にすることができます。

  • 子供が嫌いな野菜 2020
    • ゴーヤ
    • とうがらし
    • ピーマン
  • 大人が嫌いな野菜 2020
    • セロリ
    • ゴーヤ
    • ケール

ul と ol を使ったリスト

以下のようにulとol両方を使った入れ子のリストもできます。

  • 子供が嫌いな野菜 2020
    1. ゴーヤ
    2. とうがらし
    3. ピーマン
  • 大人が嫌いな野菜 2020
    1. セロリ
    2. ゴーヤ
    3. ケール
きらり
きらり

へぇ~切り替えたり、入れ子に簡単にできるんだね。知らなかったぁ

結耶
結耶

できるんだね~。私も知らなかったよw

li の中で改行するには?

<li>~</li>の中で改行したいときがあります。旧エディタのときは<br>タグを使って改行していましたが、ブロックエディタでは<br>を入れるとエラーになってしまいます。

「 liタグの中で<br>をあまり使わない方がいい」と言う話もあるのでbr以外の方法で改行することにしました。

display:block を使って改行

2行目にする文章を<span>~</span>で囲み、CSSでdisplay:blockを設定します。

HTML
<ul>
  <li>1行目の文章
    <span class="new-line">2行目の文章</span>
  </li>
  <li>これはサンプルです。</li>
</ul>

※わかりやすく改行してあります。改行しないで書いてOKです。

CSS
.new-line {
    display:block;
}

上記のように設定すると以下のようになります。

  • 1行目の文章2行目の文章
  • これはサンプルです。
ポイント2行目の文頭の位置(左側)がズレて1行目と位置を合わせたい場合は「margin-left」を追加して合わせてください。

最後に

リストブロックの使い方を解っておらず、前回記事を書くのにちょっと悩んでしまいました(^^;)

リストのHTMLを自分で書くのはなかなか大変ですw
ですがブロックエディタのリストブロックを使えば簡単に設置することができます。

入れ子もクリックするだけで簡単にできるので、初心の方には大変ありがたいブロックだと思います。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM