WordPress

stingerのスマホ版でリスト表示されない時の対処法

更新日:

SPONSORED LINK

smart.cssに書き足すだけで出来ます!

僕は毎回、記事を投稿した際にはPC、スマホと両方どんな感じになってるか確認してます。

それでやっぱり投稿後のチェックは必要なんだなと、痛感したネタを一つ。

実は昨日こんな記事を投稿しました。

stingerでiPhone「ホーム画面に追加」のアイコンを簡単に変える方法【stingerカスタム】

内容はiPhoneでブログを「ホーム画面に追加」した時に、アイコンをオリジナルのものに変えるって内容でした。

その中で大まかな手順を説明するためにWordpressのリスト表示を使用しました。

  1. よくあるこういう番号付きのです。
  2. PCでは問題なく表示されてますよね?
  3. 今はスマホでもちゃんとリストになってますよね。

実際にPCでもこんな感じでした。ちゃんとリストになってますよね。

list

で、これをスマホで見てみると…

not-list

リストになってません…焦りましたよ。どうしようかなと、Stingerの公式HPで質問してみようかなとか悩んだり…

でもまずはググらないとと思い、「Stinger  番号付きリスト 表示されない」でググったら一発で出てきた!

それがこのページ。

数字のリストを表示する。

なんだ前からある話題ね。ふむふむ「stlye.css」に以下の記述を追加ね。

/*----------ol--------*/
ol li {
    list-style-type: decimal;
    line-height: 28px;

}
.post ol {
    padding-left: 40px;
}

これを追加すればちゃんと、 …ならない。なんでだ?

と一瞬悩んだのですが、これってスマホだから「smart.css」じゃねってことで一番最後に追加してみました。

そしたらちゃんとなりました〜良かった!

list2

で、これって前から?

僕のStingerのバージョンは3なのですが、ファイル名が20140327となっている最新のものです。

最新で表示されないんだから、過去のも記述ないんだろうなと思いつつ、「smart.css」を前のバージョンとの差分を取ってみました。

そしたら出てきたのは、新しい「smart.css」のGoogleパンくずの上にある「}」が、1つ減っているってことだけでした。

なのでこのスマホで番号付リスト表示がされないってのは、結構皆さん有ることなのかなって思ってます。

良かったら参考にしてください。

-WordPress

Copyright© cv0629 , 2017 AllRights Reserved.