WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズです。
リストタグ(ul,ol,li)のフォントも変更したい
シンプルさが人気のワードプレステーマであるSTINGER8。
STINGER8の記事本文のフォントサイズの変更は以前の記事で扱いました。
前回の記事：STINGER8 フォントサイズを変更する
しかしながら、
STINGER8は記事本文のフォントを変えただけではリストタグ(ul,ol,li)がデフォルトのままだったりします。
例えば本文のフォントを大きくしても、箇条書きの文字は小さいままだったりします。
そのため、今回はリストのフォントも本文に合わせたいと思います。
リストのフォントを変更するには、本文同様に「style.css」にコードを追記します。
「style.css」を編集する
以下、手順です。
直接テーマを編集するので、子テーマを準備しておくことをおすすめします。
「外観」→「テーマの編集」にて、「style.css」を開きます。
STINGER8は、想定するデバイスがパソコンなのかスマホなのかタブレットなのかでコードを記述する場所が異なります。
例えばパソコンなら、
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
/*-- ここまで --*/
}という場所にコードを追記します。
以下のような感じです。
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
/*リストのフォント */
.post ul li {
font-size: 18px;
line-height: 27px;
}
/*-- ここまで --*/
}これでリストタグにおいて点がつく箇条書きのliタグのフォントサイズが調整できます。
まとめ
リストタグは箇条書きに点がつくuiタグと、数字がつくolタグがありますね。
両方ともフォントサイズを本文と合わせたいと思います。
例えばこんな感じです。
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
.entry-content p {
font-size: 18px; /* 文字サイズ */
line-height: 27px; /* 行間 */
}
.post ul li {
font-size: 18px; /*ulのフォント */
line-height: 27px; /* 行間 */
}
.post ol li {
font-size: 18px; /*olのフォント */
line-height: 27px; /* 行間 */
}
/*-- ここまで --*/
}各フォントのpxの値を変えれば調整できます。
同様に、フォントの大きさに応じて行間も調整すればより見やすさを追求できそうです。