秀丸エディタとマークダウン記法でアメブロを執筆するCSSカスタマイズ（リスト編）

今回は「秀丸エディタとマークダウン記法でアメブロを執筆するCSSカスタマイズ」の「リスト編」をお送りします。

箇条書きリストも順番付きリストもマークダウン記法を使えば簡単に記述できるようになりますよ。

お試しあれ！

箇条書きリストのマークダウン記法とCSSカスタマイズ

箇条書きリストのマークダウン記法では、行頭にスラッシュ-を書き、半角スペースを空けてリストの項目を書きます。

- 秀丸エディタ
- 秀丸マクロ
- Markdown記法

秀丸マクロによってこのマークダウン記法は以下のHTMLに変換されます。

<ul>
<li>秀丸エディタ</li>
<li>秀丸マクロ</li>
<li>Markdown記法</li>
</ul>

CSSカスタマイズは以下のようにしました。

.skin-entryBody ul {
margin: 0;
display: block;
box-sizing: border-box;
padding: 0 5px;
list-style: disc inside
}

.skin-entryBody li {
font-size: 1.4rem;
margin: 10px 0;
box-sizing: border-box;
padding: 0 0 0 10px;
text-indent: -10px
}

変哲のない中黒ですがシンプルさを狙いました。

• 秀丸エディタ
• 秀丸マクロ
• Markdown記法

ネストもできます。

- 秀丸スーパーライセンスパック
    - 秀丸エディタ
    - 秀丸メール
    - 秀丸ファイラ クラシック
- Markdown記法

はるなぴの環境では半角スペース4つ分のインデントでネストができています。

• 秀丸スーパーライセンスパック
  • 秀丸エディタ
  • 秀丸メール
  • 秀丸ファイラ クラシック
• Markdown記法

順番付きリストのマークダウン記法とCSSカスタマイズ

順番付きリストのマークダウン記法では、行頭に数字とドットを書き、半角スペースを空けてリストの項目を書きます。

数字は順番通りに打たなくとも自動的に順番付けをしてくれます。

1. 秀丸エディタ
1. 秀丸マクロ
2. マークダウン記法

秀丸マクロによってこのマークダウン記法は以下のHTMLに変換されます。

<ol>
<li>秀丸エディタ</li>
<li>秀丸マクロ</li>
<li>マークダウン記法</li>
</ol>

CSSカスタマイズは以下のようにしました。

.skin-entryBody ol {
margin: 0;
display: block;
box-sizing: border-box;
padding: 0 5px;
counter-reset: section;
list-style-type: none
}

1. 秀丸エディタ
2. 秀丸マクロ
3. マークダウン記法

数字の順番がきれいに並びます。

順番付きリストのネスト用CSSカスタマイズ

ネストした時の表示がきれいになるように次のCSSカスタマイズを適用しましょう。

.skin-entryBody ol li:before {
counter-increment: section;
content: counters(section, ".") " "
}

半角スペース4つでネストが可能です。

1. 秀丸スーパーライセンスパック
    1. 秀丸エディタ
    1. 秀丸メール
    1. 秀丸ファイラ クラシック
    1. 秀丸アマゾンサーチ
2. マークダウン記法
    2. Github Flavored Markdown
    2. Original Markdown

数字の順番がめちゃくちゃでも構わないので後から挿入できたりと非常にラクチン！

1. 秀丸スーパーライセンスパック
   1. 秀丸エディタ
   2. 秀丸メール
   3. 秀丸ファイラ クラシック
   4. 秀丸アマゾンサーチ
2. マークダウン記法
   1. Github Flavored Markdown
   2. Original Markdown

これでもう面倒なHTMLを直打ちしなくてもマークダウン記法でどんどんリストを書いていくことができますね！