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

2020年10月10日WordPress

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

リストブロックって？

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

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

きらり

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

結耶

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

リストブロックの使い方

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

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

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

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

結耶

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

入れ子(階層)にする

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

ul と ol を使ったリスト

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

きらり

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

結耶

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

li の中で改行するには？

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

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

display:block を使って改行

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

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

.new-line {
    display:block;
}

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

最後に

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

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

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

応援よろしくお願いします。

     

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

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

登場キャラクター

きらり

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

楽天ROOM