【Diver入力補助】リストデザインの使い方を詳しく解説【初心者OK】
スポンサーリンク

Diverの入力補助、リストデザインを使いたいけどやり方が分からない。

ul、ol、liって何?

そんな悩みを持った皆さんに朗報です。
今回は、ぼくも活用しているリストデザインの使い方を初心者の方にも分かりやすく詳しく説明していきます。
Diverの入力補助にあるリストデザインを使えば、1分度でキレイなリストを作成することが可能。リストを活用することで可読性がパワーアップ!

ピロリン
それでは早速説明していきます。

ul、ol、liとは?

ul、ol、liはそれぞれリストを作成するHTMLタグです。
HTMLとはWebサイトの構造を形成するために使用される言語で、ul、ol、liを使うことで、「これはリスト形式の構造ですよ」ということをWeb上に伝えることができます。

ul、ol、liの詳しい意味は次の通り。

ul、ol、liの意味

  • ul:unordered list順序がない箇条書きリストのこと
  • ol:ordered list順序がある順序付きリストのこと
  • li:list itemリスト項目のこと

こんな感じ⇓でリスト表示したい項目それぞれに<li>タグを付けて、箇条書きリストの場合は<ul>〜</ul>順序付きリストの場合は<ol>〜</ol>の間に記述します。

<ul>
	<li>テキストを記入</li>
	<li>テキストを記入</li>
	<li>テキストを記入</li>
</ul>

はじめ方

WordPressの投稿画面から入力補助をクリック

Diver入力補助のリストデザインをクリック

こちら⇓の画面が出てきていればOKです。

箇条書きリスト(ul)の使い方

箇条書きリスト(ul)の使い方を説明していきます。
箇条書きリストの場合は、リストにしたい項目にそれぞれ<li>タグをつけて、それを<ul>〜</ul>の間に入れるんでしたよね。
一部テキスト入力が必要ですが、基本的にはクリックして選択だけでキレイなリストの出来上がり。

実際にデザインリストを挿入する下のようになります。

  • 「ul」をクリック
  • 「li」をクリックし、リストのテキストを記入後、「/li」をクリック
  • リストの数だけ「li〜/li」を追加
  • 「/ul」をクリック
  • 「箇条書きリスト(ul)」をクリックし、デザインを選択
  • 色を選択
  • 「デザインリストを挿入する」をクリック

箇条書きリスト(ul)が有効な場面

  • チェックポイントの羅列
  • 特徴の羅列
  • 例の羅列

など、項目間に相関関係順番ないもの

順序付きリスト(ol)の使い方

次に、順序付きリスト(ol)の使い方を説明していきます。
箇条書きリストの場合は、リストにしたい項目にそれぞれ<li>タグをつけて、それを<ol>〜</ol>の間に入れるんでしたよね。
ほぼ、箇条書きリスト(ul)の使い方と同じです。

実際にデザインリストを挿入する下のようになります。

  1. 「ol」をクリック
  2. 「li」をクリックし、リストのテキストを記入後、「/li」をクリック
  3. リストの数だけ②を追加
  4. 「/ol」をクリック
  5. 「順序付きリスト(ol)」をクリックし、デザインを選択
  6. 色を選択
  7. 「デザインリストを挿入する」をクリック

順序付きリスト(ol)が有効な場面

  • 順番を追っての説明(本記事のように順番がある場合は順序付きリストが有効)
  • 優先順位がある項目

など、項目間に相関関係順番あるもの

まとめ:【Diver入力補助】リストデザインの使い方を詳しく解説【初心者OK】

正直Diverを使っていれば、ul、ol、liなどのHTMLの知識はほぼ不要。
しかし、ul、ol、liがどのようなものか理解せずに、Diverのリストデザインを使おうとすると、いつどこでul、ol、liを入力するのかで手こずってしまいます。

ピロリン
実際ぼくも最初は理解せずに使っていて大分手こずりました。

ul、ol、liは意味も使い方もものすごく簡単。
これらを少し理解するだけでも、リストデザインを効率的に使うことができます。
ちなみに、このブログですべての記事にリストを使っています。

Diverの入力補助を使えば、キレイで分かりやすいリストを作成することが可能。
ul、ol、liを理解した上で、効率的にDiverのリストデザインを活用し、見やすい記事を作成しましょう!

スポンサーリンク
おすすめの記事