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


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

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

賢威のCSSで文字の色を変更するには?

まず、賢威のCSSファイルにアクセスします。

ワードプレスのダッシュボード→外観→エディターに進みます。

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

1

一方、賢威のCSSファイルは、画像のように9つに分かれています。

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

ではまず今回の目的である、文字の色やサイズを変更するためのファイルにアクセスします。そのファイル名は「design.css」です。

design.cssを編集する

賢威で文字のフォントサイズや色を変更する場合、編集する場所はdesign.cssのファイル内のコードです。基本的に賢威のサイトでレイアウトを変更したり設定したりする場合は、このdesign.cssを主に編集します。

2

上の画像を観てもらえば分かりますが、どこがどのような部分の文字や色を担当しているか分かりやすいですよね。

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

ただ、どのコードを編集すればいいかわからないという方がいると思います。

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

3

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

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

4

編集するコードがどこにあるかわからないという方は、検索窓を利用します。マックをお使いの方は「command+F」、Windowsをお使いの方は「Ctrl+F」を押して、画面右上に画像のような検索窓を表示させて下さい。

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

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

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

投稿記事の文字の大きさ(フォントサイズ)を変えてみる

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

5

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

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

6

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

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

7

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

8

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

9

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

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

投稿記事の文字の色を変えてみる

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

10

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

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

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

11

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

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

h2などの色を書き加えていく方法

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

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

12

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

13

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

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

14

こうなればOKです。

CSSの編集の流れ

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

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

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

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

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

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

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ