毎日お疲れさまです
管理人です
今回は
【ブログ設定備忘録】箇条書き『ul ol li』
です
最後までよろしくお願いします
【ブログ設定備忘録】箇条書き『ul ol li』
当ブログで使用しているコードです
web上でコピペさせていただいたものを加工しています
コピペできるようにしていますので、ルールを守ってお好きにお使いください
箇条書き
1. リスト
通常の箇条書きです。
- リスト1
- リスト2
- リスト3
HTML表示
<ul>
<li>
<p>リスト1</p>
<p>リスト2</p>
<p>リスト3</p>
</li>
</ul>
CSS表示
とくに設定していません
はてなブログの「テーマ」のままです
2. 番号付きリスト
数字が先頭につく箇条書きです
- 番号付きリスト1
- 番号付きリスト2
- 番号付きリスト3
HTML表示
<ol>
<li>
<p>番号付きリスト1</p>
<p>番号付きリスト2</p>
<p>番号付きリスト3</p>
</li>
</ol>
CSS表示
/* 箇条書き数字(背景あり白文字) */
.list04 {
padding: 0;
position: relative;
}
.list04 li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
}
.list04 li:before {
font-family: "FontAwesome";
content: "\f138";/*アイコンの種類*/
position: absolute;
left : 1em;/*左端からのアイコンまでの距離*/
color: #000;/*アイコン色*/
}
ol {
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0.5em;
}
ol li {
position: relative;
padding: 0.5em 0.5em 0.5em 35px;
line-height: 1.5em;
}
ol li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
background: #808080;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 12px;
border-radius: 50%;/*円にする*/
left: 0;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
/*以下 上下中央寄せのため*/
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
▼参考にさせていただいたサイトです▼
最後まで読んでいただきありがとうございます
