ブログのカスタマイズ

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

このブログ「いつもていねいに」を書いている小田やかたです。
プロフィール @ottaka18

本ブログは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を活用した効率的なインプット・アウトプットの方法をツイッターで発信しています。ぜひフォローしてください。

今すぐFollow!

小田やかた を

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

ABOUT ME
小田やかた
ブロガー&Kindle作家。二人の子どもを持つ共働きサラリーマンです。(プロフィールの詳細)iPhone・iPadアプリを活用した効率的なインプットとアウトプットの方法を発信しています。
関連記事