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


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

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

こちらですね。

h1は大見出し(ブログタイトル)なので設定場所は別で、h5とh6はメインコンテンツ内であまり使われないので、それぞれ割愛しました。

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です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次ページ

12次

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

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

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

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

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

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

このブログは、

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

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

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

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

などを書いています。

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

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





記事一覧


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


このページの先頭へ