僕が使っている箇条書き、数字付き箇条書きのスタイル【コピペだけでok】

みなさん、そのままの箇条書きスタイル、数字付き箇条書きのスタイルを使ってませんか？
cssでスタイル変更すると、かなり見やすくなりますよ。
本記事では、僕が使っている箇条書きのスタイルのコードを解説します。
コピペだけでも即時使えますので、ぜひご覧ください。

僕が使っている箇条書きスタイル

普通の箇条書き

• リスト
• リスト
• リスト

数字付き箇条書き

1. リスト
2. リスト
3. リスト

こんな感じです。
結構見やすくて気に入ってます。
色も自由自在に変えれるため、それぞれのブログにマッチする形での利用も可能ですよ。

使う前の必須準備

必ず下記コードを、設定 → 詳細設定　【headに要素を追加】
部分に記載しておいてください。

//head部分
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

普通の箇条書きのコード

.entry-content > ul {
  border: solid 2px #17A2B8; /*周りの線の色　solid=実線 2px=太さ #17a2b8=色　*/
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin-top: 3em; /* 周りの線の上部分に空間を開けます */
}
.entry-content > ul:not(.table-of-contents) li {
  line-height: 1.5;
  padding: 0.75em 0; /*箇条書きの1文ごとの上下の空間を示しています。 小さくすると行間が狭くなります。*/
  list-style-type: none!important;
}
.entry-content > ul:not(.table-of-contents) li:before{
  /*リストのチェックマーク*/
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  content: "\f00c"; /*チェックマークを示しています。別のものに置き換えることも可能 */
  position: absolute;
  left : 0.2em; /*左端からのアイコンまでの距離*/
  color: #17A2B8; /*アイコン色*/
}
.entry-content > ul:not(.table-of-contents) li:after  {
  /*上のcheck部分*/
  background: #17A2B8; /*色*/
  color: #fff; /*check部分の文字色*/
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -3px;
  bottom: 100%;
  padding: 1px 7px;
  content: '\f0a7  Check';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}

基本的なことは、中にコメントアウトしておきました。
何も書いていない部分の数字などはいじらないほうが安全です。

チェックマーク部分や、指のマークの部分はアイコン変えれます。
Font Awesome
ここにたくさんアイコンがあるので、好きなのを選び、 "\f000"のように書いてあるところを、目当ての番号のものに変えます。

Font Awesomeには、solidとregularとbrandsのアイコンがあります。
このまま番号だけ変えて使えるのは、solidとregularのみです。
brandsアイコンを使う場合には、

font-family:"Font Awesome 5 Free"

部分を、

font-family:"Font Awesome 5 Brands"

に変えてください。

check部分がいらない場合は、 .entry-content > ul:not(.table-of-contents) li:after と、その先の文章を全部消してください。

数字付き箇条書き

.entry-content ol:not(.table-of-contents) {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  border: solid 2px #ff938b; /*周りの線 solid="実線" 2px=太さ #ff938b"=色 */
}
.entry-content ol:not(.table-of-contents) li {
  position: relative;
  padding: 0.5em 0.5em 0.5em 35px;
  line-height: 1.5em;
}
.entry-content ol:not(.table-of-contents) li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #ff938b; /*数字部分の背景職*/
  color: white; /*数字部分の文字色*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;/*円にする*/
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.entry-content ol:not(.table-of-contents) li:after {/*吹き出しのちょこんと出た部分*/
  content: '';
  display: block;
  position: absolute;
  left: 20px;/*左からの位置*/
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #ff938b;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

こんな感じです。

.entry-content ol:not(.table-of-contents) li:after以下を削除すると、ただの丸で囲われた数字にできます。
後はだいたい中にコメントアウトしてあります！

色の変更

基本的に、#ff938b　みたいな#が付いているやつが色を表しています。
HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
カラーネーム140色－WEBカラーリファレンス
これらのサイトから良い感じの色コードを持ってきて、 同じ#～が書いてあるところ全てを書き換えてください。
そうすると色変えれます。

まとめ

僕が使っているスタイルを解説しました。
良い感じなので、是非使ってみてください。