cBlog

Tips for you.

番号付きリストがはみ出ていたので直した

スポンサーリンク
※当ブログのAmazon、iTunes、サウンドハウス等のリンクはアフィリエイトを利用しています。

はてなブログの人気テーマ「Written」。私も気に入って使わせてもらっています。

 

このあいだ、番号付きリストが2桁になると、番号が記事左の余白にはみ出していることに気づきました。特に、レスポンシブデザインONにしていてスマホビューで見ると、画像のように番号の10の位が見えなくなってしまいます。

f:id:cruller:20151124225706p:plain

 

この現象ですが、簡単なcssの書き込みで直せたので共有します。

 

下のコードを、ブログの管理画面のデザイン→カスタマイズ→デザインCSSに追加するだけです。

.entry-content ul,.entry-content ol{margin-left:2em;}

 

あらかじめimportされているcssの下に追記してください。(cssは後から指定されたものが優先されるためです。もちろん、ダウンロードしたcssを直接書き換えたものを貼っても大丈夫です。)

 

といっても、デフォルトでリストの左マージンが1.5emになっていたのを2emに増やしただけです。

 

これで、たぶん99個までは大丈夫ですが、万が一100以上リストにする場合はmargin-leftにもっと大きな数値を指定してみてください。

HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座