はてなブログを使い始めてから約4年半、今更ながらMarkdown記法での箇条書き（リスト）の使い方を覚えたので忘れないうちにメモ。
※あくまでもはてなブログ上での話です。
番号なし箇条書きの書き方その1
書き方
- リスト1
- リスト2
- リスト2.1
- リスト3
または
+ リスト1
+ リスト2
+ リスト2.1
+ リスト3
表示結果
- リスト1
- リスト2
- リスト2.1
- リスト3
行の先頭に-または+を置いて半角スペースを入れる。箇条書きにする部分の前後に空行を入れる必要があるのに注意。入れないと反映されなかったり、最後の箇条書きの部分からずっと文章が続いたりする。
字下げで階層化する場合は先頭に半角スペース4つを入れる。
半角スペースの代わりにタブでも代用できるが、環境によっては挿入できないので半角スペース推奨。
番号なし箇条書きの書き方その2
書き方
<ul> <li>リスト1</li> <li>リスト2 <ul> <li>リスト2.1</li> </ul> </li> <li>リスト3</li> </ul>
表示結果
- リスト1
- リスト2
- リスト2.1
- リスト3
厳密にはHTMLの記述だがセットで紹介している人が多かったのでそれに合わせて記載。こちらは<ul></ul>の前後に空白行を入れる必要はない（自動的に前後に空白行が入る）。
階層化したい場合はさらに<ul></ul>を入れる。
記述がめんどくさいが後述する箇条書きのカスタマイズをしたい場合はこの記述を使う必要がある。
番号付き箇条書きの書き方その1
書き方
1. リスト1
2. リスト2
3. リスト2.1
4. リスト3
表示結果
- リスト1
- リスト2
- リスト2.1
- リスト3
行の先頭に数字とピリオド（両方とも半角）を置き、半角スペースを入れる。数字は何でもよい。箇条書きの番号は自動的に割り当てられる。
数字なし箇条書きと同様にこちらも箇条書きにする部分の前後に空行を入れる必要があるのに注意。
字下げで階層化する場合も同じく行の先頭に半角スペース4つを入れる。
ちなみにWordみたいに階層化で1.1、1.2…と割り当てるのはできない。
番号付き箇条書きの書き方その2
書き方
<ol> <li>リスト1</li> <li>リスト2 <ol> <li>リスト2.1</li> </ol> </li> <li>リスト3</li> </ol>
表示結果
- リスト1
- リスト2
- リスト2.1
- リスト3
こちらもHTMLによる記述。数字付きの箇条書きにする場合は<ul></ul>ではなく<ol></ol>を使う。それ以外は同様。
箇条書きの前後に2行以上の間を入れたい
箇条書きの前後に空行をいくら挿入しても1行に圧縮される。箇条書きの前後に2行以上間を空けたい場合は下のように<br>を入れる。
<br> - リスト1 - リスト2 - リスト2.1 - リスト3 <br>
HTML記述でも同様。
箇条書きの途中に改行を入れる
+ リスト1 + リスト2 + リスト2.2<br> <br> + リスト3 + リスト4
または
+ リスト1 + リスト2 + リスト2.2 <p></p> + リスト3 + リスト4
箇条書きの途中で改行を入れる場合は改行を入れたい行とその1つ前の行の最後尾に<br>を入れる。もしくは改行を入れたい行に<p></p>を入れる。HTMLでも同様だがはてなブログ上限定。
箇条書きのデザインをカスタマイズする
例えば箇条書きを線で囲んでみたりアイコンフォントを変更したり、フラットなデザインにしてみたり、番号の部分を吹き出しにしてみたりするなど箇条書きをカスタマイズしたい場合はCSSで作成しHTMLで記述する必要がある。そのためMarkdown記法では箇条書きのカスタマイズはできない。
箇条書きのカスタマイズのやり方・例はこちらのページを参考に。
コメント