【はてなブログ】<ul><ol>箇条書きリストをカスタマイズするCSS

【はてなブログ】ul、ol箇条書きリストをカスタマイズするCSS

箇条書きリストul liやol li　のデザインをカスタマイズするCSSのメモです。

はてなブログのデザインCSSに追加するだけで簡単にできます。

具体的な手順（ulタグ）

デザイン　＞　カスタマイズ　＞　デザインCSS
に下記コードを追加します。

Font Awesomeの「check-square」を使いました。

/* -----ulリスト----- */
.entry-content ul {
  border: dashed 1px #39BAE8;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}

.entry-content ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.entry-content ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  position: absolute;
  left: 1em;
  color: #1F6ED4;
}

実際の表示イメージ（ulタグ）

Markdown記法の場合

- 箇条書きリスト１
- 箇条書きリスト２
- 箇条書きリスト３

• 箇条書きリスト１
• 箇条書きリスト２
• 箇条書きリスト３

HTMLタグの場合

<ul>
<li>箇条書きリスト１</li>
<li>箇条書きリスト２</li>
<li>箇条書きリスト３</li>
</ul>

• 箇条書きリスト１
• 箇条書きリスト２
• 箇条書きリスト３

具体的な手順（olタグ）

デザイン　＞　カスタマイズ　＞　デザインCSS
に下記コードを追加します。

/* -----olリスト----- */
.entry-content ol {
  counter-reset:number;
  list-style-type: none!important;
  border: dashed 1px #39BAE8;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.entry-content ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.entry-content ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #1F6ED4;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:normal;
  font-size: 12px;
  border-radius: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

実際の表示イメージ（olタグ）

Markdown記法の場合

1. 番号付きリスト１
1. 番号付きリスト２
1. 番号付きリスト３

1. 番号付きリスト１
2. 番号付きリスト２
3. 番号付きリスト３

HTMLタグの場合

<ol>
<li>番号付きリスト１</li>
<li>番号付きリスト２</li>
<li>番号付きリスト３</li>
</ol>

1. 番号付きリスト１
2. 番号付きリスト２
3. 番号付きリスト３

当ブログで行っている、はてなブログのカスタマイズ方法まとめ

以下の記事で、当ブログでやっている、はてなブログのカスタマイズ方法をまとめて紹介しています

souiunogaii.hatenablog.com

参考にしたサイト

saruwakakun.com

saruwakakun.com