共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

WordPress

【STINGER5】番号付リストのズレの直し方

投稿日:

どうも、働かない夫です。

今まで放置していましたが、番号付きリストを100個も作ってみると超絶気持ち悪い結果になりました。STINGER5のデフォルト状態では番号付きリストは欠けて表示されています。番号付きリストのズレを直しましたので方法をシェアします。

なんだっ!この気持ち悪い表示は!?とお困りの方は続きをどうぞ。

番号付きリストのズレ

まずは、STINGER5の番号付きリストのズレを見てみましょう。こちらはパソコンから見ている状態です。スマホから見るともっとずれています。

数字リストズレ

 

これだと二桁行くともう見れませんね。二桁もなかなか使いませんが、SEO的にも「1、2、3、」とベタうちするよりもリスト表記させた方が良いので、直しておきましょう。

ズレを修正

修正した結果は以下の通りです。

STINGER5リスト修正

 

iPhone6 Plusで確認したところ対応できいました。見やすさを求めると改善した方が良いですね。

ズレを直す方法

ホーム>外観>テーマの編集>スタイルシート(style.css)を開いてください。

/*リスト */と表記されているところを探して【.post ol】の部分を以下のように差し替えてください。

.post ol {
	list-style-type: decimal;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
        margin-left: 25px;
	margin-bottom: 20px;
}

 これで改善されますので、試してみてください。

まとめ

ちょっとした所ですが、見やすさは改善されましたね。

細かなところですが、番号付きリストを使う場合は見直してやってみましょう。

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-WordPress
-

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved Powered by AFFINGER5.