| 記事の種類 | はてなブログの使い方、はてなブログの書き方 |
| SEO対策 | 関係なし |
| SXO対策 |
関係あり |
| 難しさ | 超かんたん |
| 重要さ | ふつう |
- はてなブログのリスト設置の仕方を知りたい
- はてなブログで箇条書きしたい
- はてなブログで番号リストを使いたい
ぴっぴ（@hiyoko_no_pippi）です！
実は、ぴっぴも「はてなブログのリスト（箇条書き）」の設置ができませんでした💦
ところが、アイコンを「ピッ」と押すだけでリストを簡単に設置できるんです！
そのような訳でこちらの記事では、はてなブログのリスト設置の仕方について説明します。
もちろん画像付きです。
リスト設置を覚えるまで、記事を何回もご利用くださいね！
はてなブログのリストの説明と使い方
はてなブログのリストは2つあります。
- リスト（箇条書き）
- 番号リスト
リスト
はい、リストは箇条書きのことです。
同列（同じ種類）のものを、箇条書きにして並べるときに使います。
番号リスト
暗号リストは、箇条書きを番号にしたものです。
手順や順位を表すときに使います。
リストの設置の仕方
はい、はてなブログのリスト設置の仕方ですが、編集画面によって異なります。
- 見たままモード
- HTML編集
- はてな記法
- markdown
見たままモード
見たままモードのリスト設置の手順は、次のとおりです。
- アイコンに矢印を合わせる
- マウスの左側のボタンを押す
- リストが設置される
1.アイコンに矢印を合わせる
上の画像の赤い枠で囲んでいるアイコンに矢印を合わせます。
手順や順位を表す番号リストを使いたい場合は、右隣の「番号リスト」のアイコンに矢印を合わせてくださいね。
2.マウスの左側のボタンを押す
アイコンに矢印を合わせたら、マウスの左のボタンを押します。
3.リストが設置される
すると画像のように黒いボッチンが表示されます。
これがリストです。
番号リストの場合は「数字.」が表示されますよ。
HTML編集
HTML編集の場合、リストのアイコンを押してもリストを設置することはできません。
なので、見たままモードに切り替えてリストにする内容を入力してアイコンを押す、または上の画像みたいにHTMLコードを編集画面に直接入力する必要があります。
- 見たままモードでリストを設置
- リストのコードを入力
見たままモードでリストを設置
見たままモードでのリスト設置は、先述のとおりです。
上の画像の赤い枠で囲っている「編集 見たまま」を押して、編集画面の切り替えを行います。
リストのコードを入力
HTML編集画面でコードを書きます。
リスト、番号リストのコードは下記のとおりです。
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>
はてな記法
はてな記法でのリスト、番号リストの設置は次のとおりです。
- アイコンに矢印を合わせる
- アイコンを押す
- リストの内容を書く
- 手順1.から3.を繰り返す
1.アイコンに矢印を合わせる
上の画像みたいにアイコンに矢印を合わせます。
2.アイコンを押す
矢印を合わせたら、アイコンを押してください。
はてな記法の場合、見たままモードと同じくアイコンを押すと「ｰ」が表示されます。
これが「はてな記法」のリストです。
番号リストの場合は「+」が表示されます。
3.リストの内容を書く
この「ｰ」の右側にリストにしたい内容を入力しましょう。
4.手順1.から3.を繰り返す
入力できたら改行せず、またアイコンを押します。
すると画像みたいに、また「ｰ」が表示されますのでリストにした内容を入力してくださいね。
この手順を繰り返し行いリストを作ります。
吹き出しで
見たままモードみたいにマウスでリストにしたい内容を一括指定して、アイコンを押してもリスト化できません。
markdown
markdownのリストと番号リストの設置方法は同じですので、どちらかを覚えれば両方ともできるようになりますよ。
はてなブログのmarkdownでリスト設置をする方法は、次のとおりです。
- アイコンに矢印を合わせる
- アイコンを押す
- 内容を入力する
- 手順1.から3.を繰り返す
1.アイコンに矢印を合わせる
上の画像みたいにアイコンに矢印を合わせます。
2.アイコンを押す
markdownも、見たままモードと同じくアイコンを押すと「*」が表示されます。
これが、はてな記法のリストです。
番号リストの場合は「数字.」が表示されます。
3.内容を入力する
この「*」の右側にリストにしたい内容を入力しましょう。
4.手順1.から3.を繰り返す
入力できたら改行せず、またアイコンを押します。
すると画像みたいに、また「*」が表示されますのでリストにしたい内容を入力してくださいね。
この手順を繰り返してリストを作ります。
リストを入れ子にする方法
はい、リストを入れ子にする方法を紹介します。
- 見たままモードとHTML編集
- はてな記法
- markdown
見たままモードとHTML編集
はい、見たままモードとHTML編集でリストを入れ子にする場合、HTML編集画面にして下記のコードを入力します（五十音のところにリストにしたい内容を入力してください）。
<ul>
<li>あいうえお</li>
<ul>
<li>たちつてと</li>
<li>なにぬねの</li>
<li>はひふへほ</li>
</ul>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
<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の番号リストを入れ子にする場合、「1.」の前に半角の空白を増やします。
- 親リスト：半角の空白なし
- 子リスト：半角の空白3つ
- 孫リスト：半角の空白6つ
1. あいうえお
1. たちつてと
1. はひふへほ
1. まみむめも
1. なにぬねの
1. かきくけこ
1. さしすせそ
はてなブログのリストの説明と使い方まとめ
はい、リストは箇条書きのことです。
同列（同じ種類）のものを、箇条書きにして並べるときに使います。
そして暗号リストは、箇条書きを番号にしたものです。
手順や順位を表すときに使います。
基本的に「記事を書く」画面のアイコンを押すと、リスト（または番号リスト）を記事内に設置できます。
個人的には見たままモードとHTML編集で、リストを設置するのがオススメです。
なぜなら簡単だから。
はてな記法とmarkdownは、理屈が分かるまでチョッピリややこしいと思いました。
なので、はてなブログ初心者の方は見たままモードとHTML編集でリストを使うことをオススメします。
これから記事を書く方へご案内
ぴっぴのはてなブログでアフィリエイトでは、編集画面の使い方が分かる「画像でわかる【はてなブログの記事の書き方】」をご用意しています。
記事の内容
- 使用頻度の高い【機能の使い方を21枚の画像】で紹介
- オススメの記事の内容
- ネタの探し方
- 記事の品質の上げ方
このような盛りだくさんの内容になっています。
「良い記事を書きたい」または「検索する手間を省きたい」という方は、下記のリンクより「画像でわかる【はてなブログの記事の書き方】」をご覧ください。
