連載第121回
2015年9月5日
リスト表示のマイ・ルール備忘録

 ブログ記事内のコラム・エリア内に、リスト<li>を並べて箇条書きしている場合があります。通常、デフォルトではこんな感じの(↓)チェックマーク画像を表示させるようにしているのですが…

リスト時のチェックマーク

  • ←こんな感じのSVG画像を作成して
  • CSSで指定しています。

 前回、プラグインを使って全更新したら、当然のように見た目の不具合が幾つか出てきてしまいました。
 これはリストに番号(<li style=”list-style-type:decimal” >)を振っていた場合(↓)。番号と一緒に、チェックマーク画像も表示されてしまっています。

 ちなみに、CSSではこのように設定しています。

CSS

#post .block li {
	font-family: "Hiragino kaku Gothic W3", "Lucida Grande";
	line-height: 1.4;
	background: url("check.svg") left center no-repeat;
	margin: 10px 10px 6px 0px;
	padding-left: 20px;
	color: #444;
	font-weight: normal;
	list-style: none;
}

4行目:check.svgを表示するよう指定しています。

 なので、番号リスト表示を行う場合は、下記のように直接記事内でstyleのパラメータを追記して更新します。でも面倒。

html

<li style="list-style-type:decimal;margin-left:-10px;background:none" >〜</li>

 どう考えても面倒なので、上記作業は、前回同様「Search Regex」で一気に置換してしまうことにします。

 するとこのようにチェックマークも消えて、番号も何となくそれなりの場所に表示されました。まだまだ微妙なトコロが幾つかありますが、これ以上深追いはしません。

 しかしこのコラム・エリアの修正、絶対見落としてるページが幾つか残っているハズ。いつか偶然見つけた時に直す、というユルイ態度でやり過ごすとします。