LION BLOGのリストのフォントサイズって、本文に比べて一回り小さいんですよね。
ここでいうリストとは、「番号なしリスト」や「番号付きリスト」のことです。
僕が調べたところ、フォントサイズは以下のようになっていました(ver2.0.0)。
| デフォルト | PC | スマホ |
|---|---|---|
| 本文 | 16px | 14px |
| リスト | 14px | 12px |
個人的にリストのフォントサイズが小さいのが気になったので、本文と同じフォントサイズに変更してみました。
↓↓
| 変更後 | PC | スマホ |
|---|---|---|
| 本文 | 16px | 14px |
| リスト | 16px | 14px |
以下、変更方法をお伝えするので、もしリストのフォントサイズを変更したい場合は参考にしてみてください。
お伝えするコードをコピペしてもらえば出来ますので。
親テーマと子テーマをインストールしていて、子テーマを有効化していることが前提です！
「外観」の「カスタマイズ」をクリックする
LION BLOGのリストのフォントサイズの変更は、カスタマイズ画面から行います。
「追加 CSS」をクリックする
次に、メニューの下にある「追加 CSS」をクリックします。
コードを貼り付ける
そしたら、以下のコードをコピーして、追加CSSの枠に貼りつけます。
.content ul li,
.content ol li{
position:relative;
line-height:1.5;
padding: 10px 0 0 25px;
font-size:1.6rem;
}
@media only screen and (max-width: 767px)
{
.content ul li,
.content ol li{
position:relative;
line-height:1.5;
padding: 10px 0 0 25px;
font-size:1.4rem;
}
}
「 . 」とか「 } 」とかまでちゃんとコピペしてくださいね。
↑こんな感じで貼り付けます。
コードの前半が、PCでのリストのフォントサイズを変更するものです。
で、「@media～」の下がスマホでのリストのフォントサイズを変更するものです。
「公開」をクリックする
そしたら忘れずに、メニューの上の「公開」をクリックして完了です。これで、PCでのリストのフォントサイズは16pxに変更できました。
以上、LION BLOGのリストのフォントサイズ変更についてお伝えしました。
フォントサイズが小さすぎたり、逆に大きすぎたりするとユーザー（読者）にとって読みづらいサイトになってしまいます。
なので細かいですが、「ユーザーが読みやすいフォントサイズになっているかどうか」を常に意識するようにしていくと良いですね。
それでは、お読みいただきありがとうございました。
