ここ数日の間にWebサイトで解決できなかったり変更したこと

2018.06.10

箇条書きのカスタマイズに悩む

先頭記号を変えたかった

箇条書きの先頭についている

  • ←これ

  • ←これ

にしたかっただけなんだけれど

これが、想定していた以上にうまくゆかず、たいていのことは諦めないのですが
今の自分のスキルでは無理!と断念しました。
だって、トータルで8時間ぐらい掛かりっきりになっていた気がするから。

まず単純な箇条書き

リスト表示_01

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

class だと応用が出来ず idでスタイルを設定。ここまでは楽勝ペースね。

つぎは連番数字を使ったリスト

リスト表示_02

<ol>
	<li>連番数字を使ったリスト表示</li>
	<li>連番数字を使ったリスト表示</li>
	<li>連番数字を使ったリスト表示</li>
</ol>

連番数字は前から使っているので、これも、ここまでは楽勝でした。

3番目は箇条書きの入れ子

リスト表示_03

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

この程度の箇条書きの入れ子は現実としてあるかもしれません。問題なしです。

4番目は連番数字の中に箇条書き

リスト表示_04

<ol>	
<li>連番数字を使ったリスト表示
<ul id="mark">
	<li>記号を使った箇条書き</li>
	<li>記号を使った箇条書き</li>
</ul></li>
<li>連番数字を使ったリスト表示</li>
</ol>

私がよく使うケースの箇条書きかもしれません。問題なしです。

5番目は連番数字と箇条書きの3層

リスト表示_05

<ol>
	<li>連番数字を使ったリスト表示</li>
	<li>連番数字を使ったリスト表示
<ol class="nest">	
	<li>連番数字のネスト</li>
	<li>連番数字のネスト
<ul id="mark">
	<li>記号を使った箇条書き</li>
	<li>記号を使った箇条書き</li>
</ul></li>
	<li>連番数字のネスト</li>
</ol></li>
	<li>連番数字を使ったリスト表示</li>
</ol>

自分の使うパターンとしては、せいぜい4番目ぐらいまでなんだけれど、紹介しようと思うと、最後までやらなきゃならなくて
次にこのパターンで書いてみました。ここまで問題なしです。

6番目は箇条書きと連番数字の3層

リスト表示_05

<ul id="mark">
<li>連番数字を使ったリスト表示
<ol class="nest">	
	<li>連番数字のネスト
<ul id="mark">
	<li>記号を使った箇条書き</li>
	<li>記号を使った箇条書き</li>
	<li>記号を使った箇条書き</li>
</ul></li>
	<li>連番数字のネスト</li>
	<li>連番数字のネスト</li>
</ol></li>
	<li>記号を使った箇条書き</li>
	<li>記号を使った箇条書き</li>
</ul>

そろそろ怪しくなってきましたよ。
3層目のインデントが大きすぎるのですが、どうにもコントロールが出来ません><

もっといろんなパターンを書いて試してみたのですが、疲れて諦めました。
もうちょいスキルアップしてから再挑戦しようと思います。
ただ、これでも決して見た目は悪くないとは思うのだけれど、コードの書き方が正しいとは到底思えません。
なので、今回はのちのちの自分のために覚え書きとして残しておこうと思いました。

なんとか書いた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;
}
/* リスト数字ネスト */
ol.nest {
	counter-reset: li;
}
ol.nest > li {
	list-style: none;
	padding-left: 0; 
}
ol.nest > li:before {
	counter-increment: li;
	content: counter(li)'.';
	color: #333; 
	left: -25px; 
	color:#1e73be; /* アイコンの色 */
	font-size:15px;
	text-align: center; 
	width: 1.8rem; 
	height:1.8rem;
}
/* 箇条書き */
#mark{
	list-style-type:none;
	padding: 0;
}
#mark li{
	padding-left: 5px;
}
#mark li li{
	padding-left: 20px;
}
#mark li:before {
	content: "•";
	color: #777;
	margin-right:8px;
}
#mark ol > li {
	margin-left: 10px; 
}
#mark ol > li:before {
	content: counter(li)'.';
	left: -13px; 
	color:#1e73be; /* アイコンの色 */
}

追加した見出しのスタイル

リンク下のパターンを追加しました。
見出し_01

今この記事が拍手されました

拍手ありがとうございます!
フッターに置いていたこのウィジェットをサイドバーの目立つ位置に置きました。
目的は、もっと拍手が増えるとうれしいな~と思ったから、それだけです!w
拍手ボタンをクリックしたあと、ページをリロードすると表示されます♪

フッターに固定ページなどのリンク一覧

拍手ページのウィジェットを置いたので撤去していたリンク一覧を、復活&リンク先を変更しました。
フッターのインフォメーション
この辺りのカスタマイズなら書けるので、また記事にしたいと思います!

やっぱりカスタム投稿「管理人のつぶやき」だけは、いるね(笑)

0

2018.06.10

Posted by どらみ