筋トレ大学生によるアウトプット雑記

筋トレや読書のことをはじめとして、プログラミングその他日常生活における様々なことについて書いていきます。

Output Blog

主に筋トレ・プログラミングについて書きます

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

スポンサーリンク



"僕が使っている箇条書き、数字付き箇条書きのスタイル【コピペだけで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カラーリファレンス
これらのサイトから良い感じの色コードを持ってきて、 同じ#~が書いてあるところ全てを書き換えてください。
そうすると色変えれます。

まとめ

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

スポンサーリンク

//タブメニュー