賢威の見出しタグh2・h3・h4の背景色と文字の色や大きさを変更する設定方法


賢威のメインコンテンツ(記事本文)内で使われる、見出しタグ(h1、h2、h3など)の、背景色と文字の色や大きさを変更するときの方法について解説します。

賢威見出しタグh2h3h4背景文字色大きさ変更画像1

こちらですね。

賢威7の場合、記事タイトルにはh1、記事本文中の見出しではh2以降(h2、h3など…)が使われています。

賢威6.2の場合、記事タイトルにはh2、記事本文中の見出しではh3以降(h3、h4…)が使われています。

なので、今回は、賢威7のh1、h2、h3と、賢威6.2のh2、h3、h4のそれぞれについて解説します。

賢威7で見出しタグ(h1、h2、h3)の背景色、文字色、フォントサイズ(文字の大きさ)を変更する方法

賢威7で見出しタグ(h1、h2、h3)を変更するには、

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

の順にクリックし、以下のコードを探します

賢威7 base.css 見出し 項目

赤枠で囲った箇所が、それぞれの見出しタグ(h1、h2、h3)のデザインを指定するCSSコードです。

この内、以下のCSSコードが、見出しタグの背景色、文字色、フォントサイズ(文字の大きさ)をコントロールしている部分になります。

※h3の部分には、『background』『color』が無いので、書き加えます。

background: #909090;/*見出しの背景色*/
color: #fff;/*見出しの文字色*/
font-size: 1.75em;/*見出しのフォントサイズ(文字の大きさ)*/

なので、背景色を変更する場合は、『background: #909090;』の内、『#909090』の部分を好みのカラーコードに変更します。

見出しの文字色を変更する場合は、『color: #fff;』の内、『#fff;』の部分を好みのカラーコードに変更します。

カラーコードは、以下のようなサイトにある色見本を参考にします。

色見本

見出しのフォントサイズ(文字の大きさ)を変更する場合は、『font-size: 1.75em』の内、『1.75em』の数値を大きくしたり、小さくしたりします。

今回は一例として、賢威7の見出し(h2)を以下のように変更します。

・見出しの背景色→水色(#87ceeb)に変更

・見出しの文字色→赤色(#ff0000)に変更

・見出しのフォントサイズ(文字の大きさ)→大きくする(2.25em)

上記のコードに書き換えると以下のようになります。

賢威7 見出し2 変更

ブログの表示は以下のように変わります。

賢威7 見出し2 変更1

今回は、一例として、見出し2(h2タグ)の背景色・文字色・フォントサイズ(文字の大きさ)を変更しましたが、見出しタグ(hタグ)は全部でh1~h6まであります。

それぞれ同様の手順で、背景色・文字色・フォントサイズ(文字の大きさ)を変更が可能です。

次に賢威6.2での変更方法について解説します。

賢威6.2でh2タグの背景色と文字の色や大きさを変更する方法

まずはh2のタグ(記事のタイトル)です。ワードプレスのダッシュボード→外観→テーマの編集→design.cssに進み以下の場所を探してください。

賢威見出しタグh2h3h4背景文字色大きさ変更画像2

h2タグの背景色を変更するには、background: url(./images/title/bg-conts-h2.gif) left top repeat-x #eaeaea;の色のコードの部分「#eaeaea;」を変更します。

続いて、文字の色は、color #色のコード;を書き足します。

最後に文字の大きさは、背景色のコードの下にあるfont-size: 1.286em;の数値の部分「1.286」を変更します。

設定が完了すれば、次のようになります。

賢威見出しタグh2h3h4背景文字色大きさ変更画像3

例としてこのようにしました。ファイルを保存して、記事ページなどに戻って確認します。

賢威見出しタグh2h3h4背景文字色大きさ変更画像4

このようになればOKです。

賢威6.2でh3タグの背景色と文字の色の設定と文字の大きさを変更する方法

続いて、見出しのh3のタグです。

編集場所は同じdesign.css内で、先ほど設定したh2のコードのすぐ下の方にあります。

賢威見出しタグh2h3h4背景文字色大きさ変更画像5

h3タグの背景色を変更するには、background-color: #色のコード;を書き足します。

文字の色も同様に、color #色のコード;を書き足します。

最後に、文字の大きさは、font-size: 1.143em;の数値の部分「1.143」を変更します。

設定が完了すれば、次のようになります。

賢威見出しタグh2h3h4背景文字色大きさ変更画像6

例としてこのようにしました。ファイルを保存して、記事ページなどに戻って確認します。

賢威見出しタグh2h3h4背景文字色大きさ変更画像7

このようになればOKです。

賢威6.2でh4タグの背景色と文字の色や大きさを設定する方法

最後に、見出しのh4のタグです。

こちらも同様に、編集場所は同じdesign.css内で、先ほど設定したh3のコードのすぐ下の方にあります。

賢威見出しタグh2h3h4背景文字色大きさ変更画像8

h4タグの背景色は、background-color: #色のコード;を書き足します。

文字の色も同様に、color #色のコード;を書き足します。

さらに文字の大きさも、font-size: 数値em;を書き足します。文字の大きさは、他のタグ同様に小数点をつけて細かく大きさを設定することができます。

設定が完了すれば、次のようになります。

賢威見出しタグh2h3h4背景文字色大きさ変更画像9

例としてこのようにしました。ファイルを保存して、記事ページなどに戻って確認します。

賢威見出しタグh2h3h4背景文字色大きさ変更画像10

このようになればOKです。

今回変更した数値や色は例として設定したものです。各自お好みで数値や色を変更して下さい。

また、文字が見えにくい、目がチカチカするなどといった色にはしないで、バランスを考えて変更して下さい。

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

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

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

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

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

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



総合案内

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

このページの先頭へ