ブログ開設・改造

WordPressのテーマ「JIN」のリストのカスタマイズ

本ブログは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 カスタマイズ】リストスタイルを左寄せ&マークを大きくしてみた|りゅうた学


以上です。

本記事は参考になりましたか?
もし、少しでも参考になったことがあれば、フォロー&シェアしていただけるとうれしいです!!


また、「1分で読める書評ブログ」も運営していますので、興味があれば、ぜひご覧ください。

ABOUT ME
小田やかた
小田やかた
二人の子どもを持つ共働きサラリーマンパパ。現在、小学生と保育園児の子育てに奮闘中です。 本ブログは、iPhoneとPCでの情報管理、文章作成、タスク管理がメインテーマのブログです。知的生産のある暮らし(新しい価値を生む暮らし)を目指しています。 『アウトライナーのレシピ 〜思考・情報整理・文章作成がはかどる20の使い方〜』、『モブログの極意 〜モブログからモバイル知的生活へ〜』、『Apple Watchで何ができるか〜Apple Watchユーザーの起床から就寝までの実際の使い方を徹底公開〜』を出版。
関連記事