LION MEDIAの文字サイズを変更する方法-CSSでカスタマイズ

LION MEDIAの文字サイズを変更する方法-CSSでカスタマイズ

今回は、WordPressのテーマである「LION MEDIA」の文字サイズを変更する方法をご紹介します。
デフォルトでは少し文字が小さいという方は参考にしてください。
今回紹介するカスタマイズは凄く簡単ですので最後まで読んでいただけると光栄です。

文字サイズを変更するCSS

記事の文字サイズを変更するには、CSSをカスタマイズすることになりますが、LION MEDIAには子テーマが配布されていますので、今回は子テーマに書いていきます。
子テーマを使われていない方は、ぜひ子テーマをインストールしてください。子テーマを利用する理由とインストールの方法は、以下で説明しています。

子テーマにCSSを書く

文字サイズを変更するCSSは、以下になります。コピーして貼り付けるだけです。
まずは、文字サイズを変更するCSSをご紹介します。その後に貼り付ける方法を説明していきます。

上記のCSSをコピーします。

手順1: テーマの編集

WordPressのダッシュボードから「外観」→「テーマの編集」へ進みます。

テーマの編集

手順2: 子テーマを開く

LION MEDIA Child」の子テーマを開きます。 LION MEDIAの子テーマを使われている方は「テーマの編集」をクリックした時点で子テーマの「スタイルシート (style.css)」が開いているはずです。

「LION MEDIA Child」の「スタイルシート (style.css)」が開いていない人は以下のように選択してください。

LION MEDIAの子テーマCSS

手順3: 子テーマにCSSを追加

それでは、子テーマの「style.css」に文字サイズを変更するCSSを貼り付けましょう。
下記ユーザーカスタマイズエリア」の下に追加します。

このCSSは、パソコン用とスマホ用の2種類のCSSを書いています。
それぞれの文字サイズを指定できるようになっていますので、次はパソコン用、スマホ用の変更方法を説明していきます。

パソコン用の文字サイズを調整する

パソコン用のCSSは以下になりますので、以下の部分を変更します。
変更が必要ない方は、貼り付けた後は、特に何もする必要はありません。

font-size: 18px;  18pxをお好きなサイズに変更する

color:#505050;  #505050をお好きな色に変更する

line-height: 1.6;  1.6をお好きなサイズ変更する

スマホ用の文字サイズを調整する

スマホ用(iPhoneなど)の文字サイズは、以下で調整します。こちらも、変更が必要ない方は、貼り付けた後は、特に何もする必要はありません。

変更の方法は、パソコン用と同じで文字サイズなどを好みに合わせて変更してください。

僕は、パソコンは「18px」、スマホは「17px」がちょうどいいのではないかと思います。

まとめ

LION MEDIAの文字サイズや文字色を変更するCSSをご紹介しました。
この他にもLION MEDIAのカスタマイズ方法を多数ご紹介していますので、下の方をご覧ください。目的別にご紹介しています。

 

この記事が気に入ったら
いいね ! しよう

LION MEDIAカテゴリの最新記事