ブログ記事内のコラム・エリア内に、リスト<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」で一気に置換してしまうことにします。
するとこのようにチェックマークも消えて、番号も何となくそれなりの場所に表示されました。まだまだ微妙なトコロが幾つかありますが、これ以上深追いはしません。
しかしこのコラム・エリアの修正、絶対見落としてるページが幾つか残っているハズ。いつか偶然見つけた時に直す、というユルイ態度でやり過ごすとします。
2015-09-05 > VPS&WordPress引っ越しメモ