vanillaice (Akira)

vanillaice (Akira)

昨日Google Chromeブラウザのアップデートを行いまして
気づいたことがいくつかありますので記事にしようと思います
まずは 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シェアブラウザを無視するわけにいくまい _(┐「ε:)_
関連記事

Comments 5

There are no comments yet.
Tammy  
助けてください・・

いつもテンプレート使わさせて頂いてますありがとうございます<(__)>
記事に直接関係ないことですみません・・・
GoogleChromeを使っているのですが去年の春くらいからアップデートできなくて困っています・・・
いまもしてみたのですが%のところが進んで行かず0x80070005という数字が出ます
リストマーカーは今のままでいいのでこのままアップデートしなくていいでしょうか?
アップデートのしかたを間違えているのかもしれません・・・
右上にある三本線を押してヘルプでGoogleChromeについてを押しています
もしおわかりでしたら教えてもらえませんでしょうか?
ブログのリンクをシークレットで入れておきます、よろしくお願いします・・・

2016/09/09 (Fri) 16:00 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/09/09 (Fri) 16:00 | EDIT | REPLY |   
Akira  
To Tammyさん

ありがとうございます ( ゚Д゚)ノ

ご利用の環境はWindowsでお間違いないでしょうか。
Chromeを一旦閉じられまして、Chromeアイコン上で右クリック
「管理者として実行」(だったと思います 若干違うかも)

管理者権限で開き、その上で手順通り(Tammyさんが書いておられる通り)行えば出来ると思います。

======

ブラウザのUAが変わってしまうかもしれないことを恐れるよりも、
やはりセキュリティを重視すべきだと思いますので、常に最新版にしておいた方が良いと思います。
見た目などは後回しで ^^;
一度お試しくださいませ。

2016/09/09 (Fri) 16:20 | EDIT | REPLY |   
Tammy  
To Akiraさん

できました!
修正作業中だと気がついて迷惑ではないかと消そうと思ったのですが、もうお返事を頂いていて申し訳ありませんでした
お取り込みのところ親切に教えてくださり本当にありがとうございました!
これからも素敵なテンプレートを使わさせてくださいね♪

2016/09/09 (Fri) 16:41 | EDIT | REPLY |   
Akira  
To Tammyさん

作業中だったので早く気付けて良かったです(笑)
お気遣いありがとうございます。
作業お疲れ様でした

2016/09/09 (Fri) 17:04 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ