ワードプレス賢威の文字フォントサイズや色をCSSで変更または設定する方法


賢威のサイトを作るとき、文字の大きさや色などを変えたいと思う時があると思います。

そういう時はワードプレスのCSSファイルにあるコードを編集します。

賢威で文字の色やサイズを変更するには、どのCSSファイルを編集するのか?

ワードプレスのレイアウトやデザインを変更する場合、通常はstyle.cssというCSSファイルにひとまとめになっていて、その中にコードがぎっしり詰まっているものです。

ただ、賢威の場合、style.cssを開くと、以下の画像のように、複数のCSSファイルが存在します。

<賢威7> <賢威6.2>
賢威7 css 1

それぞれ目的別にCSSファイルが分かれているので、編集場所までたどり着きやすいというメリットがあります。

今回の目的である、文字の色やサイズを変更するためのファイルは、

賢威7であれば、『base.css』を編集します。

賢威6.2であれば、『design.css』を編集します。

それぞれのファイルを開くには、

ワードプレスのダッシュボード→外観→テーマの編集(エディター)

の順にクリックすると、上記画像の項目を見つけることができます。

編集するコードを見つける方法

先に解説した通り、賢威で文字のフォントサイズや色を変更する場合、『base.css』『design.css』のファイル内のコードを編集します。

なので、『base.css』『design.css』のファイルを開き、目的のコードのみを書き加えたり、書き換えたりします。

2

上の画像を見てもらえば分かりますが、

1:サイト全体の背景設定

2:サイト全体の共通設定

3:エリアの設定

などのように、どこがどのような部分を担当しているか分かりやすいですよね。

賢威はこのように、編集者にも分かりやすく作られているので、非常に便利です。

ただ、CSSに慣れていないと、どのコードを編集すればいいか分からないこともあります。

その時は、まずグーグルクロームブラウザを立ちあげ、対象のページにアクセスします。そして、変更したい箇所にカーソルをあわせ、右クリックし『要素の検証』という部分を出して下さい。

3

この要素の検証と言うのは、サイトに用いられているコードが分かるようになっていて、この部分を編集すると、この画面上でだけ一時的に編集内容を反映させることが出来ます。

使い方については詳しく説明はしませんが、上の画像赤枠部分がこのサイトのCSSを表示しています。ここから、編集したい場所のコードを確認して、同じ部分を『base.css』『design.css』のファイルから探し出します。

4

編集するコードがどこにあるかわからないという方は、検索窓を利用します。

マックをお使いの方は「command+F」、Windowsをお使いの方は「Ctrl+F」を押して、画面右上に画像のような検索窓を表示させて下さい。

そこに探したいコードを入力すると、一致した文字がどこにあるか、何個あるかが分かるようになり、上下の矢印でその場所まで移動することができます。

CSSのみならず、PHPやその他プログラムなどを編集するときの基本なので、覚えておいてください。

賢威7で投稿記事の文字の大きさ(フォントサイズ)を変える方法

ここまでで、賢威で文字の色やサイズを変更場所や、変更するコードの見つけ方を理解することができました。

ここからは、賢威7と賢威6.2、それぞれで文字の色やサイズを変えてみます。

まずは、賢威7で投稿記事の文字の大きさ(フォントサイズ)の変更方法を見ていきます。

賢威7で投稿記事の文字の大きさ(フォントサイズ)を変更するには、まずは

ワードプレスのダッシュボード→外観→テーマの編集

の順にクリックし、base.cssのファイルを開き、以下の画像の箇所を探します。

賢威7 メインコンテンツ フォントサイズ

上記画像の『メインコンテンツ』を見つけたら、その項目の中にある『line-height: 1.8;』のすぐ下に1行追加して、以下の一文を書き加えます。

font-size: 1.5em;

上記一文を書き加えると、以下のようになります。

賢威7 文字(フォント)サイズ 変更

『font-size』というのは、文字の大きさをコントロールするCSSのコードです。

『em』というのは、文字の大きさをコントロールする単位の一つです。

『em』は、1を基準とした単位ですので、1より大きければ、いま表示されている文字サイズより大きくなります。

逆に、1より小さければ、いま表示されている文字サイズより小さくなります。

今回は、一例として『1.5em』にしていますが、

文字サイズを大きくしたい場合:1.25em、1.5em、1.75em…

文字サイズを小さくしたい場合:0.75em、0.5em、0.25em…

などのように、『1』の値を少しずつ大きくしたり、小さくしたりして、調節していきます。

以下の画像は、1emの状態(上の画像)と1.5emの状態(下の画像)を比較したものになります。

以下の画像を見ると分かりますが、サイドバーに表示される文字の大きさは変わらないですが、下の画像(1.5em)のメインコンテンツエリアの文字が大きくなっていることが分かります。

賢威7 文字サイズ 変更

このように、賢威7では『base.css』の中にある、『メインコンテンツ』で文字サイズの指定をすることで、文字の大きさを変えることができます。

ただ、『メインコンテンツ』から文字サイズを変更することで、メインコンテンツエリアに表示される全ての文字サイズが変わります。

メインコンテンツエリアというのは、賢威7の2カラムレイアウトであれば、ヘッダー下の左側がメインコンテンツエリアです。

賢威7 2カラム 構成

なので、見出しや関連記事、コメント欄の文字サイズを個別に変更する場合は、グーグルクロームの『要素の検証』を使って、該当するコードを探し、同様の手順で文字サイズを指定します。

賢威7で投稿記事の文字の色を変える方法

賢威7の文字色を変更するには、

ワードプレスのダッシュボード→外観→テーマの編集

の順にクリックし、base.cssのファイルを開き、以下の画像の箇所を探します。

賢威7 body ファイル

上記画像の『賢威テンプレートの共通設定』を見つけたら、その項目の中にあるbody要素に、以下の一文を書き加えます。

color: #333

上記一文を書き加えると、以下のようになります。

賢威7 文字色 変更

『color』というのは、色をコントロールするCSSのコードです。

『#333』は、色の値です。

この『333』の数値を書き換えることで、任意の色に設定することができます。

色の数字に関しては、「色見本」のサイトで確認します。

例えば、文字色を赤に変更する場合、『#333』の部分を『#f00』に書き換えます。

すると、以下のように文字色が変わります。

賢威7 文字色 赤

ここで変更した文字色は、先の文字サイズを変更した時と同様に、『賢威テンプレートの共通設定』から文字色を指定していますので、見出しなどの文字色も指定した色に変わります。

なので、見出しなどは別の文字色にしたい場合、個別に色の指定をする必要があります。

賢威7で見出しなど(hタグ)の文字色を書きかえる方法

CSSファイルでは、共通設定で文字色を指定しても、個別で色を指定すると、個別で指定した色が優先されます。

なので、見出しの文字色を変える場合、共通設定で文字色を指定したあとに、個別で見出しなど(hタグ)の文字色を指定します。

個別で見出し(hタグ)の文字色を指定するには、

ワードプレスのダッシュボード→外観→テーマの編集

の順にクリックし、base.cssの中から、以下の項目を探します。

賢威7 base.css 見出し

上記画像の『見出し』と書かれた項目を見つけたら、その下にあるh3要素の箇所までスクロールします。

賢威7 basu.css 見出し3

この赤枠で囲った一番下の行に、文字色を指定するコードを追記します。

今回は、一例として見出し3の文字色を黒にしますので、

color: #333

の一文を追記します。

賢威7 見出し 文字色変更

『color: #333』を追記すると、見出しの文字が以下のように黒色になります。

賢威7 見出し 黒色

このように、個別で見出しの色を指定することで、見出しの色だけ共通設定とは別の文字色に変更することが可能です。

以上が、賢威7で文字の大きさや色を変更する方法です。

続いて、賢威6.2で文字の大きさや色を変更する方法について解説します。

賢威6.2で投稿記事の文字の大きさ(フォントサイズ)を変える方法

まずは、文字の大きさを変えてみましょう。

5

design.cssのファイル内からこの部分を見つけて下さい。

そしたら、font-sizeの数字を変更します。

6

例として2.4くらいにします。

変更したら、「ファイルを更新」ボタンをクリックして保存し、サイトに戻って確認してみます。

7

変更前がこのようだったのが、

8

変更後はこのようになります。ソーシャルボタンの部分で見比べると分かりやすいと思います。

9

全体で見ると分かりますが、今回変更したのは、コンテンツ、すなわち投稿記事に関連する文字のサイズです。ここでは文字のサイズの他に、h2タグや関連記事(YARPP)、コメント欄の文字の大きさが変わります。

他の文字の大きさ、フォントサイズを変更するには、その部分のフォントサイズ(font-size)を変更しなければなりません。

賢威6.2で投稿記事の文字の色を変える方法

続いて、文字の色を変えてみる方法です。

10

design.cssの1番始めにありますね。

そしたら、ここの「333」と書かれた数字の部分だけ、別の色の数字に変更して「ファイルを更新」ボタンをクリックして保存し、サイトに戻って確認してみます。

色の数字に関しては、「色見本」のサイトで確認して下さい。

11

この様になります。今回は分かりやすいように赤色(#F00)にしました。

ただし、h2(記事タイトル)など、他の文字の色もいっぺんに変わってしまうので、変えたくない色については、それぞれに「color: #〇〇◯;」を書き加えていく必要があります。

賢威6.2でh2などの色を書き加えていく方法

変えたくない部分の色を書き換えるには、「color: #〇〇◯;」を付け加えるだけでOKです。

例として、h2(記事タイトル)の部分に「color: #〇〇◯;」を書き加えます。

12

h2のフォントサイズなどを指定しているこの部分を探して下さい。そしたらこの様にします。

13

付け加えて、前の色に指定するだけですね。

これでh2(記事タイトル)については色が元に戻りました。

14

こうなればOKです。

CSSの編集の流れ

CSSファイルを編集する流れは、

1.編集したいコードを「要素の検証」を使って見つける

2.賢威(ワードプレス)のCSSファイルにアクセスして、コードを見つける

3.コードを編集して保存し、サイトを確認する。

この繰り返しになります。

万が一のことがあるので、できるだけバックアップをとっておきましょう。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ