LION BLOGのリストのフォントサイズを変更してみた

LION BLOG
スポンサーリンク

LION BLOGのリストのフォントサイズって、本文に比べて一回り小さいんですよね。

ここでいうリストとは、「番号なしリスト」や「番号付きリスト」のことです。

僕が調べたところ、フォントサイズは以下のようになっていました(ver2.0.0)。

デフォルトPCスマホ
本文16px14px
リスト14px12px

個人的にリストのフォントサイズが小さいのが気になったので、本文と同じフォントサイズに変更してみました。
↓↓

変更後PCスマホ
本文16px14px
リスト16px14px

以下、変更方法をお伝えするので、もしリストのフォントサイズを変更したい場合は参考にしてみてください。

お伝えするコードをコピペしてもらえば出来ますので。

親テーマと子テーマをインストールしていて、子テーマを有効化していることが前提です!

「外観」の「カスタマイズ」をクリックする

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~」の下がスマホでのリストのフォントサイズを変更するものです。

※ちなみにフォントサイズを指定する「rem」というのは、htmlで指定されたフォントサイズに対する割合を示します(よくわからないなら飛ばしてOKです)。

僕が調べたところ、LION BLOGではhtmlでのフォントサイズは10pxに指定されていました。1rem=htmlの指定フォントサイズに対して100%なので、10pxです。16pxにしたいなら1.6remに、14pxにしたいなら1.4remにします。

「公開」をクリックする

そしたら忘れずに、メニューの上の「公開」をクリックして完了です。これで、PCでのリストのフォントサイズは16pxに変更できました。

以上、LION BLOGのリストのフォントサイズ変更についてお伝えしました。

フォントサイズが小さすぎたり、逆に大きすぎたりするとユーザー(読者)にとって読みづらいサイトになってしまいます。

なので細かいですが、「ユーザーが読みやすいフォントサイズになっているかどうか」を常に意識するようにしていくと良いですね。

それでは、お読みいただきありがとうございました。

LION BLOG
役に立ったらシェアお願いします!
マーケのじかんをフォローする
スポンサーリンク
ブログ運営者

年収数十億のベンチャー企業で約5年、コピーライター兼マーケッターとして経験を積み、独立しました。セールスレター・LP30本以上、メルマガ・ステップメール1400本以上、SEO記事300本以上書いてきました。情報商材やサプリメント系物販、セミナー集客や英会話教室立上げ、オウンドメディアの立ち上げや運営など、企画・開発・販促・顧客対応など経験してます。

マーケのじかんをフォローする
マーケのじかん