list-item横の隙間について

先に結論から



list-item(リスト あいてむ) というのは display(でぃすぷれい)プロパティの値です

<ul>

あるいは

<ol>

といった「リストを定義」するhtmlタグをみなさんもご覧になったことがあるかと思います
この

<ul>

や

<ol>

の子供に

<li>

という要素があり これらは必ずワンセットです

正しい例) ulの子供にli

<ul>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
</ul>

間違った例) 親のulが無い

<li>内容</li>
<li>内容</li>
<li>内容</li>

<li>要素のdisplay初期値が list-itemです




ここから本題です
今までのChromeの表示 スクショ①



53.0.2785.101へのアップデート後 スクショ②




丸いポッチを リストマーカー と呼び
黒丸であったり 白丸であったり 四角であったり と様々な指定ができますが
アップデート後はそのマーカーとリスト内容との間に空白ができてます

これが気になるかどうかなんですよね (´・ω・｀)
これまでの見た目がスクショ①だったのに 突然②になった…
という方は Chromeのアップデートをされた方です

原因は 私のCSS内容にあります

list-style-position: inside;

マーカーの位置を「inside (いんさいど = 内側)」に指定していると起こります
対象ブラウザは以下の通り

・Chromiumベースブラウザのみ (Windows, Mac共通)

Chromium(くろみうむ)というのはブラウザのベースになるもので Chromiumベースブラウザの代表がGoogle Chromeです
他にも
・Opera
・Vivaldi
・Sleipnir
・SRWare Iron
などが挙げられます
恐らくブラウザのバージョン云々よりも Chromiumのバージョンに起因していると思いますので
既にアップデートの入っているGoogle Chrome
そしてこちらも最近アップデートのあったVivaldiはスクショ②の状態です
Operaなどはまだアップデートが来ていませんのでスクショ①の表示ですが いずれ②に移行すると思います
Microsoft系ブラウザ(IE11, Microsoft Edge)はもともと隙間ができるUAになってます
スクショ②よりもちょっと距離が狭いかな といった感じです
FirefoxやSafariはChromiumベースではありませんのでスクショ①と同じ表示です

構造上なにかしら問題を引き起こしたり レイアウト崩れを呼びこむ類のものではありません
単純に「見た目」の問題です
リセットCSSでは効果がないようですので なんとなく気持ちが悪いなぁ と感じられます方は修正をお願いします
繰り返しますが 見た目だけの問題なので
めんどくさい・特に気にならない という方はどうぞそのままで

該当するテンプレ別に修正の仕方を追って記しますのでしばしお待ちください
この記事に追加していきます
お手数おかけします よろしくお願いします

========

下記に掲載されているテンプレートは公式に上書き済みです
カスタマイズを済ませており 再DLが困難な方はお手数ですが手作業での修正をお願いします

Ctrl+F(Windows)/ Command+F(Mac) キーを利用して対象箇所を検索してください(最初の一行目をコピペして検索)



● Colony
● Little-thing
● Mocha
● Belong
● All-about-us
● Southerly

検索

.side-menu ul {
  list-style: disc inside;
}

以下の通り変更

.side-menu ul {
  list-style-type: disc;
}

続きまして 上記内容のすぐ下に以下の内容を追加

.side-menu ul li {
  margin-left: 1.5em;
}

● Fraise
● Nostalgia

検索

.side-menu ul {
  list-style: circle inside;
}

以下の通り変更

.side-menu ul {
  list-style-type: circle;
}

続きまして 上記内容のすぐ下に以下の内容を追加

.side-menu ul li {
  margin-left: 1.5em;
}

● Liberty

検索

.side-menu ul:not(#sns-ul) li {
  list-style: square inside;
  color: rgb(179,179,179);
}

以下の通り変更

.side-menu ul:not(#sns-ul) li {
  margin-left: 1.4em;
  list-style-type: square;
  color: rgb(179,179,179);
}

● Promise-Me * カレンダーの月表示も調整しました

検索

.side-menu ul:not(#sns-ul) li {
  list-style: square inside;
  color: rgb(179,179,179);
}

以下の通り変更

.side-menu ul:not(#sns-ul) li {
  margin-left: 1.5em;
  list-style-type: square;
  color: rgb(179,179,179);
}

● Quiet

検索

.side_bar ul {
  list-style-type: disc;
  list-style-position: inside;
}

以下の通り変更

.side_bar ul {
  list-style-type: disc;
}

続きまして 上記内容のすぐ下に以下の内容を追加

.side_bar ul li {
  margin-left: 1.5em;
}

● Life-is

検索

.separate ul li {
  list-style-type: square;
  list-style-position: inside;
}

以下の通り変更

.separate ul li {
  margin-left: 1.5em;
  list-style-type: square;
}

● Decoy

検索

.side_bar ul {
  list-style-type: square;
  list-style-position: inside;
}

以下の通り変更

.side_bar ul {
  list-style-type: square;
}

続きまして 上記内容のすぐ下に以下の内容を追加

.side_bar ul li {
  margin-left: 1.5em;
}

● BetweenNeo
● Bliss
● Chilling * 主要プラグイン整形, 最優先フォント変更も併せて行いました
● Valparaiso * 最優先フォント変更, ページ遷移動作変更も併せて行いました

検索

#sidebar li {
  list-style-type: disc;
  list-style-position: inside;
}

以下の通り変更

#sidebar li {
  margin-left: 1.5em;
  list-style-type: disc;
}

● Fields

検索

.sidebar li {
  list-style-type: disc;
  list-style-position: inside;
}

以下の通り変更

.sidebar li {
  margin-left: 1.5em;
  list-style-type: disc;
}

● GirlOnWire

検索

#sidebar ul {
  list-style-type: disc;
  list-style-position: inside;
}

以下の通り変更

#sidebar ul {
  list-style-type: disc;
}

続きまして 上記内容のすぐ下に以下の内容を追加

#sidebar ul li {
  margin-left: 1.4em;
}

● Paradiso * 最優先フォント変更, 主要プラグイン整形も行いました

検索

.side_bar li {
  list-style-type: square;
  list-style-position: inside;
}

以下の通り変更

.side_bar ul li {
  margin-left: 1.5em;
  list-style-type: square;
}

● AnotherDay(azure/ mauve) * 最優先フォント変更, 主要プラグイン整形も行いました

検索

.side_bar ul li {
  list-style-type: disc;
  list-style-position: inside;
}

以下の通り変更

.side_bar ul li {
  margin-left: 1.5em;
  list-style-type: disc;
}

========

以上です
ここに掲載されていないテンプレ = リストマーカーを利用していない
と思ってください

マーカー位置を初期値のoutsideに戻し 領域の外に飛び出しているものをmarginで引き戻す
というのをやってます
サイドメニューに設置されるリスト系プラグインは全てその影響を受けます
なのでできればinsideで行きたかった… けどこうなっては仕方がないですね (´・ω・｀)
Chromeだけなんだよなぁ… （￣∀￣；）
だけど世界NO1シェアブラウザを無視するわけにいくまい _(┐「ε:)_