本ブログはWordPressの有料テーマ「JIN」を使っています。
JINはデフォルトでも十分オシャレなテーマなので、あまりカスタマイズはしていないのですが、リストの表示で少し気になる点がありましたので、先日、重い腰を上げてカスタマイズしました。
気になっていたのは、リストの表示の次の3点です。（画像左）
- 1番下のリストと本文の行間が狭い
- 1階層目と2階層目の行間が狭い
- リストのマークが小さい
この行間を適度な幅にし、リストのマークを少し大きくすることにしました。
結果、こうなりました。（画像右）
さて、その方法ですが、私はCSSについてはほとんどわかっていません。
ということで、いつもそうなのですが、ネットで公開されている同じような事例のCSSのコードを参考にさせていただきました。
少しアレンジして結果的にCSSに書いたコードは以下です。リストを少し左に寄せるコードも書いています。
/*-- リストの左寄せと大きさ --*/
.cps-post-main ul{
padding-left: 20px; /*左に寄せる*/
}
.cps-post-main ol{
padding-left: 20px; /*左に寄せる*/
}
.cps-post-main ul li {
margin-top: 0.7em;/*リストの行間*/
margin-bottom: 0.7em; /*リストの行間*/
padding: 0em 0px 0em 25px; /*マークと文字のスペース*/
}
.cps-post-main ul:not([class]) li:before, .cps-post-main table ul:not([class]) li:before {
width: 8px; /*マークの大きさ 横*/
height: 8px; /*マークの大きさ 縦*/
}
/*-- リストの下の行間 --*/
.cps-post-main ul {
margin-bottom: 2.0em!important;
}
コードを書く場所は、WordPressの 外観＞カスタマイズ＞追加CSS です。
参考にさせていただいたのは、次のサイトです。
