【Diver入力補助】リストデザインの使い方（デザインサンプル&解説動画付き）

 

 

ワードプレステーマ Diver 入力補助機能「リストデザイン」についての解説です。

 

ここでの知識は、一般的なリスト表示にも使うことができるので

Diver 以外のテーマをお使いの方も参考にしてください。

１．Diver のリストデザインの使い方

Diver のリスト機能は、入力補助機能の中に含まれています。

ワードプレスの投稿編集画面から、入力補助 ＞ リストデザイン と選択しましょう。

↓　　　↓　　　↓

 

こちらがリストデザインの設定画面です。

ここでリストの表示方法や、デザインを設定することができます。

 

２．一般的なリスト表示について知っておこう

Diver のリストデザインの設定方法を解説する前に

まずは、一般的なリスト表示のやり方について知っておきましょう。

 

ワードプレスには標準機能として、リストを設定するボタンが搭載されています。

 

テキストを入力してからこのボタンをクリックすることで

テキストの先頭に「・」（黒丸）が付き、以下のようにリスト表示になります。

• リスト表示サンプル
• リスト表示サンプル
• リスト表示サンプル

 

この時に編集画面をテキストモードにして、HTML を確認してみると以下のようになっています。

<ul>
 	<li>リスト表示サンプル</li>
 	<li>リスト表示サンプル</li>
 	<li>リスト表示サンプル</li>
</ul>

 

黒丸ではなく、数字でリスト表示したときも確認してみます。

1. リスト表示サンプル
2. リスト表示サンプル
3. リスト表示サンプル

 

この場合の HTML はこうなっています。

<ol>
 	<li>リスト表示サンプル</li>
 	<li>リスト表示サンプル</li>
 	<li>リスト表示サンプル</li>
</ol>

 

黒丸のときは、<ul> と <li>

数字のときは、<ol> と <li> で

HTML が構成されていることがわかりますね。

 

Diver のリストデザインは、この「黒丸」と「数字」の部分を

装飾してくれる機能なので、これをそのまま入力補助画面に入力すればOKということになります。

 

３．Diver のリストデザインの設定方法

3-1 箇条書きリスト（ul）の作成方法

それではここからは、実際のDiver のリストデザインの画面を使って、リストを作ってみましょう。

リスト HTML の枠内に、先ほどと同じ HTML を入力するとこうなります。

 

ここでは箇条書き（ul）のリストを作成するので、左側の「箇条書きリスト（ul）」を選択。

そして、リストのデザインと色をそれぞれ選択します。

 

するとこのようにリストが表示されました。

 

違うデザインでも表示させてみましょう。

 

3-2 順序付きリスト（ol）の作成方法

続いて数字「順序付きリスト（ol）」のリストもつくってみましょう。

上と同じ要領で、ul の部分を ol で入力するだけでOKです。

 

下のタブを「順序付きリスト（ol）」に変更するのもお忘れなく。

 

実際に表示すると、このようになります。

 

こちらはまた別のパターン。

 

3-3 HTML はボタンで入力することもできる

リストで使う <ul></ul> <ol></ol> <li></li> の HTMLタグ は、

毎回入力しなくても、ボタンをクリックすることで簡単に入力することができます。

 

※ここをクリックで動画が開きます

 

 

さいごに

今回は、Diver の入力補助機能「リストデザイン」の使い方について解説しました。

 

リスト（箇条書き）は、ブログの記事作成とは

切っても切り離せない重要な機能なので

使えそうな場所ではどんどん使っていくようにしましょう。

 

最後にこのページのおさらいです。

 

 

注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】

注目の記事Diver のウィジェット機能の使い方を図解つきで徹底解説