注目度の高い記事
【Diver入力補助】リストデザインの使い方(デザインサンプル&解説動画付き)

 

わかば
山本さん、Diver の入力補助にリストデザインってあるじゃないですか
あれって一体どうやって使えばいいんですかね?

山本
リストデザインだね。
使い方はいたって簡単だよ。ここで説明するから覚えちゃおう!

わかば
はい!では、解説お願いします!

 

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

 

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

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

1.Diver のリストデザインの使い方

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

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

Diver の入力補助機能とは

↓   ↓   ↓

Diver のリスト機能の使い方

 

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

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

リストデザイン

わかば
ぱっと見簡単そうなんですけど
この HTML の部分がよくわからないんですよ

山本
じゃあ次の項目で、リストデザインの設定方法について詳しく解説していくよ

 

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

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ということになります。

 

3.Diver のリストデザインの設定方法

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

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

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

Diver の入力補助機能の設定方法

 

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

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

Diver の入力補助機能の設定方法

 

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

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

 

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

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

 

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

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

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

Diver の入力補助機能の設定方法

 

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

Diver の入力補助機能の設定方法

 

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

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

 

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

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

 

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

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

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

Diver の入力補助機能の設定方法

 

山本
参考動画も用意したので
以下のテキストをクリックして確認してみてください

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

 

わかば
これは簡単に入力できて助かりますね!

 

さいごに

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

 

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

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

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

 

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

  • Diver のリストデザイン機能の呼び出し方
  • リストの HTMLタグ について知っておく
  • Diver のリストデザインの設定方法と便利な使い方

 

わかば
ひょっとしてこのおさらいの部分も、リスト機能なんですかね?

山本
正解!よくわかったね
リスト機能は、わー研。でもあらゆる部分で使っています

 

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

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

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事