Luxeritas(ルクセリタス)でリスト表示をカスタマイズする

2018.01.25カスタマイズ

みなさん、HTMLで文章を書くときに順番をつけて箇条書きにしたい時はありませんか?
え?いちいち先頭に数字や記号を書くんですか?それはオススメではないですので、今回は箇条書きの書き方とスタイルのカスタマイズについてご案内します!

ルクセリタスで箇条書きの表示をカスタマイズする

デフォルトの表示

まずはデフォルトの表示ですとこんな感じになります。
ol ul css default

デフォルトのHTML
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul>	
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>

数字を丸で囲む

ul にはクラス”mark”をつけて、先頭の記号はフォントアイコンを使用しています。
ol ul css

HTMLの書き方
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul class="mark">	
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>

フォントアイコンの色と種類はCSSの39、40行目を書き換えることで変更できます。

CSS
/* リスト数字 */
.post ul, .post ol {
	padding: 0 0 0 10px; /* 上 右 下 左 */
}
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 3rem; 
	line-height: 3.2rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li);
	background: #1e73be; /*blue*/
	color: #ffffff; 
	border-radius: 50%; 
	text-align: center; 
	width: 2.2rem; 
	height: 2.2rem;
	position: absolute; 
	left: 0rem; 
	top: .5rem; 
	line-height: 2.2rem;
	font-family: 'Arial',sans-serif;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	padding: 0 0 0 5px;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f0da"; /* アイコンの種類 */
	color:#1e73be; /* アイコンの色 */
	font-family: FontAwesome;
	margin-right: 1rem;
}

イタリック文字

ol-ul-css-02

HTMLの書き方
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul class="mark">	
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>
CSS
/* リスト数字 */
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 2rem; 
	line-height: 3.0rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li)'.';
	color: #1e73be; 
	position: absolute; 
	left: -1.3rem; 
	font-style:italic;
	font-size:1.8rem;
	text-align: center; 
	width: 2.5rem; 
	height: 2.5rem;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f111"; /* アイコンの種類 */
	color:#1e73be; /* アイコンの色 */
	font-family: FontAwesome;
	margin-right:1.2rem;
}

イタリック色違い(モノクロ)

ol-ul-css-03

HTMLの書き方
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul class="mark">	
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>
モノクロのCSS
/* リスト数字 */
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 2rem; 
	line-height: 3.0rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li)'.';
	color: #333; 
	position: absolute; 
	left: -1.3rem; 
	font-style:italic;
	font-size:1.8rem;
	text-align: center; 
	width: 2.5rem; 
	height: 2.5rem;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f0da"; /* アイコンの種類 */
	color:#999; /* アイコンの色 */
	font-family: FontAwesome;
	margin-right:1.2rem;
}

あとがき

例によって例のごとく、CSSを何度も修正してキャプチャを撮っている間にわけがわからなくなりましたヽ(@◇@)ノ
Webには色々なリストデザインがあると思いますが、私がここで紹介しているのは、私が使いたいと感じるデザインだけです。
自分がわからずに調べた時「こう書いてあるとわかりやすいな」と感じるよう、心がけて書くようにしています。
あまり点数はありませんが、気に入るものがあればお使いくださいね^^
ルクセリタステーマですぐに使えるようになっています。
すべてのブラウザ、モバイルで表示を確認しているわけではありませんのでご了承ください。

2018.02.1カスタマイズを反映させるためのHTML記述を、簡素化してすべてのCSSとセットで展示しました。
0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ

2018.01.25Luxeritas, リスト, ルクセリタス