サイト名を「ブログチップス」から「マーケのじかん」に変更しました(2018.12.6)

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

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

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

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

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

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

↓↓

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

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

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

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

広告

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

LION BLOGのリストのフォントサイズの変更は、カスタマイズ画面から行います。

WordPress外観のカスタマイズ

「追加 CSS」をクリックする

次に、メニューの下にある「追加 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;
}
}

「 . 」とか「 } 」とかまでちゃんとコピペしてくださいね。

lionblog コードを貼り付ける

↑こんな感じで貼り付けます。

コードの前半が、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 の進化版「THE THOR(ザ・トール)」もおすすめです。僕が実際に使っていてレビューしているので、良かったら別の記事『評判のTHE THOR(ザ・トール)をユーザーの僕が本音でレビューします』を読んでみて下さい。

もしあなたがフリーランスや個人事業主なら

アンケートにご協力いただけませんか?

というのも、フリーランスや個人事業主同士で集まれるようなコミュニティを作りたいと考えているためです。頂いた意見を参考にして、より多くのフリーランスや個人事業主の役に立つコミュニティを作り上げていきます。そのためにもあなたの力が必要です。ということで、以下をクリックしてアンケートに答えてみて下さい。

ここをクリックしてアンケートに答える

LION BLOGのリストのフォントサイズを変更してみた
最新情報をチェックしよう!
広告