本ブログは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 です。
参考にさせていただいたのは、次のサイトです。
この記事は以上です。
もし、少しでも参考になった内容があれば、下の「いいね」ボタンを押してください。励みになります！
このブログには、iPhone・iPad・Apple Watch、アプリ、Kindle出版、ブログ運営などに関する記事があります。カテゴリーページや下にある「関連記事」を、ぜひご覧ください。
