このブログ「いつもていねいに」を書いている 小田やかた です。
プロフィールはこちら、Xのアカウントはこちらです。

本ブログは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 です。

参考にさせていただいたのは、次のサイトです。

【JIN カスタマイズ】リストスタイルを左寄せ&マークを大きくしてみた｜りゅうた学

この記事は以上です。

このブログの更新情報や、iPhone・iPadを活用した効率的なインプット・アウトプットの方法を X で発信しています。もしご興味があれば、ぜひ以下のボタンからフォローしてください。また、拙著の一覧はこちら（Amazon著者ページ）からアクセスできます。

＼今すぐFollow！／

小田やかた を

このブログには、iPhone・iPad・Apple Watch、アプリ、Kindle出版、ブログ運営などに関する記事があります。カテゴリーページや下にある「関連記事」を、ぜひご覧ください。

JIN WordPress
ABOUT ME
アバター画像
小田やかた
ブロガー＆Kindle作家。二人の子どもを持つ共働きサラリーマンです。（プロフィールの詳細）iPhone・iPadアプリを活用した効率的なインプットとアウトプットの方法を発信しています。