箇条書きは【リスト】表示を使おう!

投稿日:

見やすく読みやすいページにすると、アクセスアップに繋がる!】【本文内に【見出し】をいれて、文章にメリハリをつけよう!】に続く、ブログの書き方です。

箇条書きを使うことは多々あると思います。「普通に、1行ずつ改行して書けばいいじゃん。」と思いますが、リスト表示のCSSを知っておくと便利だし、デザインに統一感が出るし、これまた検索ロボットに【これはリスト表示です】と知らせることが出来ます。

引き続き、全面リニューアルをお手伝いした愛実司法書士オフィスさんの↓のページを参考にさせて頂きます。

2種類のリスト表示

リスト表示には、順序ありのタイプと順序なしのタイプの2種類あります。

順序ありのリスト表示

↓こういうタイプですね。

番号は自動で振られています。リストにすることで、自分で番号をつける必要がなく、途中の1行を削除しても、ちゃんと順序通りに数字が振られます。

数行のリストなら、自分で番号をつけたら良いですが、何十行もあるリストだと、途中の1行を削除した場合、その後の番号をつけ直さなければなりませんが、リスト表示のCSSで設定しておけば、そうした手間がかかりませんし、数字の間違いも起こりません。

順序のあるリスト表示のHTML

順序のあるリストのソースは、↓のようになってます。<ol></ol>が順序のあるリスト表示のタグになります。

見て分かる通り、全体を<ol></ol>で囲み、1行ずつ<li></li>で囲むと、順序(数字)ありのリスト表示になります。

フェレンギ人の金儲けの秘訣は285条もあるんですよ。こんな場合に<ol>表示は便利ね~♡


順序なしのリスト表示

↓こういうタイプです。

黒点は、自動でつけられています。黒点以外にも、下線入りとか他のアイコン付きとかCSSで設定することは出来ます。

箇条書きの部分をリスト表示にしておくと、スマホからでもパソコンからでも1行ずつズレることなく表示され見やすく分かりやすいです。

順序のないリスト表示のHTML

順序のないリストのソースは、↓のようになってます。<ul></ul>が順序のない通常のリスト表示のタグになります。

見て分かる通り、全体を<ul></ul>で囲み、1行ずつ<li></li>で囲むと、順序なしのリスト表示になります。

リスト表示のやり方

投稿画面の「テキスト」側を開きます。

①リスト表示する部分全体をドラックにて選択し、②olボタンを1回クリック

<ol></ol>で囲われました~。

③1行をドラックして選択し、④liボタンを1回クリック

⑤全行を1行ずつドラックして、liボタンをクリックして囲んでいく

<li></li>で囲われました~。行数分だけ同じように繰り返します。

順序ありの<ol>で囲われた<li>ができました!

順序なしのリスト表示のやり方も同じ

順序なしのリスト表示の場合は、リスト表示する全体をドラッグしてulボタンを1回クリックすればOK!後は、1行ずつドラッグしてliボタンをクリックして、<li></li>で囲えば出来上がり~。

リスト表示の場合、タイトルの付け方にも統一感がある方がイイネ!

元ページのリストと編集したリスト表示を見て下さい。

↓元のリスト

↓編集したリスト表示

このリストは、シリーズで書かれています。となると、元のリスト表示と編集後のリスト表示のタイトル、どっちが見やすいか一目瞭然ですね。

元リストは、記事タイトルが不揃いなので、とても見にくくなっており、シリーズで書いているのに、バラけた印象になります。

共通言語である【第1回勉強会】を頭につけると、一気に統一感とシリーズものである感じが一目で分かります。

こうしたシリーズものをリスト表示するなら、ちゃんと統一感を考えて記事タイトルをつけたほうが良いですね。こうした工夫も、見やすく読みやすいページにするコツです。

\ スポンサーリンク /

このブログは、パナセ こと 折田が書いています。天職探して転職30回の末、2004年より一人自営業やってます。⇒パナセ♥オフィシャル

2012年から手相観も始め、岡山市北区で、手相鑑定をベースに個人コンサルティング(人生相談)を行ってます。⇒手相観ぱなせ

-ブログの書き方

Copyright© ちょこヘル! , 2008-2018 All Rights Reserved.