【はてなブログ】箇条書きリスト(ul・ol)のデザインのカスタマイズ方法

・はてなブログで、箇条書きリストのデザインをカスタマイズしたい。
・具体的なやり方を簡単に分かりやすく教えてほしい。

こういった疑問に答えます。

本記事の内容

はてなブログで、箇条書きリストのデザインをカスタマイズする方法

この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。
当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。

こういった私が、解説していきます。

本記事の内容
箇条書きリストのデザインをカスタマイズする方法
- ulタグのリストのカスタマイズ

箇条書きリストのデザインをカスタマイズする方法

ulタグのリストのカスタマイズ

/* -----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: "blogicon";
  content: "\f010";
  position: absolute;
  left: 1em;
  color: #1F6ED4;
}

表示サンプル

あああああああああああ
いいいいいいいいいいい
ううううううううううう

アイコンには、はてなブログ独自のブログアイコンを使いました。

ブログアイコンについては、下記の記事で詳しく書いています。

takeuchiblog.hatenablog.jp

olタグのリストのカスタマイズ

/* -----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%);
}