DIVERの入力補助【リストデザイン】の使い方と失敗していた理由

こんにちは、ミントです。

 

DIVERで記事を書くことにも、すっかり慣れてきました。

 

とっても便利な入力補助機能なんですが、どうしても『リストデザイン』を使おうとすると上手くいかない事がありました。

 

何回かに一度は失敗する私って(´；ω；`)ｳｯ…

 

「何か間違っているはず」、と調べて解決した方法を書きたいと思います。

 

リストデザイン

リストデザインとは、DIVERだとコレです⇓

 

 

リストにして表示させたい時、とっても便利。

 

 

こんな風に順番を付ける事もできます。

 

WordPress機能なら、ここでも作成できますね。

 

標準の仕様だと、『番号なしリスト』と『番号付きリスト』の2種類しかありません。

 

WordPressだと出来るのに、DIVER入力補助を使うと、なぜか表示されない時がありました。

 

理由は、キチンと把握してない部分があったから。

 

普通に考えたら分かる事だったのかも知れませんが、当時は分かりませんでした。

 

実際のDIVERでの入力方法をあげて、説明しますね。

 

リストデザインの入力方法

 

まずは、入力補助を選びます。

 

23個ある項目から、リストデザインを選択。

 

 

リストデザインを選ぶと、下記の画面になります。

①　リスト表示するために使用するCSSコードです。

②　箇条書きリスト

③　順序付きリスト

 

まず、②箇条書き、③順序付きリストのどちらかを選びます。

 

箇条書き・・・7種類

 

順序付き・・・8種類

例）箇条書き<ul>の場合

 

選んだ<ul>を最初に選ぶ。

 

リスト入力は、一行づつ <li> と </li> の間に文字列を入れる。

 

最後に</ul>でしめる。

 

 

上記のように入力したら、最後に色を選択します。

 

 

デザインリストを挿入する をクリックすると・・・

 

 

出来ました～♪

 

順序付きを選ぶ際は、<ol> と </ol> で挟むように、入力すればOKです。

 

間違えるポイント

私が「表示されない」と勝手に勘違いしていたのは、どこか？なんですが。

 

それぞれ入力の際に、

 

<ul> で始まり、最後は</ul> でしめる。

または

<ol> で始まり、最後は </ol> でしめる。

 

リスト入力は、<li> 文字列を入力 </li> の法則で入力。

 

をやるだけなんです。

 

当たり前の事なんですが、私のようにCSSの概念がない場合は戸惑うかもしれません。

 

逆に理解してしまえば、簡単なことなんですよ。

 

まとめ

いかがでしたでしょうか。

 

簡単すぎる内容なんですが、ホントに最初できなくて悩んだんですよ＾＾；

 

初歩的な内容なので、どこにも書いてありませんでした。

 

もし同じように戸惑っている方がいて、お役に立てれば幸いです。

 

最後まで読んで頂き、ありがとうございました。