ぴっぴのはてなブログでアフィリエイト

ブログ初心者ぴっぴが、はてなブログでアフィリエイトに挑戦中。

はてなブログのリスト設置の仕方と使い方

はてなブログのリスト設置と使い方

記事の種類 はてなブログの使い方
SEO対策 関係なし
SXO対策

関係あり

難しさ 超かんたん
重要さ ふつう
※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖°

ぴっぴ(@hiyoko_no_pippi)です!

実は、ぴっぴも「はてなブログのリスト(箇条書き)」の設置ができませんでした💦

ところが、アイコンを「ピッ」と押すだけでリストを簡単に設置できるんです!

そのような訳でこちらの記事では、はてなブログのリスト設置の仕方について説明します。

もちろん画像付きです。

リスト設置を覚えるまで、記事を何回もご利用くださいね!

ぴっぴのプロフィールカード

はてなブログのリストの説明と使い方

はてなブログのリストは2つあります。

  • リスト(箇条書き)
  • 番号リスト

リスト

はい、リストは箇条書きのことです。

同列(同じ種類)のものを、箇条書きにして並べるときに使います。 

番号リスト

暗号リストは、箇条書きを番号にしたものです。

手順や順位を表すときに使います。

リストの設置の仕方

はい、はてなブログのリスト設置の仕方ですが、編集画面によって異なります。

見たままモード

見たままモードのリスト設置の手順は、次のとおりです。

  1. アイコンに矢印を合わせる
  2. マウスの左側のボタンを押す
  3. リストが設置される

1.アイコンに矢印を合わせる

見たままモード リストアイコンに矢印を合わせる

上の画像の赤い枠で囲んでいるアイコンに矢印を合わせます。

手順や順位を表す番号リストを使いたい場合は、右隣の「番号リスト」のアイコンに矢印を合わせてくださいね。

2.マウスの左側のボタンを押す

見たままモード リストのアイコンを押す

アイコンに矢印を合わせたら、マウスの左のボタンを押します。

3.リストが設置される

見たままモード リストが設置される

すると画像のように黒いボッチンが表示されます。

これがリストです。

番号リストの場合は「数字.」が表示されますよ。

HTML編集

HTML編集の場合、リストのアイコンを押してもリストを設置することはできません。

なので、見たままモードに切り替えてリストにする内容を入力してアイコンを押す、または上の画像みたいにHTMLコードを編集画面に直接入力する必要があります。

  • 見たままモードでリストを設置
  • リストのコードを入力

見たままモードでリストを設置

見たままモードでのリスト設置は、先述のとおりです。

上の画像の赤い枠で囲っている「編集 見たまま」を押して、編集画面の切り替えを行います。

リストのコードを入力

HTML編集画面でコードを書きます。

リスト、番号リストのコードは下記のとおりです。

※リスト
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul> 

 

※番号リスト
 <ol>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>  

はてな記法

はてな記法でのリスト、番号リストの設置は次のとおりです。

  1. アイコンに矢印を合わせる
  2. アイコンを押す
  3. リストの内容を書く
  4. 手順1.から3.を繰り返す

1.アイコンに矢印を合わせる

はてな記法 矢印を合わせる

上の画像みたいにアイコンに矢印を合わせます。

2.アイコンを押す

はてな記法 アイコンを押す

矢印を合わせたら、アイコンを押してください。

はてな記法の場合、見たままモードと同じくアイコンを押すと「ー」が表示されます。

これが「はてな記法」のリストです。

番号リストの場合は「+」が表示されます。

3.リストの内容を書く

はてな記法 リストの内容を入力する

この「ー」の右側にリストにしたい内容を入力しましょう。

4.手順1.から3.を繰り返す

はてな記法 リスト 手順を繰り返す

入力できたら改行せず、またアイコンを押します。

すると画像みたいに、また「ー」が表示されますのでリストにした内容を入力してくださいね。

この手順を繰り返し行いリストを作ります。

吹き出し
見たままモードみたいにマウスでリストにしたい内容を一括指定して、アイコンを押してもリスト化できません。 

markdown

markdownのリストと番号リストの設置方法は同じですので、どちらかを覚えれば両方ともできるようになりますよ。

はてなブログmarkdownでリスト設置をする方法は、次のとおりです。

  1. アイコンに矢印を合わせる
  2. アイコンを押す
  3. 内容を入力する
  4. 手順1.から3.を繰り返す

1.アイコンに矢印を合わせる

markdown リスト 矢印を合わせる

上の画像みたいにアイコンに矢印を合わせます。

2.アイコンを押す

markdown リスト アイコンを押す

markdownも、見たままモードと同じくアイコンを押すと「*」が表示されます。
これが、はてな記法のリストです。

番号リストの場合は「数字.」が表示されます。

3.内容を入力する

markdown リスト 内容を入力する

この「*」の右側にリストにしたい内容を入力しましょう。

4.手順1.から3.を繰り返す

markdown リスト 手順を繰り返す

入力できたら改行せず、またアイコンを押します。

すると画像みたいに、また「*」が表示されますのでリストにしたい内容を入力してくださいね。

この手順を繰り返してリストを作ります。

リストを入れ子にする方法

はい、リストを入れ子にする方法を紹介します。

見たままモードとHTML編集

はい、見たままモードとHTML編集でリストを入れ子にする場合、HTML編集画面にして下記のコードを入力します(五十音のところにリストにしたい内容を入力してください)。

※見たままモードとHTML編集でのリスト「入れ子」のコード

<ul>
<li>あいうえお</li>
<ul>
<li>たちつてと</li>
<li>なにぬねの</li>
<li>はひふへほ</li>
</ul>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>

 

※見たままモードとHTML編集での番号リスト「入れ子」のコード

<ol>
<li>あいうえお</li>
<ol>
<li>たちつてと</li>
<li>なにぬねの</li>
<li>はひふへほ</li>
</ol>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>

はてな記法

はてな記法でリストを入れ子にする場合、入れ子にする内容の前に「-」を増やします。

  • 親:「-」を1つ
  • 子:「-」を2つ
  • 孫:「-」を3つ
はてな記法のリスト「入れ子」のコード

- あいうえお

-- たちつてと

--- はひふへほ

--- まみむめも

-- なにぬねの

- かきくけこ

- さしすせそ

番号リストも同様で、入れ子にする内容の前に「+」を増やしてくださいね。

  • 親:「+」を1つ
  • 子:「+」を2つ
  • 孫:「+」を3つ
はてな記法の番号リスト「入れ子」のコード

+ あいうえお

++ たちつてと

+++ はひふへほ

+++ まみむめも

++ なにぬねの

+ かきくけこ

+ さしすせそ

markdown

markdownのリストを入れ子にする場合、「*」の前に半角で空白を増やします。

  • 親リスト:半角の空白なし
  • 子リスト:半角の空白2つ
  • 孫リスト:半角の空白6つ
markdownのリスト「入れ子」のコード

 * あいうえお

  * たちつてと

      * はひふへほ

      * まみむめも

  * なにぬねの

* かきくけこ

* さしすせそ

そして、markdownの番号リストを入れ子にする場合、「1.」の前に半角の空白を増やします。

  • 親リスト:半角の空白なし
  • 子リスト:半角の空白3つ
  • 孫リスト:半角の空白6つ
markdownの番号リスト「入れ子」のコード

1. あいうえお

   1. たちつてと

      1. はひふへほ

      1. まみむめも

   1. なにぬねの

1. かきくけこ

1. さしすせそ

はてなブログのリストの説明と使い方まとめ

はい、リストは箇条書きのことです。

同列(同じ種類)のものを、箇条書きにして並べるときに使います。

そして暗号リストは、箇条書きを番号にしたものです。

手順や順位を表すときに使います。

基本的に「記事を書く」画面のアイコンを押すと、リスト(または番号リスト)を記事内に設置できます。

個人的には見たままモードとHTML編集で、リストを設置するのがオススメです。

なぜなら簡単だから。

はてな記法markdownは、理屈が分かるまでチョッピリややこしいと思いました。

なので、はてなブログ初心者の方は見たままモードとHTML編集でリストを使うことをオススメします。