【ココログ】スマホ表示でリストのlist-style-typeが効いていないことの対処

ココログスマホ表示のリストの問題点

ココログのスマホ表示では、
何もしていないとリストを表示する時に
「オーダーリスト（HTMLでいうと ol）の番号」と
「アンオーダーリスト（HTMLでいうと ul）の・」が表示されません。

PC版だとこうなるのに

スマホ版だとこうなります。

これに対処するため、
【ココログ】スマホ版で改行位置を調整する方法で作った

PC 版とスマホ版で共通の CSS に
オーダーリストとアンオーダーリストのスタイルを記述します。

Google DevToolsで調べてみた

最初は「list-style-typeが効いていない」と思って
Google DevToolsで調べたところ、
原因は、１つではなく、２つありました。

• 番号や・を表示するマージンが 0 になっている
• list-style-type が None である

PC とスマホで共通のCSSの変更点

具体的には こう書きます。

.article-body ol{

  margin-left: 25px;

}

.article-body ol > li{

  list-style-type: decimal;

}



.article-body ul{

  margin-left: 25px;

}

.article-body ul > li{

  list-style-type: disc;

}

PC とスマホで共通のCSSについて
共通で使われる CSS なんですが、
実は、PC版とスマホ版では、HTMLのセレクタ構造が全然違います。

そもそもPC版は、XHTML1.0。
スマホ版は、HTML5 と HTML のバージョン自体が違うんです(´・ω・｀)

PC版だと「entry-」で始まるセレクタのプレフィックスが
「article-」となっているのは
HTML5で導入されたタグ「article」の関係でしょう。

上記のようなCSSにしたのは、
CSSの読み込みがブログサブタイトルの設定を使っていて
PC版とスマホ版で共通で使われてしまうCSSなので
PC版のCSSの設定を上書きしないよう、影響範囲を明示するためです。

上記のCSSが反映されると
オーダーリストはこうなります。

アンオーダーリストはこうなります。

まとめ

スマホ版のココログのCSSを変更できるの、良い感じですね！

ココログのスマホ表示で
「オーダーリスト（HTMLでいうと ol）の番号」と
「アンオーダーリスト（HTMLでいうと ul）の黒ポチ」が表示されなくて
困っている人は、この記事で書いたCSSを試してみてください。

また分かったことがあったら紹介します。(^^)/