こんにちは、ミントです。
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の概念がない場合は戸惑うかもしれません。
逆に理解してしまえば、簡単なことなんですよ。
まとめ
いかがでしたでしょうか。
簡単すぎる内容なんですが、ホントに最初できなくて悩んだんですよ＾＾；
初歩的な内容なので、どこにも書いてありませんでした。
もし同じように戸惑っている方がいて、お役に立てれば幸いです。
最後まで読んで頂き、ありがとうございました。
