【Diver】リストデザインを入力補助で簡単に作成する方法!
スポンサーリンク

 

aki
リストデザインを簡単に作成する手順を説明するよ!
所要時間10分くらいで完成すると思います。

1.はじめに

リストデザインは「箇条書きリスト」と「順序付きリスト」の2種類あります。

入力フォーム内にリストタグを作成して挿入する形式になっています。

 

「 箇条書きリスト(ul)」はテキスト文字の先頭に「✔」「>」などで表示するタイプ。

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

 

「 順序付きリスト(ol)」はテキスト文字の先頭に「①」「1⃣」などで表示するタイプ。

  1. テキストテキスト
  2. テキストテキスト
  3. テキストテキスト
  1. テキストテキスト
  2. テキストテキスト
  3. テキストテキスト

使用するデザインを決めて入力すれば一気に表示できてしまうので作業効率がグンと上がります。

 

最新SEO対策済み!wordpressテーマ「Diver」の詳細はこちらから

2.箇条書きリスト(ul)

箇条書きリストは全部で7種類あります。

手順は簡単ですが「リストHTML」の入力方法が初心者の方には若干分かりづらいかもしれないです。

下で少し詳しく説明をしてますので分からなければ確認をしてくださいね。

  1. 「 箇条書きリスト(ul)」をクリックしてください。
  2. 「リストHTML」にテキストを入力してください。
  3. 「デザイン」を決めてクリックしてください。
  4. 「色」を決めてクリックしてください。
  5. 「デザインリストを挿入する」をクリックしてください。

 

「リストHTML」の入力方法
① まずはじめに「ul」ボタンをクリックします。
②「li」ボタンをクリックして「テキスト」を入力したらもう一度「li」をクリックします。
③ あとは②の作業を繰り返し行います。
④ 最後に「ul」をもう一度クリックすれば完了です。

3.順序付きリスト(ol)

順序付きリストは全部で8種類あります。

今度は実際にテキスト入力欄に下で説明に使用しているテキストを入力してみます。

  1. 「 箇条書きリスト(ol)」をクリックしてください。
  2. 「リストHTML」にテキストを入力してください。
  3. 「デザイン」を決めてクリックしてください。
  4. 「色」を決めてクリックしてください。
  5. 「デザインリストを挿入する」をクリックしてください。
「リストHTML」の入力方法
① まずはじめに「ol」ボタンをクリックします。
②「li」ボタンをクリックして「テキスト」を入力したらもう一度「li」をクリックします。
③ あとは②の作業を繰り返し行います。
④ 最後に「ol」をもう一度クリックすれば完了です。

 

4.まとめ

「Diver」はアイコンも充実しているのですがいっぺんに表示させたい時に使用せれば作業も楽ですね。

ちなみに、最後のリストの末尾にカーソルを持ってって改行すれば選択しているリストデザインが出ます。

1~2行だけ入力してビジュアル入力画面で改行しながらテキストを入力していく方が楽かもです。

 

aki
お疲れさまでした~!!

 

~こちらの記事も参考にしてください~

スポンサーリンク
このサイトで使用しているテーマ

アフィリエイト最適化WordPressテーマ!

美しいデザインが目を引くWordpressテーマですが、内部構造がしっかり作り込まれているのが特徴です。SEO対策は当たり前で、アフィリエイトの収益をいかに増やせるかということを考えて作られています。デザインはユーザーのことを考えて作られていて、カスタマイズの自由さでも美しさが損なわれることがないように作成可能です。

Twitterでフォローしよう

おすすめの記事